08 December 15 Picture perfect: a guide to preparing images for websites.

According to this fast fact from eyeQ the human brain processes visual information 60,000 times quicker than the time it takes to decode text. So not only does a picture tell a thousand words, it does so a couple of thousand times faster too.

That’s a pretty powerful case for including imagery on your website. But in order to get the best out of your visual content, you’ll need to understand best-practice to optimise images for speed and quality.

Usually, image optimisation is a process that gets taken care of during a website build. The designer or developer will check your images to determine whether they meet the performance standards of your site. If they don’t, they’ll simply adjust them – it’s easy for design folk to do this, because they know what they’re doing.

But what happens once they’ve handed over your website to you – the client – and you’re in control? How do you maintain the integrity of your site and continue to create a seamless experience for your audience? How do you optimise images? Why should you?

The instantaneous nature of media consumption and technology means that our attention spans are shrinking. No one likes a slow-loading website. First off, they’re frustrating. But more importantly, a slow loading site can negatively impact conversion rates, user satisfaction, time spent on site, and contribute to a higher bounce rate.

Images that aren’t optimised can slow down page load times, force sites to lag, and compromise your user’s experience.

I’ve written this walkthrough so that you have a handy resource on file. It outlines some practical tips and procedural guidelines on preparing images for websites, so that you can get those all-important images optimised, uploaded and looking awesome.

1. Understand the impact of image size.

Image size has a major impact on the performance of a site. According to statistics collected by HTTP Archive, the total file size of assets on the average web page exceeds 2MB. Of that, images take up 62%. It’s huge. So it’s worth ensuring they’re optimised and working to your benefit. Because if they’re not, it can be extremely annoying.

To see how image sizes can affect load times, and therefore user experience, let’s take a look at the following examples.

First, see how large size images load, by clicking the ‘add ten more images’ button at the top of the page. Notice how they erratically load, with the top section of the image appearing first and the rest bumpily following thereafter? Click ‘add ten more images’ again and take note.

Now, take a look at how much more quickly and smoothly appropriate size images load, by again clicking ‘add ten more images’. Don’t you find these pictures load more rapidly and effortlessly? Much less frustrating; much more satisfying as a user.

Here’s why.

While both pages are displaying the images for viewing at a width of 200 pixels (px), the Large Size page is actually loading images that are 1200px in width, while the Appropriate Size page is loading the images in the same 200px measurement as you see them.

The extra wait time for the large size images occurs because your browser is having to resize the larger images as the page loads them. In other words, your browser is taking a while to do the work that you might have done resizing your images during the website build, or before loading them onto your page.

It’s possible for images to be displayed in the browser at different dimensions than what the files actually are (as demonstrated by the example above). However, the reverse is also true – you can display images at a smaller size than what they actually are, but a browser is still going to take the time to load the asset at the full pixel size.

Take this for an example: an image that is 1200px in width by 800px in height has a total of 960,000px. If it’s displayed in the browser at 200px width by 133px height, the user only sees a total of 26,600px. The browser will still take the time to load the remaining 933,400px of the image asset, even if the user won’t see it in those dimensions.

That’s why it’s worth taking the time to optimise your images – so that your site users won’t have to take the time waiting for their visual content to load.

2. Find the ideal width x height.

MeasureIt is a great browser app for Firefox and Chrome that allows you to take width and height measurements in pixels, in your browser. This will help you determine the pixel measurements that you’ll be optimising your images to, later on.

After installing the app, click on the MeasureIt icon in your browser toolbar. Then, click and drag your mouse around the area on your webpage where your image is going to be displayed – this will provide you with the correct width and height dimensions that your image should be prepared to.

If you find yourself getting stuck – here, or at any other point throughout the process – don’t Google or give up! Have a chat with the designer and/or developer of your website to find out how to best prepare the images you wish to use. They are there to help and it’s likely that you’ll learn a few handy tricks along the way.

3. Prepare images to the correct width and height.

Once you’ve established the correct dimensions of your image, you need to get it into PhotoShop.

Open the image in PhotoShop and crop and/or resize it to the required width and height. If you don’t have access to PhotoShop, or you’re not familiar with using it, I’d recommend pixlr editor. It’s a simple web app that can help you out with resizing images. Here’s how.

From the menu at the top of the page, go to ‘File>New image’ to create a blank image canvas. In the ‘New image’ panel that you’re prompted with, enter the required height and width dimensions for the final image that you’ll be uploading to your website. On the right hand side of the screen, you should see 3 panels, with one named ‘Layers’. If it’s not visible, click ‘View>Layers’ on the top menu to bring the panel up.

Next, add your source image to the canvas. You need to add it as a layer, so click ‘Layer>Open image as layer’ from the top menu. Your ‘canvas image’ is basically a backdrop that allows you to load and manipulate other images (your source image, for example) upon it.

With the layer of your source image selected in the ‘Layers’ panel, go to ‘Edit>Free transform…’ from the top menu. This will allow you to activate the resize functionality. Upon doing this, you’ll see some small blue boxes added to each of the corners of your source image – these are handles which you can use to resize your image. To resize your image, all you need to do is click and hold with your mouse.

If you can’t see all of these handles, press ‘Esc’ to leave the resize functionality. Zoom out from the image canvas by scrolling up on your mouse wheel, or go to ‘View>Zoom out’ from the top menu. Now select ‘Edit>Free transform…’ again.

While the resize tool is activated, hold ‘Shift’ on your keyboard to keep the width and height of the source image in proportion as you drag with your mouse to resize it. If you need to, you can also reposition your source image within the canvas by clicking on it, holding your mouse, and dragging.

Press ‘Enter’ on your keyboard to apply the size and position settings that you have made to the source image within the canvas.

Any changes you make within the image editor are saved as history steps which you can roll back to undo anything you’ve done. Go to ‘View>History’ to bring up the ‘History’ panel.

Once you’re happy with how your image looks, go to ‘File>Save’ and follow the prompts to save your resized image to your computer.

4. Use ‘lossy compression’ for an extra optimisation improvement.

Before you upload your correctly sized images to your website, try using lossy compression to reduce their file size even further. This is a tip of the trade and it goes a long way towards optimising your site. What is lossy compression? It’s a process that reduces a file by permanently eliminating certain information – especially data that is deemed irrelevant. For example, a certain amount of quality loss (hence, “lossy”) will not be detectable by users, but it will reduce the file size with positive benefits.

In some instances, images can be reduced to less than half of their original file size. The reduction is achieved by reducing the sharpness and detail of the overall image, but in a capacity that won’t be perceivable by the human eye. For example, by combining pixels that are a similar shade of colour.

To create a lossy compressed image file, upload your image to Compressor.io and follow the prompts.

****

And there you have it – perfectly optimised images that, quite simply, give you and your audience a much better result.

Here’s a quick recap of why:

1. Create visual interest on your page. Remember we said the brain processes images faster than text? Well, image content is also likely to increase the engagement on your website and generate more shares on social (in fact, of 30,000 brand pages analysed recently, statistics show that image content accounts for a whopping 87% of interactions).
2. Your page will load much faster and be perceived to load faster. Happy you, happy customers, happy Google.
3. Happy customers are more likely to stay on your site for longer, opening up the potential for increased engagements and better traction.

Next time you’re waiting for a website to load and you’re frustrated by the experience, picture how much better things could be if all images were optimised!

Have you found this article useful? I’d love to hear your thoughts. Let me know in the comments below.