May
15
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.
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...
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.
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.
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.
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.
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
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.
From there select Save and you’re done. Good luck!
Comments
2 Responses to “Keep Sites small: Optimize jpgs!”
Leave a Reply
Man this is super helpful. Thanks a bunch for the tips.
[...] 5) Optimize your photos for the web. When you place images on a website, they need to be the appropriate file type and size. Visit this blog post for more information about optimizing images for the web. [...]