Keep Sites small: Optimize jpgs!

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.

sifw1

Image > Image Size. Done.

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.

9MB image? don't even think about it...

9MB image? don't even think about it...

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.

sifw3

Be sure to check the "Constrain Proportions" box.

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.

sifw4

File > Save for Web & Devices...

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.

sifw5

These are the two main settings we will deal with.

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.

sifw6

195.5K is still quite large for this image.

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.

For a finer amount of detail, use the slider by clicking on the up & down arrow beside Quality

For a finer amount of detail, use the slider by clicking on the up & down arrow beside Quality

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!

Much better.

Much better.

From there select Save and you’re done. Good luck!

3 thoughts on “Keep Sites small: Optimize jpgs!

  1. if your target is the web you should also change the resolution of the image to 72 from 300.

    300 is sufficient for print, but overkill for screens.

Leave a Reply

Your email address will not be published. Required fields are marked *