WordPress image optimisation for a faster, more sustainable website

Summary

This article provides a step-by-step guide to WordPress image optimisation for a faster, more sustainable WordPress website.

As a marketer, you want your website to be as fast as possible. Optimising your WordPress website images can speed up your website, improve the experience for your website visitors and reduce your carbon footprint.

Why optimise the images on your website?

WordPress image optimisation matters because the speed at which your website pages load has a huge impact on SEO, conversion rates, your visitor’s experience and your website’s carbon footprint.

An image file uploaded into the WordPress media library and placed on a page of your website adds to the total amount of data required to load the page. This is often referred to as page weight.

Understanding website page weight

Page weight is the number of bytes of data transferred from your server to a user’s device for the page to load in their browser.

Web pages with a larger page weight will be inefficient, as they require more electricity to send the data and take longer to present the page to the user.

A range of factors influence your page weight, and typically, images are a large contributor to slow website performance.

WordPress image file formats

It is worthwhile planning the format of images to be used on your website. The WordPress media library is very flexible, so you can upload images in a variety of formats. The most popular ones are:

JPEG – typically used for photographs as they have a high colour count which can be compressed without reducing the quality.

PNG – great for digital drawings and images with transparent backgrounds. They are not recommended for photos as this results in a large file size.

GIF – not so popular nowadays, suitable for low quality images using only a few colours. Sometimes used for animated and moving images although this is not advisable as the file sizes will be very large.

SVG – the most popular format for logos, icons, and vector graphics.

WEBP – a modern image format developed by Google to help websites deliver images quickly. It is designed to be better than JPEG, PNG and GIF.

WebP image format

• Primarily designed for the Internet, it is less useful for viewing images offline.
• Some social media platforms do not support WebP.
• Older browsers, such as Edge 12-17 and Firefox 2-64, do not support WebP.
• In some cases, WebP compression can slightly degrade image quality. This is important when working with high-resolution images that must be displayed at high fidelity.

Using WebP images on your WordPress website

Starting with WordPress 5.8, it has been possible to load WebP images into your media library.

However we recommend you use a WordPress image compression plugin on your site. If many of your users have unsupported browsers, or are sharing your content on social media then they will not see your images if you upload them using the WebP format.

Popular WordPress WebP image compression plugins

WordPress image compression plugins can convert your existing images into the WebP format and display JPEG or PNG images as the fallback option on browsers that don’t yet support WebP.

SmushIT
Will optimize, resize, and compress images, as well as convert images to WebP format.

TinyPNG
This plugin automatically optimizes all your images by integrating with the popular image compression services TinyJPG and TinyPNG.

EWWW Optimizer
The plugin will automatically convert images to WebP and can insert necessary rewrite rules into your .htaccess file for serving WebP images

Imagify
This plugin automatically optimises your images by compressing them and then converting to WebP. It is free for up to 20MB per month

WebP Express
This plugin uses the WebP Convert Library and offers multiple conversion methods to ensure compatibility. It automatically converts images to WebP and serves them to supported browsers.

Image sizes in WordPress

Another important factor to consider for WordPress image optimisation is the size of your image on the page. Images that are wider or taller than needed will waste bandwidth and add to your page weight unnecessarily, as your browser will resize them to fit the width of their container.

It is important to consider how the image is being used on the page. On a large desktop monitor, you do not want your visitors to see a low-quality, pixellated banner image that has been resized larger to fit the screen!

Typical image sizes for a desktop

• Background image 1920 x 1080 pixels
• Hero image 1280 x 720 pixels
• Website banner 250 x 250 pixels
• Blog image 1200 x 630 pixels
• Logo (rectangle) 250 x 100 pixels
• Logo (square) 100 x 100 pixels
• Thumbnail image 150 x 150 pixels

You should resize your images so they’re specifically tailored to the dimensions of their container on the page. However, this is tricky when websites are responsive and can be viewed on mobile as well as desktop devices.

Responsive images in your WordPress theme using srcset

It is vital that your WordPress theme uses responsive images that adapt to the screen size of the device on which they are viewed.

To optimise your website images responsively, your theme should use a function called srcset which allows your images to scale to fit each of your visitors’ individual devices.

To use srcset to size images on a WordPress theme, you need to understand how WordPress handles responsive images and how you can customize the srcset and sizes attributes to optimize image loading based on the device’s screen size.

This is something you can ask your WordPress developer to implement on your website; they should also check the default image sizes!

Understanding srcset and sizes

1. srcset Attribute: This attribute contains a list of image URLs along with their width descriptors. It allows the browser to select the most appropriate image based on the device’s screen size and resolution. WordPress automatically generates multiple image sizes (e.g., ‘thumbnail’, ‘medium’, ‘large’) and includes them in the srcset attribute when you upload an image
2. sizes Attribute: This attribute provides information about how the image should be displayed across different screen sizes. It helps the browser decide which image from the srcset to download.
   The default sizes attribute in WordPress is set to (max-width: {{image-width}}px) 100vw, {{image-width}}px, but it can be customized to better fit your theme’s layout.

