Web Design admin  

Beautiful & Fast: Optimise Your Images For the Web

It's said that a picture is worth a thousand words, and we couldn't agree more; but should you sacrifice your site's load time and search-ranking for the use of beautiful, high-quality images?

High-quality images are valuable assets to any website; they greatly improve the look and feel, effectively relay important information and evoke desirable emotions and actions in your visitors. When you’re beautifying your site and rightfully showcasing your product range, the last thing that you’re thinking of is the effect that it’s having on your user experience, speed and search-engine ranking.

It’s possible to have the best of both worlds: this handy guide explains how you can optimise your website's imagery and boost your search ranking success.

Optimise For Speed

Slimming the file size of your images, without reducing image quality, is what image optimisation is all about. We see image optimisation as a two stage process: 'pre-web' and 'on-site'.

Step 1: Pre-Web

Before uploading images to your site, there’s a number of tweaks that you can make to reduce the file size, simply by using your image editing software (Photoshop, Gimp etc).

Save for Purpose

Of course there are a number of benefits for choosing one format over another, and scenarios where it’s best to use any of JPG/JPEG, PNG or GIF. Before deciding, remember that the file format you choose will have a significant impact on the actual size.

JPG/JPEG is a suitable format for photographs and other images with a wide range of colours, and provided you don’t over compress your images, they'll remain crisp and of high quality.

Both PNG and GIF formats are suitable for images with block colours, such as logos. Unlike GIF, PNG supports 24-bit images and produces background transparency without jagged edges. This guide contains more details on the differences between each of these file types.

Photoshop's ‘Save for Web & Devices’ Feature

The 'Save For Web & Devices' option in Photoshop lets you save your image so that it’s web-ready. It’s a simple tool, designed solely to help you decide on your 'file size vs image quality' trade off, simply choose a file format and specify how much compression/loss of quality you want. Importantly, it lets you see your original image and edited image side-by-side, so you can easily judge what’s been lost.

Compression Apps

After carrying out the above steps, there's absolutely no harm in running your images through a compression app like ImageOptim (which unfortunately is currently only available for Mac). Our Design team use it for each image before uploading it on site.

ImageOptim carries out further optimisation and compression by removing unnecessary data that adds to load times. ImageOptim supports a range of formats, including JPG, PNG and GIF. There’s also other recommended optimisation tools (ImageAlpha and JPEGMINI), but ImageOptim is regarded as first-rate.

Step 2: On-Site

Delay Image Loading

'Lazy Load' functionality is ideal for image-heavy sites as it reduces server lag from image pre-loading, by only loading images that are visible in the user's web browser. Implementing this on WordPress is simple and there's lots of plugins that can do this for you, such as Image Lazyload & Slideshow.


Caching means your browser will ‘remember’ elements on a webpage that it's accessed before, so that they are returned much faster. Browser caching helps dramatically improve the load time of image-heavy pages. For more information, check out Google's developer's guide on leveraging browser caching.

If you’re a WordPress user, there are a number of caching plugins available, but we recommend WP Super Cache or Quick Cache.

Have we missed a optimisation tip? We'd love to hear from you about your most effective image tweaks in the comments section below.