Optimizing WordPress Images – Faster Loading – Improved Performance

Optimizing WordPress images is super important for faster loading and increased performance. Images play a big part in any website, which is why it’s essential to pay special attention to streamlining your image optimization strategy.

There’s always new methods when it comes to image optimization, but the overall concept remains the same: deliver the correct image size and quality for the client device.

We can do this by sending less bytes down the wire, but more importantly we can help the browser do its job properly by sending it the correct information.

The image specifications are the drawings and the browser is the architect.

Instead of Googling all the old tips – I spent time testing the most popular methods and you’ll be surprised at the results. In fact, I nearly paid $70 for Smush Pro, but now use a free solution that blows it out of the water.

We can go over what I found after running eight blog posts on my image optimization test site. Each test post had twenty images of varying sizes.

Four tests were medium quality and the other four used high quality images.

The editing tools that I used to optimize the images before benchmarking were as follows.

1. Photoshop images – the world’s most famous image editing software.
2. Compressor.io. – a free online tool that’s not so famous, but unbelievably useful.
3. Smush – probably the most popular WordPress image optimization plugin.
4. ReSmush.it – think of this one as WP Smush’s little brother, with a few nice features.

Although I did try a few other popular plugins, like EWWW and ShortPixel, you can’t run the lossy compression unless you either use the paid option or have access to your own server.

Smush Pro has a trial period – that I signed up for and then immediately cancelled out of disappointment.

First of all let’s have a quick history lesson to put you in the picture.

1. Image Optimization: Lossy or Lossless?

When it comes to image optimization, regardless of the actual image format, there are two main options at your disposal. They are lossy compression and lossless compression.

JPEGOptim does lossy and lossless compression for JPEGs.

PNGQuant is also a lossy compression algorithm for PNGs.

These two algorithms do what they say on the tin. You can decide between lossy for smallest file size, but lower quality or opt for the slightly larger file size and perfect image reconstruction of lossless.

In reality it’s down to personal choice, but the marketing gurus want you to believe otherwise.

All compression algorithms and image formats, such as JPEG and PNG are created in the lab by scientists. These things take immense brain power and are not easy to create, even for seasoned computer professionals.

We’re talking high-level stuff that’s best left to the boffins.

Once the scientists do their job and the knowledge drops down a few levels, the code hits the streets. Then the marketing companies rebrand it and sell it on.

What they don’t tell you is that all these different plugins are essentailly using the same optimization engine underneath the hood.

There may be two or three main versions, which then get tweaked slightly, if at all.

Software companies will do their best to scare you into buying the premium version, when in reality it’s not any more advanced than the freebie.

The biggest difference is in their tactics: you can have lossless for free, but lossy you’ll have to pay for.

2. WordPress Image Optimization Plugins

Like many folks, I was thinking I was doing the right thing resizing images in Photoshop and then uploading to Smush, but because they’re both Lossless it didn’t even do anything extra. Photoshop had already done the same job as Smush; lossless images are compressed at a similar level by most plugins.

So I was wasting my time. Photoshop or Smush would do the exact same job.

Not picking on Smush here, as it’s what I used for several years, simply because I thought that’s what WordPress users do. Then I realised that I’d been mislead all along.

Serving images without a plugin is like going to church and not praying. It’s a good job I’m not religious then!

It was only when I switched to Photoshop and Compressor.io that my benchmark scores improved, as well as a significant saving to the image sizes.

Even though I was saving my images as progressive JPEGs, GT Metrix would still mark me down for my images. Signing up to Smush Pro didn’t help either, because of all the cookie warnings and adding an extra image CDN in the mix.

By optimizing my images and hosting them on my own CDN – either Cloudflare or Stackpath – it enabled me to get perfect results with over 100 images.

My findings prove that you shouldn’t just listen to everything you hear. Carry out your own tests and see what results work for you.

The paid version of Smush – Smush Pro is running the exact same algorithm as Compressor.io that I now use on all my WordPress images. Only difference is that Compressor.io is FREE.

Fair enough, I have to upload each image, but here’s my process.

• Resize images in Photoshop – or free online alternative – export at high quality.
• Rinse images through Compressor.io – leave on lossy setting.
• Upload to WordPress – job done.
• WordPress should automatically add the image sizes for you.

Every new blog post has a fresh image folder with three versions of each image used. This is handy for future reference.

1. Original image.
2. Resized image.
3. Compressor.io image.

