Blog homepage

If you’re adding photos to your website you will need to “optimise” them first so that they are the correct size to fit on the page and load as quickly as possible. This article explains how to “optimise” your images using Photoshop, or for those that don’t have image editing software, using the online tool Webresizer. The article covers optimisation for photos or images in jpg format and is aimed at my clients who upload photos/images of their products/services through their website content management systems.

What is optimisation?

Optimising means:

• changing the photo’s width and height (measured in pixels), so that it fits nicely on your webpage
• reducing (or compressing) the file size of the photo  (measured in kilobytes KB or megabytes MB), so that it does not slow down the display of the webpage for your website’s visitors

This is particularly important if you’re using images straight from your camera, which may be anywhere between around 500Kb and 5Mb.

Depending on how images are used on your own website here are some rough examples of what sizes you might be aiming for:

• For a photo on a product/service detail page, image 400pixels x 550pixels, 50Kb file size.
• For a photo thumbnail, image 100pixels x 100 pixels, 6Kb file size.

Note: reducing the file size (KB or MB) of an image also reduces its quality. When optimising photos you will need to use your best judgement to get your photos to a low enough file size but with good enough quality so that they still look great on your web page.

Optimising using Photoshop

Open your image in Photoshop then follow the instructions below:

• With your open image select “File” > “Save for web” from the main menu.

• Select “2up” from the top left hand tabs (shown in 1. above) this shows the original image on the left and the optimized image on the right.
  The file size of each image is displayed under the bottom left of each image and you will need to check this when you reduce the quality/file size of the image.
• Use the settings on the top right of the window to change the width, height and file size as follows:

1. Click the Image Size tab and change the width and height of the image, then click the “Apply” button.
2. Make sure the image type is set to JPEG
3. To reduce the file size/quality of the image start with a setting of Medium and change the Quality (3b) lower or higher to get the image quality as good as possible with the lowest file size. Check the image in the right panel to make sure it’s still looking (no pixilation or fuzziness) and the file size shown under the bottom left.

Optimising using Web Resizer

Web Resizer is a great free online tool, with options to allow you to change the width, height, file size and also crop your images.

Go to the Web Resizer website at http://webresizer.com/resizer/ and then follow the instructions below:

1. Browse for the image you want to optimize, then click upload image to load it into the Web Resizer.
   The photo is automatically reduced in width, height and size (shown in the left) and you can see these displayed directly under the image on the left, along with the percentage that the image has been reduced by.
2. You may need to change the width/height further so enter the new width/height in the “New size” box and click the “Apply changes” button
3. Check the optimized image size, displayed directly under the left hand image. You can try reducing this further if need be. The best way to do this is tick the “Compare image sizes” box. This will display a selection of images below of decreasing image quality and size. Find the image that has the lowest file size possible but that still retains good enough quality to not distort the image. Click the “Set quality to…” button then the “download this size” link to download the image.

Other useful image editing tools

Piknik is a free online photo editing website, you can upload you photos and crop, resize and apply special effects, all through your web browser (MAC and PC).

Photoshop Express https://www.photoshop.com/express/landing.html
and Aviary http://aviary.com/ are both powerful online tools (MAC and PC), almost as good as Photoshop, not free unfortunately as they work on a pay monthly basis.

Gimp , silly name, but is a free desktop alternative to Photoshop, (MAC and PC).

Tags: images, optimizing, photos, Photoshop, Webresizer