47% of users expect a website to load in less than 2 seconds, while 32% will leave the website entirely if its loading time is longer than 3 seconds. Are you losing out on business as a result of poorly optimised images causing slow load times?
Well optimised images take just a matter of minutes to create, and can be the key difference between a site with superb SEO (Search Engine Optimisation) and one with poor load time and lacklustre accessibility.
Ensure your pages are loading quickly, without sacrificing design, layout or aesthetics, by following our simple guide to image optimisation. Scroll below to discover:
- Clear, simple instructions on how to optimise images.
- Useful free tools to help with image optimisation.
- The importance of images in terms of SEO.
- Guidance on image sizing and file names.
So you’ve found your image, what now?
Once you have found a copyright free image online, or better yet: taken a photo or designed your own unique graphic, you’ll need to follow these three key steps before you upload it to your website:
Finding the perfect image pixel size for your website
Make sure the dimensions of your image (width and height in pixels) are not so large that they require people to scroll across to view the whole picture, but not so small that it is unclear what the image actually is.
- Image Width. Here are some useful tips to ensure you adjust your image width to the size required on your page:
- 1800px for large, full screen images (like hero images).
- 1200px for “featured images”. If you use WordPress, there is an option to set a Featured Image. This image will be what is shown when you post a link to your page in social media. Other CMSs will have similar functionality.
- 600px for images embedded within a page.
- Image Height: The web browser might only show part of your image depending on the aspect ratio of the page in question. In these situations, to avoid an image appearing awkwardly cropped, the best thing to do is to crop it yourself to the exact same width and height.
Image File Size
As we mentioned earlier, large file sizes can slow down web pages and affect user experience (UX) and Search Engine Optimisation (SEO). Fortunately, there is an easy way of ensuring your file sizes remain small, while their visual quality remains impressively high.
You have two options when compressing an image - both of which are detailed below:
- Option one —
- Upload your image to an online tool called Squoosh. This is a free-to-use, Google-developed website that compresses images for usage on your website.
- Once you upload your image (you can drag it direct from your computer into the web browser), Squoosh works its magic and offers you a slider to view the before and after effects of the compression. Make sure there is no visible difference between the two before downloading your new, compressed image, which is often 80% smaller in file size than the original.
- Upload the downloaded version to your website.
- Option two —
- Install an app, e.g. ImageOptim for Mac users, and optimise your images locally before uploading to your website.
An example of an image being optimised using Squoosh
Image File Name
Rename the file to reflect both what the image is and also the topic of the post or page on which it’s being used. This will ensure search engine spiders determine what the image is, therefore giving your SEO a very helpful boost.
Uploading images: SEO Cheat Sheet
When uploading images to your website, there are various processes you should get into the habit of doing in order to improve your SEO and increase your chances of ranking on page 1 of the SERP (Search Engine Results Page).
These steps include:
- Adding Alt text - Alt (short of ‘alternative’) text is an important SEO ranking factor. Your image’s Alt text should describe the picture and, ideally, contain the keywords that are important to your page or post. Alt text is used for screen readers and is a critical element of making your website accessible for visitors who are visually impaired.
- Adding the Title text - while not a direct SEO ranking factor, the Title text you add to an image is important for various reasons. For example, when a visitor hovers their mouse over an image on your site, the chances are it will display the Title Text on their screen. Therefore, it’s vital that you check your title tags re grammatically correct and properly describe your images.
- Scaled images - make sure the image you are using is the same size, in pixels, as how it will be rendered on the final page. If your image is 1000 pixels wide yet only takes up a small 300 pixel wide area of the final page, we would advise reducing the original dimensions of the file to 300 pixels wide. Otherwise, you will be using a larger file, slowing down the load time, for no valid reason.
Why optimise images?
Images are the biggest culprit in slowing a web page down, but making sure they are optimised goes a long way to ensuring your website is Google friendly and ranks better in the search results.
If all of this information is a bit too much for you to process, don’t worry! We can provide training to go through this with you in more detail. Get in touch today to discover how we can help with all of your website needs.
Some useful, free tools
This is by no means an exhaustive list. If you know of any other tools or apps that we can add to this list them please drop us a line to let us know.
- Squoosh: Squoosh.app is a fantastic way to optimise your image file size. Visit the site and simply drag your image into the browser. The page is diveded into two with a before and after preview, so you can set the smallest file size without impacting the image quality on screen. It is developed by the dev’s on GoogleChromeLabs on the open source Github.
- ImageCompressor: Like Squoosh this is a web based app that is free to use and offers drag and drop functionality. There aren’t as many options as Squoosh and the interface is less intuitive, but it does allow for bulk uploads, which can be a great time saver. Another downside is that is doesn’t seem to strip meta data from images, and even embeds it’s own URL in the image.
- ImageOptim: If you’re a Mac or Linux user this is a great tool you can download to your PC. Drag images into it and they are automatically optimised. You need to be careful with presets to make sure you don’t over-do the optimisation, and it is a ‘destructive’ app, meaning that as soon as you drag your image in it is processes. It does store a copy of your original file in trash, but be careful!
- FileOptimizer (download): Windows users can have a look at FileOptimizer. We haven’t tried this but it comes recommended and might be worth a look?