A Guide to Image Optimisation
A picture is worth a thousand words – a phrase you hear very often but one that can be applied to a number of situations. In ecommerce, images are crucial. They are used across your website and other online spaces to improve the user’s experience and to, ultimately, generate more sales. The first things to consider when taking photos for your website are the lighting, the setting and the device you are using to take the image – a DSLR camera will produce much better-quality images than those taken with an iPhone.
The better the quality of the images, the more details the user will be able to see which is particularly important for product images as people like to see what they are buying before they part ways with their money. However, the higher the image quality, the slower your website will be to load. Slow loading websites can create a negative user experience and can also cause Google and other search engines to list your website lower in the results pages, both of which will negatively affect your conversion rates. To avoid this from happening, you need to find the balance between good quality images and a fast loading speed. There are a few ways you can optimise your images to find this balance, as you can see below:
Compress to Impress
If you choose to take your images with a device that produces high resolution images, your images will be a higher quality, but you will be faced with the issue of larger file sizes. This can result in a slow-loading website if the images are not compressed properly. There are two types of image compression – lossless and lossy. Lossless compression keeps as much detail as possible and this is often used for documentation purposes, whereas lossy has the potential to lose detail but it also lowers the file size, making it a common choice in website coding.
When compressing images for your ecommerce site, you need to consider what the images are required for on which page – for example, product pages will need higher quality images than your homepage might.
Choose your .format
There are several formats for digital images, and it is possible to further optimise the images on your website by changing the format your images are saved in. Some image formats you may be familiar with are below:
JPEG is probably the file format that you will be most familiar with as it very commonly used. It is a lossy graphic file so it’s a great way to reduce the file size but it’s possible maintain a relatively high image quality which makes them a great choice for use on your website. Also, with JPEG, you can select how much you compress the image to find the right balance of file size and quality for the required use.
PNG files support lossless compression which makes them ideal for high resolution, rich images with lots of colours and definition. PNG files also support transparent backgrounds so are good for logos and other icons on your website.
You may very well be familiar with GIF files if you spend any time on the internet at all. GIF files may not be a great choice for your website but they are a great example of a format with a low file size and a low-quality image.
Time to Mention the Dimensions
Something to consider when adding images to your website, is how they will display on different screen sizes. Remember to specify the width and height of your images in your website’s code for both mobile and desktop so that web browsers can display the content correctly.
Now, images are measured in pixels. So, if you use a 12-megapixel camera, the images will be made up of 12 million pixels – 3000px by 4000px. For product images on your ecommerce site, the optimum image size is 1028px by 1028px. Other images should not exceed 1000px by 1000px, or you could end up with a slow running site.
Once you have your images formatted and embedded in your code with the correct dimensions, you can start to optimise them for users and the search engines. This will both improve user experience and help people to first find your ecommerce website, and then to buy your products. Image optimisation means browsers will be more aware of what content you have on your site as you will be actively signposting what’s what, and this will boost your ranking on the search engine results pages as a result.
The first technique here is to ensure that your files are appropriately named. This will be useful for you when uploading images to certain pages, but also for Google to determine what your images are and how to list them in the image search results pages.
Secondly, you should optimise your metadata – which is the data that gives information about your other data in the backend of your website. This is also useful for Google as it’s another way for you to signpost your content.
Lastly, optimise your alt text – this is an accessibility feature that exists to tell people who cannot see or load your image what the image is. It allows you to keep the essence of whatever the image is bringing to your content. Alt text should be entirely descriptive – this is not a place to randomly add keywords!
Sounds too complicated?
If you’re worried about optimising the images on your ecommerce website, selectcommerce is your answer.
selectcommerce can resize all your images for you, ensuring that your website will continue to load quickly and that everything will display correctly. As selectcommerce is made with mobile in mind, you know your website will look great on any device too.