Image optimisation is an essential practice that web developers and web designers must perform to increase their website performance. Image optimisation for websites can be done in many different ways, all of which contribute to increasing your websites page speed, bettering your user’s experience, enhancing your SEO and, ultimately, getting more website conversions.
You can be in Google’s good books by simply reducing your website’s image file sizes which improves your website’s performance. However, it is important to note, that by simply reducing the quality too much, to the extent that your images are no longer of good enough quality to have a positive effect, can be costly on your websites user interface (UI), therefore, it is important to find a balance between smaller image files and high-quality images. Additionally, we will discuss how you can best display your images on your web page and the best ways to store them and show them as your users experience your website.
But, firstly, what does it actually mean to optimise your website’s images?
What does it mean to optimise your website’s images?
Simply, optimising the images on your website means to reduce their file sizes enough so that they load fast and do not slow down your website. Another definition of image optimisation can be in the delivery of your website’s images. There are specific methods in which you can efficiently display your web images that can enhance your website’s performance. Keeping a high performing website for your users, that also pleases Google and aids to your SEO, is the overall goal for image optimisation. The methods of image optimisation can be anything from:
- Correct image file formats,
- Image compression,
- Resizing website images,
- Image optimisation plugins (WordPress websites),
- Using CDNs,
- Lazy-loading website images.
What is the importance of optimising images for the web?
Before we look at how to optimise your website’s images, it is vital to understand the importance of image optimisation. We’ve briefly touched on a couple of reasons, such as for SEO and for your website’s UX, however, these following 4 points further discuss the importance of optimising your images for the web.
1. Images weigh down your website
On estimate, images account for around 653kb of weight per webpage, this equates to an estimate of 21% of your webpage. Therefore, it is evident that your website’s images weigh, collectively, quite a lot, therefore, if you are able to reduce this factor, then you can enhance your website’s performance.
2. Website Speed Performance
Heavy images are usually a key factor in slowing down websites. Whether it is large file sizes, wrongly sizes images or slow loading images, they are typically the main reason into reducing your website’s performance and leads to a worse user experience, which, reduces your SEO.
3. Bad UX
By having a slower website due to large image file sizes, you will subject yourself to having a bad user experience. If your user experience is bad, then your website will produce higher bounce rates, less traffic and, ultimately, fewer conversions. Website users do not want to wait too long before each webpage loads, therefore, by optimising your images, you increase your website’s UX.
4. Easy to Optimise
Basically, it is important to optimise the images on your website because, well, it is easy. Moreover, not only is it easy, but there are many ways in which you can optimise your images for a better overall website performance. There is no reason not to efficiently optimise your images due to how easy it is and how many ways in which you can optimise them. Read below for 5 easy tips on how to optimise your images for your website.
How to Optimise your Image for the Web?
1. Image Formatting
Simply by choosing the right image format, your images will be better suited for their purpose. There are several image formats to choose from that each serves a specific purpose:
a) JPEG
JPEG images are one of the most common image formats and use lossy and lossless optimisation. This allows you to find the right balance between image quality and image file size. JPEG images are best to use for larger images and images that do not have to have the most amazing quality.
b) PNG
A PNG image is usually the other format most people use and can produce high-quality images, but at the cost of higher file sizes. Traditionally created as a lossless image format.
c) GIF
GIFs are less common image file however are the go-to for animated images. They are smaller in file size as GIFs only use 256 colours and they only use lossless compression.
d) WebP
WebP image formats are a relatively new form and part of the next-gen image formats. There are three next-gen image file formats, WebP, JPEG XR and JPEG 2000. The WebP file type can produce the best quality image at the smallest file size, however, there is a catch. The next-gen image files are not compatible across all browsers.
Personally, we would recommend using WebP images as they are compatible across Chrome, Firefox and Microsoft Edge, and for popular browsers that do not support WebP, such as Safari, you can set a fallback image file type that will replace the WebP when needed.
Image Optimisation Resources
There are many different types of image optimisation software and tools you can use for free and paid (for more functionality). We personally use Adobe Photoshop, due to the amount of functionality and control it provides, however, for something such as image compression, you can use a variety of other tools that can do the job. Some image optimisation tools are as follows:
Resizing Images to Scale
Depending on how your website is built, you may need to upload your images to the exact scale of which they are destined to be displayed as opposed to resizing them in your Cascading Stylesheet (CSS). However, if you are using a CMS such as WordPress, then this is handled by the content management system. WordPress automatically creates several sizes of each image and by using the attribute ‘srcset’ browsers can choose to download the most appropriately sized image.
However, if your website is custom-built, it is important to upload images to the scale of which you want them to show and it would also be best practice to upload multiple file sizes to show across different screen sizes (handled by media queries).
WordPress Plugins
If you’re using WordPress for your website, then you are able to install many different plugins that can optimise your images in a number of ways. Image optimisation plugins on WordPress can give you more control on image resizing, they can compress images and reduce file sizes, some advanced plugins offer next-gen formatting conversions (they also set a fallback for non-compatible browsers).
Some popular WordPress plugins for image optimisation are:
Host Website Images on a CDN
Using a Content Delivery Network (CDN) for your image assets (and other website assets) can dramatically increase your website speed and optimise the delivery of your website’s images. Using a CDN for image optimisations is usually a last-case scenario or if you have the money to invest because it is a one-size fit all solution for your website. A lot of CDNs can automatically select the most efficient image format, convert to next-gen formats, automatically adjust image quality and deliver responsive image sizes all while increasing the speed and performance of your website by offloading the weight of your images on your webpages (Approximately 21% of weight per webpage). According to Google, if you decrease your mobile site load times by as little as 1/10th of a second, conversion rates can improve by 8.4% (for retail websites) and up to 10.1% (for travel websites). Some good image CDNs are:
Lazy Loading Images
Lazy loading your website’s images is another method that improves the delivery of your website’s images and, therefore, speeds up your website, increases your website’s performance and improves your website’s UX. Lazy loading is the process of showing images according to what your user sees. For example, your user, who is using an iPhone, loads your webpage, there is no point loading images that are at the bottom of the page, that the user can not yet see, therefore images are loaded according to the user’s position on your webpage.
Lazy loading images is a particularly good way to speed up your website and can be especially effective on mobile, where the device screen is much smaller than a desktop. If your website is custom-built, then you can install a lazy load script and follow a certain (detailed) schema that shows how you can lazy load images on your website. See here for access to a lazy load script.
Alternatively, if you are using WordPress, there are many plugins, even image optimisation plugins, that can handle lazy loading. Some plugins we believe are good to use are the following:
Image Optimisation – Concluding Thoughts
To conclude, image optimisation is a highly effective method to enhance your website’s performance, to increase your SEO and to, importantly, gain more conversions. When talking about website performance or website speed optimisation, optimising of images is always one of the most talked-about and easy-to-do methods for this.
This article outlines the importance of image optimisation and a series of methods to support your website by making your images more efficient. It is important to note that image optimisation for the web can be done in various steps, you can optimise the images directly (e.g. by compressing, reformatting or resizing them) and you can also optimise how your images are stored and delivered (e.g. using lazy loading or hosting web image assets on a CDN).
