At some point in our lives we have all heard the phrase ‘a picture is worth a thousand words.’ But what does this really mean and how can it be applied when we optimise images?
Images are used heavily within design as a means of communication and it goes without saying that these need to be high-resolution and crisp no matter what you’re using them for. However when it comes to optimise images for web design, this can come at a price. Large, high-resolution images will severely increase your site’s loading time, in turn increasing your visitor bounce rate and affecting your SEO.
It’s crucial to find a balance between file size and image quality, which is why we’ve provide this step-by-step guide on how to optimise images using Photoshop. We also discuss file types and when it’s best to use them. By using the right type and size of image we ensure that the overall experience of your visitors is as good as possible and it also keeps Google happy by improving the speed your site loads. We go through this process with every image we add to a client’s website.
Step 1
To begin, let’s imagine we want to change the image on the homepage of a healthy eating website. We take a fantastic photo using a DSLR camera and we have our new photo!
However the file size is huge, 10MB to be exact! The dimensions of the photo are 5008×3648 pixels. This is perfect if we wanted to use it to create a banner for an exhibition but is far too big for its use on a website. It would take an enormous amount of time to load so it needs to be smaller so it will load fast.
We need to get started with image optimisation. There are several ways to do this using different commands within Photoshop. We can physically change the dimensions of the image under Image > Image Size, use the ‘Save As’ function or, the one we tend to use the most – the ‘Save for Web’ command. We will explain why we prefer this method shortly.
Start by opening your image in Photoshop and go to Image > Image Size. You’ll then see the screen below.
Step 2
REDUCE THE IMAGE SIZE (DIMENSIONS)
As you can see the original image size is 5008×3648 pixels. Having checked the theme used for the healthy eating website, it’s recommended homepage image size is 1600×800 pixels.
To ensure the image is scaled to these recommended dimensions proportionally within this function, it is crucial to tick the ‘Constrain Proportions’ box. This will ensure that both the width and height of the image are scaled at the same time.
This can however cause problems if your image needs to be scaled to specific dimensions and your original image is of different proportions. As you can see, when we go to alter the width of our image to 1600px with ‘constrain proportions’ ticked, the height is automatically changed to 1165px which is no good.
If we uncheck the ‘constrain proportions’ box and manually change the height to 800px the outcome looks like this – the image appears squashed and looks terrible.
To overcome this, all you’d need to do is open a new Photoshop file at the required dimensions, and resize your image into that space. Because our original image is a different shape, resizing it to the new dimensions would mean some of the image would be cropped slightly. Doing it this way allows you to have more control over which parts of the image you want to display and means you can move it freely. The screenshot below shows how we have resized the image using this method and you’re able to see how much of the image is cropped.
The other option would be to alter the canvas size to the required dimensions under Image > Canvas Size which works in a similar way to adjusting the image size. You are able to use the anchor tool to control how the canvas size is reduced or increased depending on what you need it to do (i.e. from the top, bottom, left side, right corner, all round). This function however will just crop your image if you are making your canvas size smaller than your image. You will have little control over where it is cropped, by how much on each side for example and once it’s complete, that’s it – if you’re not happy you’d have to redo the process. Using the method above gives you much more freedom and movement of your image within the desired space.
Step 3
SAVE AS FUNCTION
The next step once you have adjusted your chosen image to your required dimensions is to save it. Having already reduced the image size using the previous steps, we now need to reduce the size of the file. Go to File > Save As, choose where you’d like the image saved and then you’ll be presented with the screen below.
Adjusting the bar reduces the quality but in turn reduces the file size. There is also a drop down menu which will allow you to select from the following: Maximum, High, Medium and Low – these are preset options that do the same as adjusting the bar. The size of the file is displayed beneath the ‘Preview’ tick box and will change depending on the option you select.
Step 4
SAVE FOR WEB FUNCTION
This step is definitely our favourite method to optimise images and the one we feel gives you the most control. Save for Web command, unlike the Save As function optimises images for web when you save them because you can only select formats optimised for web. It also allows you to have far more control when it comes to adjusting the quality and file size.
Go to File > Save for Web (we have adjusted the size of the image to the recommended theme homepage image size of 1600×800 pixels so bear in mind the file size will have already been decreased from it’s original 10MB before being further optimised for web).
Please click on the image above to enlarge it and enable you to see the detail a little clearer.
The top left box shows four tabs: Original, Optimised, 2-Up and 4-UP. These options give you four different ways to see how your image will look. ‘Original’ simply shows the original on its own. ‘Optimised’ shows just the optimised version. ‘2-Up’ will show you the original and the optimised version side-by-side and ‘4-UP’ gives you the original plus three variations of your image at different qualities.
The box to the right of the screen shows the types of files you can select, whether you’d like it saved as a GIF, PNG or JPEG, all of which are suitable for web. A drop down box displays quality presets – Low, Medium, High, Very High or Maximum. The Quality box next to this is why we prefer using the Save for Web method. Here you can use a sliding bar to manually adjust the quality, adjusting the image visually so you can see the difference between something that is Low at 10 quality or Maximum at 100 quality for example and therefore exactly how it will appear on your website.
In addition to this, at the bottom of each image displays the file type, it’s size and how long it takes to load at a specific modem speed. This is a fantastic tool to visually compare image quality and check their file size before it is saved. Let’s take a look at the final output file size of each of the quality levels for the four images above:
Original (top left) | 3.66MB
High (top right) | 60 Quality | 187.5KB
Medium (bottom left) | 30 Quality | 122.9KB
Low (bottom right) | 10 Quality | 80.19KB
When saving images for web as a general rule of thumb, we tend to stick to between 80-150KB for images and larger homepage images 250-350KB – this is a good guide to stick to and will ensure your sites loading time is quick and user experience is smooth.
Step 5
FILE FORMATS AND WHEN TO USE THEM
The final part of the optimise images process is to explain the different file format available when saving these images for web – GIF, PNG or JPEG and when to use them.
JPEG – JOINT PHOTOGRAPHIC EXPERTS GROUP
These files are most commonly used for photographs on the web because they create small file sizes meaning they will load more easily. JPEGS are images that have been compressed to store a lot of information within a small file size. During this compression some of the image detail is lost in order to make the file smaller – we call this ‘lossy’ compression. The amount of image detail lost is relative to how much the image is compressed.
GIF – GRAPHIC INTERCHANGE FORMAT
These are not generally suitable for photographs but are most commonly used for small animations. This format compresses images in a similar way to JPEGs but instead create lossless compression. This means none of the image details is lost. But it comes at a cost… GIFs have a very limited colour range and it is this that helps with the file size and is the reason they are not suited to photographs.
PNG – PORTABLE NETWORK GRAPHICS
PNGs are not as suitable for photographs compared to JPEGs because although they have a good range of colours, they create large files sizes. If you were using an image that has any text or line art on, PNGs are favourable as they cause these to appear less pixelated than a JPEG would make them. The main advantage of PNGs is that they can have a transparent background so they are ideal for using over background images or colours.
Conclusion
It’s so important to optimise images. Saving images appropriately for web is a simple process but can have a very positive impact on your visitors, customers and Google experience. They say that 39% of people will stop engaging with a website if images won’t load or take too long to do so, so finding the right balance between file size and image quality is key. Knowing which particular files formats to use will also help make your website more visually appealing and ensure your pictures are actually worth a thousand words!
Take a look at the Dairy UK site which is one of our recent website developments. The site uses a large number of images which have been optimised for web. You’ll notice how quickly the site loads as well as how crisp and clear the image appear.