Images are the most common file type on the Internet. In fact, HTTP Archive’s State of Images research estimates they account for, on average, approximately 45% of the total page weight of websites.
That’s why optimising your images is one of the most important things you can do to make your website more efficient, and it’s why it forms a core element of sustainable web design. Thankfully, there are lots of ways you can do this, whether you are a web developer, a designer or the person responsible for uploading blog posts to your small business website.
In this guide, we’ll explain how you can use images more efficiently on your website to make your website more environmentally friendly.
Table of contents
Making a website more energy efficient is often seen as a web development task, but the design and content of a page also play a role – the more assets on a page, the more energy it will require.
By being conscious in your design choices and limiting the number of images being used on each page, you can reduce the time and energy required to load it. So consider, do you really need 10 images to illustrate a certain article, or can you convey the same message in five or less?
How you present your images also matters. For example, you should consider:
- Layout: A screen-spanning banner image sitting behind text content will require a larger file than a half-size image sitting next to the text.
- Style: Illustrated graphics can be saved in more optimised (and energy-efficient) formats than raster images like photographs.
Choosing the right image format
The file format of an image affects not only its quality but also its file size. As a general rule, you should use:
- .jpg for photography
- .png for anything with a transparent background
- .svg for illustrated graphics such as icons (we’ll go into SVGs in more detail later)
- .gif for animations (but note that these will be large files and therefore not recommended for a low-carbon web design)
Choosing the best file format for each image is important for a few reasons. For example, saving a photograph as a png rather than a jpg will result in a much larger file size, despite it not looking any different. This larger file will mean the image takes longer to load in, and this can negatively impact everything from page load speed and user experience to the amount of carbon being generated per web page visit.
Correctly sizing your images
To minimise the file size of your images, it’s important to add at them to your web page at the dimensions they are to be used at, and not any bigger.
For example, the maximum width of the content area of this article is 960px, so any images we upload needn’t be any wider than that.
To make sure you’re using images at the right size on your website, it’s a good idea to crop or resize them before you upload them, ideally using some graphics software. We use Adobe Photoshop, but there are plenty of really good free online image resizer tools, too.
For WordPress website owners, you have the ability to choose the size of your image when you add it to your page: simply choose whether you want it to be thumbnail, medium, large or full-size.
Compressing your images
You can greatly reduce the file size of your images by compressing them. Most compression tools these days use lossless compression, which shrinks the image files without affecting the quality of the image (i.e. making it blurry).
Ideally, you should compress your images before you upload them to your website, using software like Adobe Photoshop or a free online tool such as TinyPNG.
Converting images to webp
WebP is a modern image format developed by Google that creates images that are the same quality but approximately 25% smaller than standard jpg and png images.
If your website uses WordPress, you can install the EWWW Image Optimizer plugin to automatically convert your theme images and uploaded media library into WebP format.
As an aside, we’ve found that jpgs convert more effectively to the WebP format than pngs on transparent backgrounds, so this might be worth considering.
Native Lazy loading
Lazy loading is one of the greatest (and most easy to implement) modern methods for reducing page load speed. A lazy loaded image file will only load in as someone scrolls down to it, so there is no unnecessary loading if a visitor doesn’t read that far down the page.
Applying lazy loading to an image is as easy as adding a loading attribute to the img tag:
<img src="tree.jpg" loading="lazy"/>
For content managed images, WordPress websites automatically add lazy loading to images added via the Gutenberg editor.
Because of the intent behind lazy loading, it generally makes sense to apply it to all images that aren’t immediately visible in the viewport at the top of the page.
In fact, applying lazy loading to an image in the initial viewport can actually slow your website down, because lazy loaded images are deferred, meaning they load in after all the other assets on the page. Probably not what you intended to do!
It’s also worth noting that lazy loading works with horizontal scrolling, too.
Responsive images using srcset
srcset (pronounced “source set”) is another brilliant innovation in modern HTML coding which means a different size of image loads in depending on the width of the browser window being used to view it.
Using srcset, a web page will display a small version of an image when it’s viewed on a phone and a bigger one when it’s viewed on a laptop (meaning the site will have a smaller carbon footprint when viewed on mobile).
Like lazy loading, srcset is an attribute that can be applied to an img tag.
srcset="tree-small.jpg 480w, tree-large.jpg 800w"
sizes="(max-width: 600px) 480px,
In this example, the imager will display tree-small.jpg on screens under 600px wide and tree-large.jpg on larger screens. Older browsers that don’t understand srcset will default to the image specified by the standard src value.
You’ll be pleased to know that any images uploaded via a content management system like WordPress or SquareSpace will automatically be made responsive.
Learn more about srcset at MDN Responsive Images
Using SVGs instead of raster images
An SVG (short for Scalable Vector Graphic) is an image file that uses code rather than pixels.
Because of this, SVGs can be blown up as big as you like without ever either increasing the file size or losing quality.
What’s even more interesting is that SVGs can be embedded directly into your website’s HTML code instead of via an img tag – which means they can be manipulated or even animated with CSS.
As an example, if you look at our website footer, the hill shape, tree illustration and even the logo are all embedded SVGs, which are then coloured via the stylesheet. Pretty clever stuff!
SVGs can be further compressed using a tool like SVGOMG.
More image tips
The above tips will all help reduce the size of your images and thereby your website’s environmental impact. But there are some more general tips that will help you get into good practices with your website images.
- Always add alt text to any content images so they can be read by screen readers and other assistive technologies. Also note that alt text will always be accessible on a page, even if the image uses lazy loading.
- Setting the width and height on all img tags will avoid layout shift while the file loads in.
- A high-quality, sustainable web hosting package will apply additional caching and compression techniques to your images so they load in even faster.
- If your website is regularly visited by an international audience, you might wish to consider using a Content Delivery Network (CDN).
Optimising your image files is a key part of reducing the environmental impact of your website.
In this article, we have looked at how you can:
- Design your page layout to considerately limit the number of images being used.
- Save your images in the appropriate file format and at the right width and height.
- Compress your image files before you use them on your website.
- Convert your raster images to webp to make even bigger size savings.
- Use SVGs for illustrated icons and graphics.
- Apply lazy loading.
- Use srcset to load in images that are sized appropriately according to screen width.