WordPress Image Optimisation: All You Need to Do

If you want to speed up your WordPress site, understanding WordPress image optimisation is essential.

By the numbers, images comprise about half of the file size of most web pages (test your site with Pingdom and scroll down to the Content size by content type section to see how your site fares!). Having a higher file size means your visitors' browsers need to download more data to display your website, which means your website takes longer to load.

If you can properly optimise the images on your site, you can shrink their file size to make your website load a lot faster, while still making sure they look great.

In this post, we'll cover everything that you need to know about image optimisation for WordPress, including some tips to help you automate your efforts so that you can get all the speed benefits without lifting a finger.

WordPress Image Optimisation 101: Key Tactics Explained

In this first section, we'll cover the different tactics that go into WordPress image optimisation, as well as a few tips for how they work. Then, in the next section, we'll share the best WordPress image optimisation plugins and some other tools to help you easily implement these tactics.

Resize Image Dimensions

How to implement:

• Use WordPress's built-in image sizes instead of "Full Size".
• Resize images before uploading.
• Use a WordPress plugin (suggestions later in this post).

One of the biggest problems many WordPress users have with image optimisation is not paying attention to the dimensions of the images that they're using.

In general, the larger the dimensions of an image, the larger its file size.

Of course, higher-resolution images also look "better". But here's the problem – when you're using an image on your website, visitors usually can't get the benefits of that higher resolution because of your website's limited display area.

Most websites only have a content area of around ~800-1,000 px. If you upload an image that's 3,000 px wide, that higher resolution is just wasted space because your site can still only display it at ~800 px.

To fix this, you should always match the dimensions of the image to the place where you're using it on your site.

One way to do this is to manually resize images' dimensions or use a plugin that does it for you (more on that later).

However, WordPress also includes a built-in tool to help you do this. Themes/plugins can set pre-configured image sizes and WordPress also includes its own defaults.

This means WordPress will automatically resize images to these sizes as you upload them. Then, you can choose the most appropriate size when inserting an image:

Instead of inserting images as Full Size, you'll almost always want to choose one of these smaller thumbnail sizes that are optimised for your specific theme. The Large option is usually a good default for using images in posts/pages.

You can customise the size of these defaults by going to Settings → Media:

You can also create your own custom image sizes using the free Easy Image Sizes plugin:

If you change/add image sizes, make sure to regenerate your thumbnails, which resizes your existing images to use those new sizes. Then, you'll be able to use them when you add images:

Compress Images (Must-Do)

How to implement:

• Compress images before uploading.
• Use a WordPress plugin.

The other must-use tactic is image compression, which lets you further shrink an image's file size without changing its dimensions. There are two types of compression:

• Lossless - a small reduction in file size with zero change in image quality.
• Lossy - a large reduction in file size with some reduction in image quality. There are different "levels" of lossy compression. In general, as you decrease the file size you'll decrease the image quality.

WordPress actually automatically compresses your images to 82% already. However, this is not high enough compression for most sites.

Most WordPress sites can use fairly aggressive lossy compression with no negative effects on user experience. You can normally achieve reductions of 30-80% without any noticeable change in image quality.

The one exception is sites where the visuals play an important role. For example, if you have a photography or graphic design portfolio, you might want to stick to lossless compression.

We'll share some plugins/tools to compress images later on.

Other Ways to Optimise Your WordPress Images

The two tactics above are absolute musts. However, there are some other strategies that you can implement for even better WordPress image optimisation.

Use Optimised Image Formats (WebP)

WebP is a modern image format that offers good quality even with high levels of compression.

In general, JPG images are best for colourful images (like a nature landscape) while PNGs are best for less colourful images (like an interface screenshot). But because WebP offers better compression than both, a popular tactic is to convert your site's JPG or PNG images into the WebP format before displaying them on your site.

As of 2021, all major browsers support WebP images. Safari was the last holdout, but Apple recently added support in late 2020 (however, anyone using MacOS 11 or earlier will not get WebP support).

Most of the plugins that we'll detail below can help you automatically convert images to WebP.

Lazy Load Images

With lazy loading, your site waits to load images that are below a visitor's visible viewport until a user starts scrolling down. Because your site is waiting to load those images, your site's initial page load times will be faster.

As of WordPress 5.5, WordPress now includes built-in support for native browser lazy loading for images, which is supported by all major web browsers except for Safari. So without lifting a finger, most of your visitors will already get the benefits of image lazy loading.

If you want to extend lazy loading support to all visitors (i.e. Safari users), you can use a plugin that supports that feature.

Serve Images from a Content Delivery Network (CDN)

A CDN helps you speed up your images' load times for global visitors by storing your images on a network of servers all around the world. Visitors can then download the images from the closest server rather than your WordPress site's server, which speeds up global load times.

You can either use a CDN for all of your site's static files, or try a plugin – some also offer special CDNs for just your images.

If you're hosting WordPress on our Onyx managed WordPress hosting, we include a built-in CDN at no extra cost.

Serve Adaptive Image Sizes

