Optimizing images is a surprisingly important part of speeding up your website. They can often be 60% of a page's total weight according to Google.
If you can optimize an aspect that controls 60% of your page load you'll very likely see some big gains. There are some simple things you should do & some things that even the pros forget.
Start by Optimizing File Type
I created the following image for my game Fry Thief. And I exported it into different file formats.
Which of these images do you think is the largest file? And the smallest file?
I saved all of these images from the same editing program. The left is the original, the two middle images are JPGs saved at different quality levels & the last is a PNG file.
Before we optimize anything else we really need to discuss file type. You can drastically improve speeds by saving images as the right file type and right file quality.
JPGs are great for photographs because of how they store pixel data. PNG files will almost always be bigger for photos. So if you have any real-life photography make sure to use JPG files.
When PNGs Make Sense
Here’s another example. Left is JPG and right is PNG. Before looking at the file size take a guess to see which one is bigger and by how much.
How many of you expected JPG to be the lowest again? For the exact same reason that PNGs are bad in terms of size for photographs – they’re excellent for illustrations where there are very few color changes from pixel to pixel.
What About SVGs?
You may have heard about a different image file type called SVG. SVGs use shapes, numbers, and coordinates — rather than a giant list of pixels — to render graphics. This means they’re very easy to scale and they’re very small.
Generally speaking the fewer discrete pieces of an image the more likely it will be smaller in SVG format. What I recommend is if you have a graphic editor program like Photoshop as an experiment export your logo as an SVG.
If you like creating SVGs and they're efficient for you great – keep using them. Just make sure a PNG isn't smaller.
So the first lesson is to choose the right file type depending on the type of asset you’re creating.
Optimize Image Quality
Most image editing tools have a quality setting for JPGs. And you can often export at a lower quality – say 60 or 70% and it’s not noticeable at all – or not very noticeable and it saves a ton of space.
In the example above we went from 7.1 MB to 1.2 MB at 60% quality. And it still looks great.
If we wanted to reduce this further we could reduce the size of the image. Meaning we could shrink it from 4,000 pixels to 1,000 pixels. And that would be about 634 KB which saves us about 50%. And we could shrink this even further.
Lucky for us – WordPress will automatically resize images when we upload them. So unless you want an image to be a very specific size you shouldn’t have to resize it manually.
Automatic Optimization
When I’m building a custom theme for someone I’ll export images from an image editing program. But WordPress is great because it can be used by anyone – including people that don’t have image editing programs.
We want to take the principles above and install a plugin that will automatically optimize images when any user uploads them. And there are a number of plugins & services you can use.
Compress JPEG & PNG images is created by TinyPNG. They have a free tier where you can optimize ~100 images a month.
Imagify has their own plugin which lets you optimize 20MB of images every month for free. And they have paid plans for more images.
ShortPixel has a really great image compression test that will let you enter. a URL, they'll take all of your images, compress them, and show you the possible savings. They also have a freemium plan for 100 images a month with paid plans after that.
These are just a couple of plugins & services and there are probably dozens of other examples I could have show you. What you want to make sure is that:
- They retain the original full-size image as a backup
- They automatically optimize images when they’re uploaded
- And a feature you don’t need but probably want is a new image format called WebP – this isn’t supported in all browsers yet so you don’t want that to create and upload WebP images but they are a more modern format and are about 25% smaller than PNGs & JPGs.
Images are often 25-50% of the page load. So make sure you optimize your images. Choose the right image format & configure your plugins to automatically optimize images.