Today I’m going to show you how to compress images for WordPress posts, reduce the overall size and save bandwidth, leaving a faster browser experience for your visitors. And perhaps give you a boost in terms of search engines.
Before I do, I’d like to say thanks to Allison Bowlus
I recently connected with Allison Bowlus on Twitter, Twitter is my go-to place for sources of information, awesome plugins, themes and advice.
If you’re on Twitter, I’d strongly suggest connecting with me, as the people I follow have some fantastic tips and are very knowledgable indeed.
Anyways, I came across an article Allison wrote entitled Boost Your WordPress SEO: How To Skyrocket Your Blog Posts In Search Engines.
Intrigued, I dived in.
Compress your images; it’s a quick win.
Before I start telling you about Squoosh, I cannot tell you how important it is to serve compressed images on your blog/website.
Page speed is a massive factor for search engines, why in the hell would Google (other search engines are available) show your site to users, if your page speed is junk? It doesn’t make sense.
Search engines want content that is valuable to users, but they also want to highlight fast loading sites for better user experience. Not slow ones.
If you spend hours over your content and intersperse it with quality imagery and those images are HUGE, then your efforts will have been in vain.
Do yourself a favour and compress blog post images.
You don’t need a WordPress plugin to compress images.
Sure there are lots of image compression plugins for WordPress, some better than others.
Yes. Free. Online and free.
Did I mention it’s free? So no plugin needed to add to your burgeoning collection of installed plugins, no tokens required to process images, paid for subscriptions, yadda, yadda.
Compress your images online with Squoosh
I’ve just literally taken a screenshot of the homepage of Squoosh using Awesome Screenshot (it’s a Google Chrome extension), as part of the test I thought I’d run the screenshot through Squoosh, to see what I end up with.
The original image was 178KB, ran it through Squoosh and opted for a WebP image format. It’s ended up at 53.1KB = 71% smaller.
WordPress doesn’t allow you to upload WebP images for security reasons, but I did a quick search, and yes, there’s a plugin for that.
If you’d like to find out more about WebP, then take a look here for an explanation.
Not a fan of WebP, don’t like the idea of it? Let’s try another test. Heading on over to Unsplash, I’ve picked a rather stunning picture to demonstrate Squoosh’s abilities. This particular picture is by Mitya Ivanov.
The image weighs in at 2.56MB, which anyone will tell you is a big one and not really suitable to place into a blog post or wesbite. The size of the image in terms of pixels is 3840 pixels in width and 5120 pixels in height, so it’s an absolute beast of a picture.
Testing Squoosh’s image compression with a monster image
So you want to create a JPEG for your website instead? No problem Squoosh lets you do just that. Using the same image and reducing the overall size of it to width 450 pixels and a height of 650 pixels (so it’s more in keeping with a blog image) we end up with:
The above weighs in at 88 Kb, sure resizing it will reduce the overall weight of the image, but to get it down to 88 Kb from 2.56MB and still have a decent picture at this specific size is incredible.
I could go on and on about this for ages. You need to play with this yourself and see what results you can achieve. Squoosh supports a wealth of different outputs for images, from WebP, MozJPEG, OptiPNG, Browser PNG, Browser JPEG and Browser WebP.
There’s also the ability to resize images (a custom set your own) or choose from presets.
In truth, there are a bunch of settings I don’t even know what they’d do! With some tinkering, you can play around, and with the slider option, you can see results as they happen in the browser. Slide across from the original image to your compressed one for visible results.
It’s great for those who don’t have access to the likes of PhotoShop .etc, and those on a budget looking to compress images to speed up their website load time.
I recommend trying it out and seeing how much you can compress and save with your images. The code for Squoosh is on Github should you wish to clone it and build your own here: https://github.com/GoogleChromeLabs/squoosh/
Why not take Squoosh for a spin, have a play around and see what savings you can make.
P.s. The featured image on this post was 117 Kb, using Squoosh, it’s 58 Kb. Nice.