How to optimise images in WordPress

This article started as a note or my LinkedIn post and idea is to review and add more information every time our agency got optimisation request from the client or every time we find out something new.

Everybody thinks that he knows how to optimize images, because he’s using some plugin, but do they?

So, there are lots of devs on my LinkedIn feed and SEO experts claiming speed is important and one of key things is to optimize images. They are 100% right, but what exactly does it mean, and why your plugin won’t solve the problem? No-code guys can even stop trying to do the job. Low-code guys – will need to write some code, i guess and to speed up the process, we’ll all be spending money on API keys to some services or we’ll be stuck with free limits.

So here’s quick plan how to optimize images:

1. Select the correct format of JPEG/PNG ( WEBP/AVIF we’ll talk later)
2. Compress image
3. Register the image size in WordPress or whatever system you need
4. Use correct size of image version in each template/page
5. use responsive images
6. Use plugin to convert these images to webp/avif format 
7. SYNC preloading correct image size with actual image output for LCP element
8. Lazy-load image, if it’s not LCP

How to select correct format for images?

Well, that’s easy. JPEG in most cases smaller than PNG, except situations when image has couple of colors, like logo – then PNG will be smaller.

If the image has any transparency, should it be PNG ( or WEBP, AVIF )

How to compress image?

This step is required to remove all unnecessary data from the image and find the optimal size to quality ratio. This is what most agencies know how to do, but it’s not enough. There 2 ways to compress images in WordPress:

1. Manual ( compress in service before uploading image into wordpress media library
2. Automatic ( using a plugin ), so you drop the image in the correct format from the previous step, and the plugin uploads a minified version. If you do with this step I’d recommend so pick higher quality so an average image will have less issues when client is going to upload his images ( that’s when most of complains starts)

What are image sizes and how to use them in wordpress?

That’s a great and underused feature in wp community. When a client or developer drops an image in the wordpress media library – the cms is creating at least 5 images ( thumbnails ) that could be used in different places on the website

ex: You have build them a testimonials section with a small circle image of person, who left a review.

When the client is going to drop 2560 x 2560 high resolution image that weighs like 2mb – it will be outputted on the page and drain a lot of resources. In order to prevent this, the developer should use “thumbnail” or “custom-whatever-size” he has registered. Because the dev will probably optimise thing and upload image from Figma which is small and light weight, but client won’t do all of that manually.

By using this function for other sections with combination of picture tag or srcset attribute in images – mobile users are going to download significantly smaller version of the same image, than the desktop users.

This could be a good boost to mobile performance

How to user correct size of image version in each template/page ?

Developers are supposed to select the correct image size when they build wordpress website with ACF plugin in the code output.

If you’re using Full site editor experience from Gutenberg there is an option to select image/thumbnail size.

If you’re using any page builder there is an option to select image/thumbnail size as well.

I highly recommend never using “Full”, especially for developers. This simple action will prevent clients from reaching out and complaining that website stopped loading fast, when they uploaded 10mb image 🙂

How to use responsive images?

Using the tag “picture” or “srcset” attribute in code by the developer ensures that images are responsive. Meaning different files are loaded for different screens. In custom themes this is developer’s responsibility to ensure this is working. If you’re using page builders – it’s should be part of their output as well.

To test if different images are loaded – please open network tab in Chrome ( or other browser) dev tools, find the image on desktop and then switch to mobile view and see if extra image appeared. Now if you’ll just refresh the page you should see extra image but no desktop image and if quit the mobile mode into full screen mode – you’ll see 2 images again. Meaning for different users different images are loading.

Also, check out the size difference between them.

How to convert images into webp with plugin? 

Long story short, when we used the JPEG/PNG images in step 1 it means that all browsers, even very old ones, will have no issues outputting these images. Now, using plugins like compressX or WebP converter for Media we’ll be able to convert images into WEBP/AVIF mode and using redirect rules you’ll see .jpeg file type, but if check network – it will be a webp/avif

So users whose browser does not support WebP/AVIF will show the original png/JPEG. Others – their minified webp/avif version.

How to preload the LCP image?

When you did all the items above, you still going to struggle with LCP image. It’s because most of devs and agency managers does not understand the flow how browser works.

For user, the image sometimes is the biggest and most important element on the page, when it’s loaded and visible for the user = Largest Contentful Paint event in page speed insights.

By default this image will be loaded after all elements:

• Fonts,
• CSS files
• Render blocking JS

So your dev’s task is to point to browser to load some images before all of that by specifying fetchpriority attribute as “high” and also making sure the LCP image is not lazyloaded

How to Lazy-load images

This step everybody knows – just lazy load images, but exclude top images on the page. Using plugins is great – just exclude logo and 1-2 above the fold images and you’ll be good.

I really like plugins like LiteSpeed Cache and WP Rocket for this job.

In the code some “skip-lazy” attributes or classes will work with them, so some images will be loaded faster

Common mistakes agencies do when optimising images

1. Your devs are doing more work than client will do, so ensure just dropping new unoptimised image will still work
2. Don’t skip steps in this guide, unless you know what you’re doing
3. Make the brief for devs or part of starter theme with examples how you want images to be optimised
4. Fetchpriority rule does not support different images for mobile and desktop by the time I am writing this article.
5. Make sure client understands what he should be doing with images when his SEO team, content team etc. starts working on the website