WordPress modifies the images you upload to your website or blog and it can undo any optimization you have done. Here is how to optimize images the right way to boost website speed.
There are two types of people, those that optimize their images before uploading them to their website and those that don’t. Which one are you?
If you don’t optimize images, your website or blog might be slow and bloated. If you do optimize images, don’t be too smug because WordPress can undo your optimization and make your site slow and bloated.
Either way, you end up with a slow and bloated website, but of the two types of people, it is better to belong to the group that optimizes images. However, I will show how WordPress undoes your optimization and can slow down your site without you knowing it, and how to stop this.
What WordPress does to uploaded images
When an image is uploaded to your blog or website, WordPress stores it in the media library. You see a single thumbnail image and this image can be inserted into a post.
What you may not realise is that when an image is uploaded, WordPress can create up to three alternative versions at different sizes. Go to Settings > Media and it shows three image sizes – Thumbnail size, Medium size and Large size.
When an image is uploaded, any sizes smaller are automatically generated. So if you upload an image 2000 pixels wide, then 1024, 300 and 150 pixel images are created too. If the image you upload is only 600 pixels then only the smaller sizes, 300 and 150 pixel images are created. It won’t make larger images than one you upload.
What themes do to uploaded images
A theme may require images to be certain dimensions to fit in the layout of the page, so it adds extra sizes to the ones already in WordPress settings. To see if your theme uses special image sizes, go to Appearance > Editor.
Select the functions.php file on the right and look for add_image_size. Here is a popular WordPress theme and it adds five images sizes.
Different themes use different image sizes and some may need fewer images, but some may need more. It varies with the theme. Take a look at functions.php, but don’t change it. You should aim to create images that are one of those sizes defined in the theme.
WordPress bloat
Only smaller sizes of images are created, but if a large enough image is uploaded to the site with this theme then eight alternative sizes are created automatically from it – three from WordPress settings and five from the theme. Add the original and that makes a total of nine images.
Upload one image and nine could be stored! Take a look at this FTP listing of the files on the web server. Only the highlighted image was uploaded and WordPress created all the others.
Only smaller sizes are created, so you would not always get so many. Upload a small image and you might only get four images for example.
The amount of space this requires in your hosting account is not usually a problem because there is usually more than sufficient space. Even a large site with a lot of images probably won’t use anywhere near the limit for your hosting account.
Where this becomes an issue is with backing up. When every image you upload could result in another eight being automatically generated, the site grows fast and so does the size of backups.
Backups take longer to perform and increase in size over time.
WordPress un-optimizes images
Not only does WordPress create many alternatives to every image you upload, it can make them bigger! Take a look at this:
I optimized the heck out of chrome-cleanup-2.png and got it down to 4 KB (the third image above). WordPress created two alternative sized images from it that were actually much larger (in KB, not in pixels).
My careful optimization of this image has resulted in bloated alternatives that will be slower to display on web pages.
Which image is used on a page depends on several factors, so the original could be used, so it is well worth optimizing, but the bloated alternatives could be used in some places. You may think you have optimized images on your site for speed, but WordPress might show the slower loading, bigger alternatives.
What can you do?
Optimize images for WordPress sites
- Look at the functions.php file for the theme and see what image sizes it requires
- Before uploading an image, resize it to one that the theme requires
- Save images as .png files on your computer
- Use Squoosh to optimize images and shrink the size
- Upload the optimized image
- Use a plugin like Smush to optimise all the extra images that WordPress and the theme generates
The size of image required depends on where it will be used. A featured image is large, but an image within a post body may be smaller. Choose the size that fits the purpose.
Optimize images with Smush WordPress plugin
You should optimize an image in Photoshop or your favourite photo editor (I use GIMP) before uploading it to your site because having an image that is the right pixel size and has the smallest file size is essential. However, only a plugin like Smush or an alternative can optimize the extra images that are generated by WordPress and the theme.
Install Smush, select it in the sidebar and use the Bulk Smush feature to optimize all the images that have previously been uploaded to your site. The extra images you cannot normally see will be optimized.
Enable Automatically smush by images on upload in Smush settings. This means that every image you upload, and all the extra ones that WordPress and the theme generates, are optimized.
Summing up
There are more images on your site than you may have realized. Although you can optimize the images you upload, you cannot optimize the ones generated by WordPress or the theme. A plugin is needed for that, such as Smush or an alternative.
