A Guide to Improving Web Performance with Image Optimisation
Did you know that optimising your images before uploading them to your website can have a significant impact on the speed of your website? Which can help to ensure that your information loads quickly and is super simple to navigate. Image optimisation also entails correctly labelling your website’s images so that the search engine can discover and help to understand what they are really about.
According to the HTTP Archive, images make up on average around 21% of a webpage’s weight. Incorporating a good image optimisation workflow is one of the easy ways to ensure that your website is running optimally.
Let’s have a look at how you can optimise your images for increased web performance, without sacrificing quality.
Image Optimisation Tips To Improve Web Performance
Choose the right image file format
The most common file types for use on the web are JPEGs, PNGs, and GIFs. If your image doesn’t contain a lot of colours (such as flat illustrations or icons) or you want it to have a transparent background, we recommend exporting it as a PNG before uploading it. Also, check that you have the right image dimensions and file size. Most images on the internet are one of the three following file types: PNG, JPG or GIF.
There are several other formats, such as JPEG XR and WebP, although not all browsers support them. For images with a lot of colours, use a JPEG or JPG format, and for images with little colour, use a PNG file format.
Reduce the image file size
When a customer visits your website, depending on the size of your files, it may take some time to load the page in its entirety. Note: the higher the file size the longer it will take to load. Amazon found that if their pages slowed down by just one second, they would lose $1.6 billion a year. Customers are more likely to exit your site if they have to wait for more than 3 seconds for the webpage to load.
There are two main types of compression:
The "Save for Web" command in Adobe Photoshop is another way to reduce the size of an image file. There are various methods and levels of compression. Most image editing programmes, such as Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others, come with a built-in image compression feature.
Note: It is usually recommended to keep a page’s total weight under 1 or 2 MB. Small enough to load quickly without sacrificing the quality.
Include image Alt Text
Have you ever been surfing the web, to find images that simply wont load? Usually when this happens you may notice a piece of text in the image's place - this is known as alt text. Alt text assists search engines in crawling and ranking your website - making it more visible to potential customers.
Recommended by LinkedIn
By making sure your alt text is detailed and accurate, you are not only helping to build a more inclusive web but you are casting a much wider net for potential clients.
Here are some pointers for including alt text within your images:
Consider using cache
Caching is the process of storing image files within a user's browser cache or on a proxy server. Browser-side caching reduces application requests and the download side of each cached page. Caching images is especially beneficial if your site contains a large number of images that are shared throughout pages but remain unmodified. An image caching service pre-processes an image before caching it to optimise performance and loading speed.
Test, Test, Test
Now that we have learned how to optimise our images, the final step is to test them. This can assist you in determining what works best for your customers.
Test how many product images you should have on your category pages: 10, 20, 100? Also, test out different types of angles and points of view to figure out what your customer wants to see. Conducting surveys is a great way to find out what your customers like and want to see more of.
Conclusion
Image optimisation is a simple way to help improve your website’s performance - making it simple to use and easy to navigate. By optimising your images during the design phase, you may find more users visiting your website and interacting with the existing information.
Investing in the best practices for your brand's visual representation may ensure that visitors to your site always associate your name with excellence.
If you aren’t currently employing an image optimisation workflow, then you need to start doing so today!
Need help optimising your images? Elephant in the Boardroom is here to assist you!