A Guide to Improving Web Performance with Image Optimisation

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.

  • Portable Network Graphic (PNG) file produces high-quality files but also increases the file size. 
  • JPEG file is an image saved in a compressed graphic format standardised by the Joint Photographic Experts Group (JPG). This file format is ideal for images because it is the default format for most digital cameras.
  • Graphics Interchange Format (GIF) files can hold more than one image at the same time - which are used to make simple animations.

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: 

  • Lossy compression: decreases file size by deleting redundant data. This type of compression reduces the image file size but decreases the quality of the image. Once a file has been compressed, the deleted data cannot be recovered.
  • Lossless compression: favours quality over file size. This method preserves image quality, allowing you to later recover the file if needed. This technique, however, cannot be used to considerably reduce the file size.

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.

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:

  • Keep it short and use descriptive language.
  • Add alt text to all non-decorative images 
  • Ensure that the alt text for linked photos describes the action that will occur when the visitor clicks the link.
  • Consider whether the page would be equally understandable if the images were to be replaced with their alt text.


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!

Get in touch with us!

To view or add a comment, sign in

Insights from the community

Others also viewed

Explore topics