Register a one year .XYZ domain for just £1.99!chevron_right

close
Call us 7am - Midnight 01628 200 161My.Tsohostshopping_basket0 Item(s): £0.00
menuMenu

keyboard_backspaceBack to the Blog

Beautiful & Fast: Optimise Your Images For the Web

Posted 22nd October, 2014 by Aliysa

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

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.

Categories: Web Design, Tips

You may also like:

4 Of The Best Notification Plugins
4 Of The Best Notification Plugins
2016 Most Popular Reads
2016 Most Popular Reads
4 Tweaks to Boost Your Site Performance
4 Tweaks to Boost Your Site Performance
php.ini; The Small File That Makes a Big Difference
php.ini; The Small File That Makes a Big Difference
Email Marketing: 4 Ways to Effectively Grow Your List
Email Marketing: 4 Ways to Effectively Grow Your List
Get Visual: The 4 Best WordPress Gallery Plugins
Get Visual: The 4 Best WordPress Gallery Plugins

Cookies help us to deliver our services. By using our website, you agree to our use of cookies. Learn More

close