We live in a visual world – with images being processed around 60,000 times quicker than words by the human brain. But all of these images on the internet paint a bigger picture – they contribute to global warming and climate change. Whilst this is worrying, there is a quick fix that you can put in place to help reduce your website’s carbon footprint – use the correct image formats. Here’s everything you need to know.
Images Influence on The Environment
Image format could be as important as image size in reducing internet pollution.
While a reliable method to measure the energy consumption of web browsers when loading website elements is currently unavailable, it raises the question: do all images have the same impact on internet pollution?
Top Low Carbon Image Formats
WebP
Developed by Google, WebP has become the industry standard for high-performance and broad compatibility images. WebP file sizes are around 25% to 35% smaller than JPEGs or PNGs, which leads to a reduced carbon impact.
This format supports both space-saving “lossy” compression (removing unnecessary data while retaining good quality) and high-quality, “lossless” (original data preserved, pixel-perfect images) compression, meaning they are versatile depending on your needs.
WebP images maintain quality and support transparency – similar to PNGs – and can also support animated images – similar to GIFs.
WebP is best suited for general web use, including blog images and user interface (UI) elements.
AVIF
The AVIF (AV1 Image File Format) is recognised as the most carbon-efficient choice for photographs and complex images.
This file format uses the AV1 video codec to achieve data compression, whilst maintaining image quality. Similar to WebP format, it offers both lossy and lossless compression, meaning images are small in size but high quality.
AVIF is best suited for high-quality photographs, hero images, and images containing complex gradients.
SVG
SVG (Scalable Vector Graphics) is a text-based image format (XML) rather than pixel-based.
As the image is defined by code, it results in minimal file sizes, often measuring just a few kilobytes. However, this doesn’t mean that image resolution is not compromised. Instead, SVGs can scale indefinitely without any loss of quality, meaning they work on various screen sizes, no matter how small or big. This saves bandwidth and storage, resulting in a small footprint.
SVG is ideal for elements such as logos, icons, and straightforward illustrations.
Sustainable Strategies
To further reduce carbon emissions, implement the following best practices in conjunction with using the appropriate file formats.
Implement Lazy Loading
Adding the loading=”lazy” attribute to your images ensures that the browser only downloads images as the user scrolls down to them. You can implement this by adding the attribute to the image tag, for example:
<img src=”computer.webp” loading=”lazy”/>
Limit Colours
Limiting the colour palette of an image, often achieved through ‘dithering’, is an effective technique for reducing an image’s overall file size. By reducing the number of distinct colours used in an image, the system requires less data to describe the colour information for each pixel.
With fewer colours, the image can be encoded using fewer bits per pixel, making the image faster to download and rendering it more ‘low-carbon’ in terms of storage energy consumption.
Optimise Dimensions
Cropping and resizing images is a great way to reduce their weight, which directly translates to faster loading times and lower bandwidth consumption. By resizing the image to the exact dimensions it will be viewed at, you avoid forcing the user’s browser to perform this scaling operation, saving resources on users’ devices.
Overview
Choosing the right image format for the visuals on your website is an effective way to reduce the energy required to load your website. WebP formats are the most energy-efficient option available, compared to JPG, AVIF and PNG. We’d advise saving all of your images in this format, and you can use tools such as towebp.io to easily convert your images to the correct format.
Website Design
Ballyhoo specialises in website design that puts accessibility and usability first. In addition to our Green Hosting, websites that we build can benefit from lower emissions through innovative and clever design, following industry best practices.
