Getting your WordPress image sizes under control is important for any website.
You want your pictures to look good but not take days to load. When you collaborate with other brands you want to make sure that you do their products justice. You want to include lots of pictures but it’s no good if your readers get bored waiting for them to load.
When it comes to optimising images for the web it’s all about trade-offs. You can have a post full of pictures if you want, but you’ll need to compromise on height and width as well as quality. Or you could have 2 or 3 higher quality images instead.
Why does getting your image sizes under control matter?
99% of the time when people ask me why their websites take 3 days to load it’s because of images. Usually the dimensions are huge – I’m talking about using images that are 2000px by 4000px for a theme where the maximum image size is 600px by 1000px.
So this means that when a web page loads it has to load the full sized image only to make it smaller on screen anyway – all of which contributes to the page loading speed.
According to Neil Patel, most readers will leave a web page if it doesn’t load in under 4 seconds, and the length of time people spend on a web page is a metric that Google uses in deciding who makes the cut in it’s search results.
WordPress tries to be clever and to counteract this by making different sized copies of images when you upload a new image (unless you turn that feature off).
But what that then means is that you have a huge image uploaded to your host as well as smaller copies of it – all of which take up precious space on your host. Once teh storage on your host reaches a certain point, you’ll be asked to upgrade your hosting package and charged extra for that privilege.
Image formats – what are the options?
The two formats you’re most likely to come across are PNG and JPG.
PNG are the higher quality images and so tend to take up more storage space than a JPG of the same height and width.
This is why Canva recommends that you download as PNGs. It wants you to have the highest quality version of the graphic. Which is totally fine for print graphics, but not quite so good for the web.
You just don’t need such high quality images on your website.
I’ll be honest, I’m much more likely to read a blog post with photos that load quickly but aren’t art gallery quality, than I am when it takes half an hour to load one image on screen. I won’t have even hung around to find out how long the images take to load. Harsh but true.
Don’t forget that Google uses page speed as a metric for working out rankings in search results too. Don’t hamper your chances of ranking high for keywords by insisting that your images have to be of the highest quality if they don’t.
Unless you really need super high quality images, I’d always recommend that you use .jpg format images.
Lossy vs Lossless Compression
I’m not going to go into too much depth on compression methods, because you don’t really need to know about it in that depth.
Lossless compression, as the name suggests, compresses the file without compromising picture quality and it can also be decompressed. Lossy compression reduces the quality of the file and permanently removes data.
PNG’s are a lossless compression type and JPEG’s are lossy, which is why even when they’re both compressed PNG’s are still higher quality and therefore have bigger file sizes.
So how do you get your WordPress image sizes under control?
So I’m now going to talk through the process I use to optimise images for my websites. I’ve recorded a how-to video below, or you can follow the step-by-step guide further down the page.
I use Canva for all my graphics. I have templates set up with the maximum dimensions that I need them to be. Any graphics that I need to upload to either of my blogs is downloaded in JPG format.
Top tip – Having templates set up is a good idea to help save time making graphics. It means that all your images will be the same size and to make them all you need to do is upload new images and drag them onto the template.
Once I’ve downloaded them in the right size as a JPG I then use an online image compression site to compress my pictures. Then I download them and upload to my sites. I use Compress JPEG. You can upload up to 20 pictures at a time to be compressed and then download them all in one click, so it shouldn’t add too much time to your graphics making process.
Getting WordPress image sizes under control – the verdict
So there are a few things to consider when you need to optimise images for the web.
Firstly, not all image formats were created equal.
PNG are higher quality images than JPG but means that they have a bigger file size. The same goes for compressing pictures too.
Unless you desperately need really high quality photos in your posts I recommend that you stick to JPG and that you always compress pictures before you upload them regardless of which format you use.