Optimising Images With Photoshop CS5

To keep your website running light and lean, all images should be optimised before uploading them to your website.

If you have Photoshop (you lucky thing) then continue onto the guide below.

If you don’t have the glorious awesomeness that is Photoshop, and don’t fancy forking out for a copy, then a great free alternative is GIMP (don’t be scared by the name, thankfully it’s only an acronym for GNU Image Manipulation Program).  You can download GIMP directly from http://www.gimp.org/ and our user guide for Optimising Images Using GIMP is here.

Overview on Optimising Images for Website Use

As a guideline, your images will typically be a maximum of 800 pixels wide and 600 pixels tall, and may be much smaller depending on the size of image you’d like on your webpage (or may be larger if it happens to be destined as a background image)

Unoptimised images can be bad for your website for numerous reasons including:

• Poor user experience.  Large images take a long time to load, and your user/customer will have to wait for the large image to load.
• Slow website.  One large image on a page can slow the whole page loading time, which can be very irritating for users.
• Excessive bandwidth consumption.  Every time a user loads your large image, it takes up bandwidth, which is often a limited monthly supply.  When your bandwidth runs out, your website goes offline.
• SEO impact.  Slow page load times hurt your website’s SEO.

Let’s Get Optimising!

1. Open Photoshop
2. In the Photoshop menu, go to File -> Open and select your chosen “soon to be optimised into light and lean awesomeness” image
3. If you get any Photoshop popup notices do to with compatibility, click the Ok button if you can.
4. From the Photoshop menu, go to Image -> Image Size
5. The first thing you should check is the Resolution.  This should be 72 pixels/inch.
6. Once you’ve changed the resolution (if needed), then the Width and Height should have automatically updated.  If the Width is more than 800 pixels and/or the Height is greater than 600 pixels, then you may wish to resize these to smaller dimensions.  You only need to update the Width, and then the Height will update itself automatically (and keep the image proportions).  Or alternatively you can update the Height, and the Width will update itself automatically when you click.  Make sure that you resize your image to the exact dimensions needed on your website.
7. To Save in an optimised format, you need to do a special kind of Save: File -> Save For Web & Devices…
8. Chose your File Type:
   • If you have any transparency in your image, you’ll need to use .PNG (PNG-24)
   • Otherwise, you should generally use .JPG for photographic images (JPEG with Quality set to 60 and the Optimised Progressive box must be ticked) (Edit: Progressive is a setting that makes images load as a blurred image which then gets clearer as the page loads.  This is better for page speed and user experience so we’d recommend using Progressive over Optimised for your SEO’d images), and .PNG (PNG-8) for graphics that include no transparency (although you can often get away with JPEG with Quality set to 60 for graphics too, depending on their size).  You may want to flip between the options and keep an eye on the file size in the bottom left hand corner (this tells you how big your file will be).
9. Save your image file, and for best practice SEO, filenames should have no spaces, ideally all lowercase, and use hypens: “-” (never underscores: “_”) to identify separate words in a file name.
   • For example: instead of “My New File.jpg” use “my-new-file.jpg“

To illustrate how big of a difference picking the right file type can make:

PNG-24: 581.3KB

PNG-8, 128 colours: 161.3KB

JPEG with Quality at 60: 137.7KB

PNG-8 with 32 colours: 108KB

PNG-8 with 16 colours: 78.57KB

And if you were wondering how big a difference all of the above optimisation changes made to my original image, the results are:

1. Original image (300 pixels per inch, 3000 pixels wide, 2200 pixels high): 10.6MB
2. PNG-8, 128 colours (72 pixels per inch, 720 pixels wide, 528 pixels high): 202KB
3. JPEG, 30 Quality (72 pixels per inch, 720 pixels wide, 528 pixels high): 126KB
4. PNG-8, 16 colours (72 pixels per inch, 720 pixels wide, 528 pixels high): 80KB

And my final 3 optimised images above have be added below (see if you can see the difference):

PNG-8, 16 colours: 80KB

JPEG, 30 Quality: 126KB

PNG-8, 128 colours: 202KB