Inside the main folder I have another folder called Lossy, specifically for the Compressor.io images. This definitely helps avoid confusion when you’ve got hundreds of images that all look similar.

3. The Fastest Image CDN

When I first started this site, I wrote a long post about the fastest WordPress setup. This was when I did my initial image testing and came to the conclusion that Compressor.io is king.

Although this was when I first switched over from Smush, it was the eight blog posts that gave me a deeper understanding of where I was going wrong.

Why do I rate the Compressor.io so highly? Several reasons, but it’s versatility is key.

You don’t get stuck with a CDN that the plugin author likes to use. Instead you can use a free alternative that’s genuinely world class for security and speed. Yep, you’ve guessed I’m talking about Cloudflare.

If you don’t use Cloudflare you’re missing out – check out our Cloudflare setup guide for the full beans.

Using the same CDN for your content and images is the best solution. Why would you want to go to two shops when you can use the same one? I’m speaking literally, but referring to speed.

Starting an extra network call is always slower because optimization 101 is reduce network requests.

It’s true that Smush and Resmush.it only use a CDN on the premium version, but it’s their premium versions that Compressor.io and its lossy compression is competing against.

Plugin authors have to earn a living. They usually do this by giving something away – to get noticed – then sell you an alternative option. More often than not, the better option isn’t always what it’s cracked up to be. It’s just people buy it because they think it’s easier or they fear missing out.

Well let me tell you you’re not missing out on anything.

It’s been about four months since I started this site and a few things have changed. For one, I’ve implemented lazy loading via Autoptimize; this has enabled all the image options to score 100/100  on GT Metrix, but without it on a long blog post only Compressor.io got the perfect score.

If your blog posts only use a couple of images, it’s not even a hassle to use. Heck, I had a hundred images on my first blog post via Smush. Then I had to replace each one with a lossy version – it was a nightmare, but perfection doesn’t come easy. 🙂

So the fastest image CDN isn’t even an image CDN at all – it’s just Cloudflare or Stackpath or whatever else you may be using. Image CDNs do have their use if you’re a massive company, but for normal people you don’t even need one.

4. Compressor.io Optimization King

Seen as though it was a while since I moved over to Compressor.io and carried out my tests, you’ll have to forgive me for not having absolute screenshot proof.

My intial testing was mainly for personal use, but the blog posts are still up at parallaxsite.com.

That said, if you’ve been to this blog before, you’re probably sick of the sight of waterfall charts. Not forgetting, it goes without saying, that if something wasn’t the absolute best option I wouldn’t be using it. There’s plenty of results on the about page you can check out.

If you need one shot that proves everything it’s this one. GT Metrix allows lazy loading, but Pingdom disables lazy loading, which shows the full blog post. This is likely due to JavaScript being disabled.

You can see that the the page size is 3.4 MB in total and there’s about 110 images at this point. If that isn’t concrete proof that Compressor.io is the best, I don’t know what is?

5. WordPress Image Optimization Process

Although we’re specifically talking about WordPress image optimization. This process can be used for all website images, but there are automated build processes like Gulp and Grunt that developers use to optimize images in a few clicks.

5.1. Create Your Image or Screenshot

Most blog posts will have a featured image, either a photograph or digital image like I’m using on this site. I make mine on Canva, which is another amazing tool that’s free to use.

Alternatively you can grab a screenshot or find a free image online at Pexels, Unsplash or Pixabay.

The golden rule is to use JPEG for screenshots and regular images.

PNGs are best for opaque – clear – backgrounds and simple blocky colors. For example, this post’s featured image is only 28 KB at 1200 x 675 px. My little trick to get it that low straight out of Photoshop is to use 8-bit PNG rather than 24-bit PNG. It won’t be suitable for everyone. It’s spot on for simple colours, but less so for gradients.

My featured images on here are the only images that I don’t actually run through the online compression tool, as it doesn’t seem to work very well with the already super optimized 8-bit images.

The reason that I’m using 1200 x 675 size is because AMP sites demand that size; it’s for future-proofing my blog for an AMP conversion in the near future.

My regular images are all 800 pixels wide and whatever height, but you will need to match your images to your own site’s best look and feel.

300 pixels wide is a good choice for the sidebar.

5.2. Crop and Resize Image in Photoshop

Resize your image in Photoshop or equivalent. There’s loads of online options, such as Pic Resize.

My standard Photoshop image export settings are as follows:

1. Select progressive JPEG.
2. Image quality set to high.
3. Ratio 16:9 – 800×450 – 1200×675 (all the same ratio).
4. For PNGs use 8-bit for flat colors if possible.