Implementing responsive images in WordPress

1. Automatic Handling by WordPress: Since version 4.4, WordPress automatically adds srcset and sizes attributes to images in post content. When using functions like the_post_thumbnail(), WordPress will include these attributes unless you specify otherwise.
2. Customizing sizes Attribute: You can customize the sizes attribute using the wp_calculate_image_sizes filter. This allows you to define how the image should behave at different breakpoints, which is essential for ensuring that the correct image size is loaded for various screen widths.
3. Using WordPress Functions: You can use functions like wp_get_attachment_image_srcset() and wp_get_attachment_image_sizes() to manually retrieve and set the srcset and sizes attributes if you want more control over the markup. This can be useful for creating custom image tags in your theme templates.

Example code

Here is an example of how you might use these functions in a WordPress theme:

<?php
if ( has_post_thumbnail() ) {
    $attachment_id = get_post_thumbnail_id();
    $img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
    $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
    $img_sizes = '(max-width: 768px) 100vw, 768px'; // Customize this based on your theme's layout

    echo '<img src="' . esc_url( $img_src ) . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '" alt="Responsive image">';
}

Registering custom image sizes

1. Add Custom Sizes: Use the add_image_size() function in your theme’s functions.php file to define custom image sizes. For example:

add_image_size('custom-size', 800, 600, true); <em>// 800px wide, 600px tall, cropped</em>

2. Regenerate Thumbnails: After adding new image sizes, regenerate thumbnails for existing images using a plugin like Regenerate Thumbnails to ensure all images have the new sizes available.

Best practices

• Define Custom Sizes: Use add_image_size() to define custom image sizes that fit your theme’s design requirements. This ensures that the srcset attribute includes the most appropriate image sizes
• Test Across Devices: Ensure that your sizes attribute accurately reflects how images should be displayed on different devices. This might require testing and adjusting the values to match your theme’s layout.

By following these steps, you can effectively use srcset and sizes attributes to improve the responsiveness and performance of the images in your WordPress theme.

Lazy loading images

Lazy loading means your images will only load when they’re about to appear in your visitors’ “viewport” in their browser. This is the section of the page that appears within the dimensions of their device’s screen as they scroll.

Using lazy loading saves the unnecessary data transmission that occurs when allowing all the images on a page to load immediately at the start of the visit, especially for longer pages like blog articles.

Within your theme

Add code snippets to enable lazy loading, such as adding the loading="lazy" attribute to image tags.

Popular WordPress Lazy Loading plugins

Here are some of the top lazy load plugins for WordPress that can help improve your website’s performance by deferring the loading of images and other media until they are needed:

a3 Lazy Load
This is one of the most downloaded lazy load plugins for WordPress. It allows you to select specific elements for lazy loading, such as images, videos and iframes.

SmushIT
Known for image optimization, Smush also includes lazy loading features. It compresses and resizes images while delaying their loading until they are needed.

Lazy Load by WP Rocket
A lightweight plugin that delays the loading of images and videos until they are visible on the screen. It is free and does not rely on any JavaScript library such as jQuery.

These plugins offer a variety of features and customization options, allowing you to choose one that best fits your website’s needs.

Using a Content Delivery Network

Your images require data to be transmitted from your server to your visitor’s browser on their device.

Many of your website visitors will be located far away from your servers physically, such as people in Australia or America calling on data that’s stored on your server in the UK.

A solution to this problem is to use a Content Delivery Network (CDN) to store all the data for your images on a secondary server located closer to international visitors. This reduces energy consumption by minimising the distance your website data has to travel, making your site more sustainable and performant for all visitors regardless of location.

You can learn all about CDNs and choosing sustainable website hosting in our guide here.

The advantage of WordPress image optimisation is a more sustainable website

The more energy-efficient your website is, the better it will perform, providing the fastest possible user experience for your visitors.

Quick test – When was the last time you tested your website for its loading times and page speed? Let us know, and we’ll tell you how you compare to the top performers in your industry.

This influences your visitor retention, bounce rates, and conversion rates, which all impact the amount of revenue your site can generate for your business.

So, focusing on WordPress image optimisation is an easy – but highly valuable – way to improve your overall marketing results:

• Accelerating page speed
• Increasing conversions
• Delivering an improved user experience
• Reducing bounce rates
• Increasing visitor retention
• Higher SEO rankings

Why not start by measuring your website’s carbon footprint?

Before you improve your WordPress image optimisation, start by measuring your carbon footprint – then you can report on the carbon footprint savings as you optimise the images on your site.

If you enjoyed this article, subscribe to our newsletter to receive regular helpful insights about digital sustainability and website performance, delivered straight to your inbox.

Back to News & Insights