Photoshop CS5 logo

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!

Image optimisation with photoshop CS5

  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

Image optimised with png24

 

PNG-8, 128 colours: 161.3KB

Sunrise image png 8 with 128 colours

 

JPEG with Quality at 60: 137.7KB

Image optimised with jpg

 

PNG-8 with 32 colours: 108KB

Sunrise image png 8 with 32 colours

 

PNG-8 with 16 colours: 78.57KB

Sunrise image png 8 with 16 colours

 

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

Why optimising website images is important

  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
Image optimised with png8 and 16 colours
JPEG, 30 Quality: 126KB
Sunrise image jpg 30 quality
PNG-8, 128 colours: 202KB
Sunrise image png 8 with 128 colours

This entry was posted in SEO on by .

About Sara Thornton

Sara is a Jack (or Jill) of many trades. A web designer and developer, an ethical SEO implementer, an AdWords advocate, as well as being our in house user-guide creator and trainer. In her spare time she loves a bendy/stretchy yoga session, and feels most happy when she's near the ocean (ideally with a ridiculously absorbing book).

Leave a Reply

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

One thought on “Optimising Images With Photoshop CS5

  1. Pingback: How to Optimise a Joomla Website