Acceptable image quality is always going to be personal choice. Even a performance oriented blog like this one still has limits of what’s acceptable. Nobody wants to look at blocky pixelated images, but a slight imperfection here and there isn’t going to concern anybody, as long as the content is up to snuff.

5.3. Upload Image to Compressor.io

You’ll first be greeted by the chameleon sat on a branch; just click TRY IT! and you’ll then be shown the screen below.

Personally I leave the settings on lossy, as that’s the reason we’re using this tool. Otherwise you could just use Photoshop or a plugin. Definitely not both like I was wasting my time doing previously.

Select file and then you’re good to go. It couldn’t be any easier or cheaper.

I’m not against anyone paying for plugins that they need, but it goes against my code to pay for products that have alternatives available free of charge and in most cases are actually better.

Using this method helps reduce the plugin and folder count on your WordPress site. If you’re on shared hosting, node count can creep up quickly. Reducing files and folders is the best way to recover lost inodes.

Taking the above into account, this method doesn’t just optimize your images – it clears up your database for code that you really need.

You could literally have thousands of image files in WordPress and duplicates in a plugin folder.

Just to clarify, you can optimize PNGs with Compressor.io, but I didn’t on this occasion due to it being 8-bit. That’s why it isn’t showing a before and after file size. I only uploaded it as an example.

5.4. Download Your Compressed Image

Once your image is crushed like a fresh orange by Compressor.io, all you have to do is press the pinky orange button that says DOWNLOAD YOUR FILE.

Easy squeezy, eh?

Then it’s simply a case of putting it in your Lossy folder and renaming it. Actually you just have to delete compressor from the name.

After that it’s merely a case of uploading to your WordPress image gallery. Don’t forget to follow best practices for images like adding descriptive ALT text.

6. Should I use WebP Image Format?

Should I use WebP? Brian Dean at Backlinko has done an excellent survey on page speed. Brian states that responsive images appear to be more effective than lazy loading and use of WebP images.

When I implement lazyloading through Autoptimize, it only loads 8 images instead of 100. Also responsive and lazy loading are two stategies that are meant to be used together. Not to compete against one another.

There’s some interesting facts in this mammoth blog post. However, don’t just jump to conclusions. This survey’s results are averaged from millions of sites so in reality it’s absolutely no use at all. What matters to each and every one of us is how OUR SITE PERFORMS, not the next man’s.

WordPress scores low on speed. Nothing new, eh? Well anything as popular as WordPress has lots of beginners who don’t know how to run it optimally.

WebP seems to score lowly, too. I’m taking a calculated guess here, but I think that might be primarily to do with the way WebP is implemented by the image CDNs. The images are converted on the fly. It’s surely going to be faster if your site has only one image standard to deal with rather than two.

Personally I’m a big Google fan and love it when they improve on time-tested software. However, WebP isn’t compatible with Apple so that leaves a huge chunk of the Internet out of bounds. For that reason alone I don’t feel that WebP is ready for the masses just yet.

So for now, don’t worry about WebP, it only saves a few bytes in the file size. Other than that you aren’t missing out. You can easily improve your site speed and benchmark scores relying on traditional compression formats like JPEG and PNG.

You can check out the full compatibility of WebP at Can I use WebP.

7. Optimizing WordPress Images Summary

What we’ve learned and how it can help you.

• Compressor.io is a super easy to use and awesomely useful free online tool.
• For image optimization WordPress plugins aren’t mandatory – in fact they are a hindrance!
• Compressor.io reduces plugin, image and database clutter.
• Added bonus is more available inodes on your hosting account.
• Sometimes common knowledge isn’t always the best option.

Taking the above into consideration, with a few other tweaks you can easily get results like this.

So don’t be a sheep like I was. Give Compressor.io a whirl and see how it can improve your results. You’ve got nothing to lose and everything to gain. If you don’t like it, just go back to your usual system.

Those of you that prefer clearer instructions, rather than a mixture of history lessons, technology and waffle, will hopefully look forward to future projects. My intention is to do a deep dive into evey page speed tool, with pointers to pass every level.

Once the blog gets more established and I can see what people prefer, that’s when things should get more streamlined into a certain direction rather than jumping about somewhat.

That being said, I still hope that you found this write up useful? Let me know in the comments if you have any questions or need help with anything, it’s my pleasure to get you sorted.

What’s your own optimization strategy? Tell us about it below.