Wednesday, April 2, 2014

How to Optimize Images for the Web Using Photoshop

I wondered if everyone literally wrecks their brain every time they have to create a Flash animation and it can only be 40k. Is it just me? 


The lucky in my eyes are those of us who have to create ads with flashy content/video served at third parties. I have spent hours finding the best way to get Flash files to look their best at the lowest resolution possible. I will show you how to optimize images but I must note that there are also best practices to follow in order to have the best possible ad at the lowest possible resolution and in this post I will advice on both. I know I know Flash is going out of style but these practices can be used for your website, blog, and it's just good information to know.


Here's the deal in step by step:    


#1 Planning 

Take a few minutes to sketch/thumbnail your idea for the ad. Keep in mind that the simplest message might be the easiest to deliver and may give you the greatest number of clicks. Also, make sure that you think about the placement of text over the image. Most online advertisements specs are for small-size ad, which means that you cannot have very complicated/colorful images if you're going to have text over them. Believe me I know from experience.

#2 Resize your images - 

Using thecrop tool resize the images you're using to your desired size.

#3 Go to File > Save for Web



#4 Last Step is to adjust file size using the Save for the Web option



Here's how to make it small: 

JPEG/GIF/PNG OH MY!!!
You will need to experiment with these to decide which one makes your picture look the best. In general photos look better as JPGs though they may not produce the smallest file size all of the time. I do use them for photos  and change the compression to smaller. Also you have the option of blurring the picture which makes it look better because of interpolation of the image.

GIF/PNG Generally these two options are better for text. The text look clearer than using a JPG for text heavy images. You're able to set the number of colors. The lower the number of color the lower the size of the image. Watch out for some images don't look better with less color. I prefer PNG to GIF because of their size but some e-mail systems do not support them. 

QUALITY: The best option ever invented from Photoshop it tells you exactly what to do. Bicubic smoother or bicubic sharper are the two options to pay attention to. Smoother for photos and sharper for pictures is what I generally use.

And that's it you have the photo you want. The best advice I could give anyone is to experiment with the options available. There's a lot I didn't show because these are my best practices. If you have a tip you'd like to share, please fill the comment section below. See ya next time!

No comments:

Post a Comment