Photos displayed on the web have a fundamental need to load quickly. Image optimization is a simple process done in many image editing programs, for this demonstration we will use Adobe Photoshop CS4.
First thing to do is open up your image and find out a few things about it. Once you have your image opened, select Image, Image Size. If you already know your image is gigantic, hit the Fast Forward button.
In the Image Size box you can see the images pixel or inch dimensions as well as resolution. This particular image is 9.8 megs and 300 ppi (pixels per inch), It would cause the site to load slowly and provide a painful user experience.
Once you have the Image Size window open, you can easily change image’s resolution or dimensions. For now, let’s not change the resolution but make the image size 500px, bringing the file size down to about 500k. Be sure you check the Constrain Proportions box. For an even cooler way to resize your images in photoshop, check this out.
Now that we have a smaller image, we can use the Save for Web feature in Photoshop. Selecting File > Save For Web will automatically bring your image’s resolution down to 72 ppi.
Ok, i know this screen looks scary because of all the options, but we are going to simplify things and only talk about a few of the settings. By default, Photoshop selects the most basic settings for us. Since this tutorial is all about jpgs, first thing we need to do is make sure we select JPEG in the top right drop-down menu. You’ll notice, in this instance, the quality defaults to 100.
In the lower left portion of the window you will see a format and file size, JPEG and 195.5K respectively. This is extremely valuable information, you should always pay attention to the information displayed here.
Just by selecting Save For Web, we have shaved over 300k off our image. not bad! Lets take it a step further. In the Quality field replace 100 with 60.
In this case, there is such a minimal change in the appearance of the image its hard to even tell anything happened. That is a good thing because we just brought our image down to 57.49K, saving an additional 138K. Not bad for a full color photograph that is 500px wide!
From there select Save and you’re done. Good luck!