How can I improve my website images for better SEO?

Google has been including page speed as part of its ranking algorithm for the best part of a decade and as of July of this year, page speed became a ranking factor for mobile searches too. People want to find the answers to their searches as quickly as possible and so Google generally prioritises fast sites over slower ones. Given that images account for the greatest proportion of a web page's downloadable data, it is wise to make those images as small as possible so as not to adversely affect your site ranking on Google. Here we give you 3 steps to making smaller sized images. 

What do we mean by size?

When talking about images, there is the size in terms of the image dimensions which can be measured in so many pixels wide by so many pixels high. Then there is the physical size of the image in terms of how many kilobytes or megabytes the image is. The part which makes a difference to your page loading speed is obviously the physical size and we recommend that all images uploaded to your website should be under 1MB in size. Generally, the larger the physical size, the more information there is in the image and so the better quality it is. 

Make sure that any image uploaded to your website is under 1MB

How do I find out the size of my image?

On a mac, you can right-click the file in Finder and select 'Get Info' and there it will show you the physical file size of the image. On a PC, you can right click and select 'Properties' 

But what about image quality?

The more compression you apply to an image, the more detail is lost and so there is an art and a science to ensure your images are the highest possible quality while simultaneously being as physically small in size as possible. The science is simply around making sure the images are the right dimensions and the right format for the use on your website and then the art is in choosing the right compression settings so as not to sacrifice too much quality in the interests of compressing the image to be physically smaller. There are a few simple steps here to ensuring you have the best images for your website while keeping the search engines happy too. 

1. Choose the right format.

Photographs should be saved and uploaded as JPEG as this already has some compression within the format and so is the best for dealing with lots of colours and detail while not resulting in a huge file.

Logos, graphics and images where there is a lot of flat solid colour should be saved and uploaded as PNG. PNGs deal with areas of colour and text with nice crisp lines, so you can zoom in and not lose any quality. They also support transparent backgrounds which can often be useful for logos and icons. If you have a choice, we recommend saving the PNGs as “24 bit” rather than “8 bit” because of the better quality and because they support a larger range of colours.

Photographs should be uploaded as a jpeg.

Graphics and logos should be uploaded as png

2. Choose the right size.

For general use, most images on your website will need to be at least 1000 pixels wide and if the image is to be used full width across your website then it needs to be 2000 pixels wide. If your image is larger than these dimensions then it's possible to make it smaller. However, if your image is smaller than this then it's probably not suitable for use on your website unless it's going to be used very small. If you think of the image file as a bucket full of water. If you want the contents of the bucket to fit in a smaller size such as a cup, you can fill it up with water from the bucket so it's still full and the rest of the water gets discarded but if you want the contents of the bucket to fill a bath, there just isn't enough water to fill the bath. The larger the image, the better the quality and the larger the file size so in order to keep the file size down, it's good practice to upload images which are the right size for their use on your website. 

• Full width banner images = 2000 pixels wide
• Images not full width = 1000 pixels wide

If you don't have a program such as Photoshop to resize your images, it's possible on a mac to resize images using Preview which is a program already installed on the mac for viewing PDFs and images. On Windows, there is an application called Paint which can be used to resize images. Alternatively, there are some browser-based imaging editing options including Canva, Be Funky, and PIXLR. The settings you need to look for are things like 'constrain proportions' which should be checked to make sure that your image's aspect ratio doesn't get distorted. Also, you need to make sure that your units are set to use pixels and then simply type in your new image width and click ok. If your application has a 'save for web' option then this should be used to save the image. Occasionally, you may also see 'resample image' as an option which you also want to check as you don't want to keep the same file size while you're changing the dimensions which happen if this is unticked usually by increasing the resolution as you make the dimensions smaller, which obviously defeats the purpose of resizing the image. 

Full-width banner images should be 2000 pixels wide

All other images should be at least 1000 pixels wide.

3. Choose the right compression. 

The iPages image uploader has its own compression engine which is very similar to Compressor.io which compresses images on upload and so it's possible to not do any further compression before uploading your image and still have images which don't take up too much space. If you do want to shave any further kilobytes off, it's possible to optimise your images using a program such as Photoshop before uploading them to your website. It's worth noting though that the image quality lost if compressing too much may not be worth the extra small file size. We've illustrated what happens at the different stages below.

When choosing the right level of compression, you need to look to avoid edge artefacts appearing in the image which results in a pixellated image such as below. The block on the left shows the detail of an image at a high level of compression and the block on the right is the same detail still compressed but at a level where the image isn't losing too much quality. The block on the left results in a 35.8KB image and the block on the right results in a 393.26KB image. When both images are then uploaded to iPages going through the extra compression, the image on the left cannot be compressed any further and still results in a 35.8KB image where the block on the right gets further compression and the resulting image reduces to 80% of the original file size at just 80.19KB. 

The whole image is here below with the top one being the highly compressed version and you can see the difference between the two is fairly small. If this stage of extra optimising is omitted, the jpeg uploaded to iPages original size is 460KB and after uploading to iPages is also much reduced to 94.34KB so the extra compression stage results in a fairly small 14.15KB saving. If you're keen to get your site as fast as possible then you may feel it's worth it but we would recommend focussing first on making sure that all the images you upload to your website are the right dimensions.  

Be careful when compressing your images not to get visible pixels or edge artefacts.

iPages has its own compression engine so you may find it's not necessary to do any extra compression but just concentrate on getting the image sized to the dimensions as defined in point 2 above.

In Conclusion

There are documented results scattering the web on decreased bounce rates, increased conversions etc all linked to an increase in site speed. COOK documented increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% when they reduced average page load time by 850 milliseconds. There is also substantial evidence to show that the use of images increases engagement and increases conversions so it, therefore, makes sense to take the time to make sure any image you upload to your site is as small a file size as possible while maintaining image quality if you want to create the best user experience possible while maximising your site's quality and search engine ranking. We hope the above 3 notes can help our customers to achieve this. Please do get in touch if we can help further.