This is an advanced (and optional) tactic that's been made a lot easier thanks to some of the WordPress image optimisation plugins we'll share in the next section.

Above, you learned that it's important to resize your images' dimensions based on how you're going to use them. However, this can be tricky to do perfectly because not all of your visitors are the same.

For example, if you have one visitor browsing on a high-definition Retina screen that's 3,072 px wide and another browsing on an iPhone 6 with a screen that's 750 px wide, each visitor has different needs when it comes to image dimensions.

Serving adaptive images lets you serve different image sizes on the fly on a per-user level, which makes sure you're able to get the perfect balance of image resolution and file size for each individual visitor. It does come at an additional cost in terms of disk space usage though, due to each variant being stored as a separate file.

Automate the Work With a WordPress Image Optimisation Plugin

Now, let's get into some ways to automate WordPress image optimisation using plugins. These plugins can help you automatically implement some or all of these strategies for any images you upload to WordPress.

LiteSpeed Cache

• Auto resize image dimensions - NO
• Compress images - YES
• WebP images - YES
• Lazy load - YES
• CDN - YES
• Adaptive images - NO

If you're hosting WordPress with Krystal, the LiteSpeed Cache WordPress plugin is almost certainly your best choice, as it integrates with our caching system and includes its own image optimisation feature. This makes it super easy to optimise your images without the need for another plugin.

Note – we install the LiteSpeed Cache plugin by default if you're using our Onyx WordPress hosting.

To enable image optimisation in LiteSpeed Cache, you'll need to obtain a free QUIC.cloud API key. You can follow these instructions to request your API key. Once you have your API key, follow this guide to set up image optimisation.

ShortPixel

• Auto resize image dimensions - YES
• Compress images - YES
• WebP images - YES
• Lazy load - YES*
• CDN - YES*
• Adaptive images - YES*

ShortPixel is a popular image optimisation plugin that's free to optimise 100 images per month. Beyond that, you can purchase bulk credits starting from $9.99 for 10,000 images.

*ShortPixel also offers a separate ShortPixel Adaptive Images plugin, which you'll need to access lazy loading, the CDN and adaptive images.

Here’s a quick guide to getting started with ShortPixel.

Imagify

• Auto resize image dimensions - YES
• Compress images - YES
• WebP images - YES
• Lazy load - NO
• CDN - NO
• Adaptive images - NO

Imagify is another image optimisation plugin that shares a lot of similarities with the regular ShortPixel plugin.

The main difference is in the pricing. Imagify charges you based on the file size of the images that you compress, while ShortPixel charges you by the number of images.

Imagify is free for up to 20 MB per month. After that, paid plans start at $5 per month for up to 500 MB (approx 5,000 images).

Getting started guide.

Smush

• Auto resize image dimensions - YES
• Compress images - YES (only lossless in free version)
• WebP images - YES (requires premium)
• Lazy load - YES
• CDN - YES (requires premium)
• Adaptive images - NO

Smush is a popular free WordPress image optimisation plugin at WordPress.org. One of the reasons that it's so popular is that, even with the free version, you get unlimited image compression.

The downside is that the free version only supports lossless compression. You need the Pro version for lossy compression, WebP support, and some other features. It costs $5 per month.

Getting started guide.

Optimole

• Auto resize image dimensions - YES
• Compress images - YES
• WebP images - YES
• Lazy load - YES
• CDN - YES
• Adaptive images - YES

Optimole is a popular plugin that offers an easy way to implement adaptive images. Basically, it's an all-in-one tool to fully optimise your images with on the fly adaptive optimisations. The downside is that it's a little pricier as a result – unless your site fits in the free plan.

Optimole is free for up to 5,000 monthly visits. After that, paid plans start from $19.08/month.

Getting started guide.

Optimise Images Before You Upload Them to WordPress

If you don't want to use a plugin, you can also compress and resize images before you upload them to WordPress.

If you have access to Photoshop or another image editing program, these tools include built-in web optimisation features – here’s a guide to Photoshop's image optimisation feature.

Or, you can use cloud tools:

• BIRME – bulk image resizing.
• Kraken Web optimiser – bulk image compression using lossy or lossless algorithms.
• Squoosh – good for individual image compression.

How to Optimise WordPress Images: A Quick Recap

We've covered a lot of information in this post. Before we finish, let's quickly go over the key points from above in a checklist that you can apply to the images on your site.

You absolutely must do these two things:

1. Resize dimensions – you can use WordPress's built-in Image Size feature to access pre-set dimensions for different use cases. Or, you can resize images either before you upload them or with a plugin.
2. Compress images – most sites should use lossy compression. You can compress images before you upload them or use one of the plugins on our list.

If you want to go even further, you can consider:

• Expanding lazy loading to Safari users.
• Converting images to WebP.
• Serving your images via a CDN.
• Using an adaptive images tool such as Optimole or ShortPixel Adaptive Images.

Still have questions about WordPress image optimisation? Drop us a message in the comment section below. If you want to find out more about the personalised help that our Onyx Managed WordPress customers receive, just get in touch via Live Chat.