How to optimize WordPress images? Your Complete Guide
Among the criteria that Google analyzes to rank websites in its results, loading speed continues to gain in importance as evidenced by the latest updates from the search engine. While SEO remains largely patient and regular work, simple corrections to your website images can immediately improve loading speed. In this article, we’ll show you how to optimize WordPress images for your website.
The size of the files on your website significantly influences its loading speed. And if Google uses the loading speed of your website to determine the position of your website, it is because this aspect directly affects the behaviour of Internet users. A slow-loading website will lose significant traffic. Kissmetrics statistics offer a good overview of the influence of a website’s load speed:
47% of Internet users expect a page to load in less than 2 seconds
40% of Internet users leave a website if a page takes more than 3 seconds to load
In e-commerce, 1 additional second of loading reduces conversion by 7%
And when it comes to mobile sites, Google’s statistics are just as impressive. Depending on the loading time, this graph shows the probabilities of an Internet user leaving your website (bounce rate):
How to calculate the loading speed of a website?
There are many tools available to calculate your website loading speed. Here are two of the most popular:
With Google Page Speed Insights (PSI)
Although it does not always have access to data relating to the loading speed of your website, PSI suggests a list of modifications to make according to their degree of importance. In this example, optimizing images is Google’s first recommendation:
With GTMetrix
This tool is more comprehensive than PSI, as it also includes data from Bing and Yahoo search engines. It will offer you graphics as well as a set of ratings related to the speed of your website.
Are you in the red and you have a WordPress site with many images? Don’t move, you’ve come to the right place!
How to optimize WordPress images? Steps and tools
Before you start, know that optimizing the WordPress images of your website is just one of the many solutions available to improve your site’s loading speed. Do not take your loading speed for granted once your WordPress images are optimized.
1. Identify the maximum dimensions supported by your theme
On WordPress, the themes and widgets you use set a maximum size (in pixels) for images. If the image you embed in your WordPress exceeds the one supported by your theme, then WordPress will adjust it.
You think then: where is the problem?
Even if WordPress adjusts your image to display, the overly large file remains intact in your media library. It then takes up unnecessary extra space. In order to ensure that your WordPress loads as quickly as possible, it is therefore imperative not to embed images with excess size. They will slow down your website for nothing. To find out what maximum size your theme supports, go to the page of your choice, click on the right button of your mouse then on “inspect”.
Then click on the little arrow at the top at the very top left of the inspection interface. You can then select the photo of your page whose dimensions you want to inspect.
Once the image is selected, the HTML code bar of your image will appear in the main “elements” column.
The dimensions in this code bar reveal the natural dimensions of your image. That is, the dimensions of your file as it is saved to your media library.
On the right, another menu will show you the dimensions of WordPress images supported by your theme. This is the central square.
In this case, we have adjusted the image size to the maximum dimensions our theme supports. That is why you see 870 x 522 in both menus. But if the dimensions displayed in your code bar are larger than those in the menu on the right, then you are using unnecessary space.
2. Adjust your images to the WordPress dimensions of your theme
Now you know what size to resize your WordPress images to before you embed them. To do this, you can use line image resizing tools.
Some online tools to resize your images:
- Toolur
- BeFunky
- Online Image Resize
- Simple Image Resizer
If you’ve already incorporated an unnecessarily large image, don’t panic. You can simply change its dimensions directly from WordPress. To do this, go to the “Media” menu, then select the image you want to resize. Once on the page associated with your image, click on “Edit image”. You will arrive in a window of this type:
All you have to do is modify one of the two values (height or length), the original ratio will be automatically kept. Then, click on “resize” and finally on “save”. Here!
If you have an online store with hundreds of images, you definitely won’t have the time to optimize your site’s WordPress images one by one. The management system therefore offers extensions to automate this type of task as much as possible. We have selected a particularly effective one for you.
A WordPress plugin to resize your images:
- Imsanity
Imsanity will ask you to enter the maximum dimensions and image quality that you want to apply to all your photos. The extension will then take care of resizing the existing and new images.
3. Compress your images
Resizing isn’t the only technique to optimize WordPress images. Compression will also allow you to save space in your library, and improve the loading speed of your website.
Some online tools to compress your images:
- TinyPNG
- Optimizilla
- Compressor
- ImageOptim
- ImageSmaller
- Jpeg.io
Here is the interface of TinyPNG:
WordPress also offers image compression plugins. Here is our selection.
Two WordPress extensions to compress your images:
- Compress JPEG & PNG Images
- ShortPixel
Before you embed your image in your page or article and publish it, make sure you have reduced the size of the file sufficiently. We recommend that you aim for 50 KB as the average size for your images, and not to exceed 100 KB. This average will vary depending on the colours and content of each image. Also, don’t forget to preview your compressed image before uploading, in order to check its quality and readability.
You are ready to optimize the WordPress images for your site!
You now have the information and tools you need to optimize the WordPress images for your website. Perform all available improvements (compress, resize), and re-pass the speed tests of your website. If you had not optimized your images before, it is sure that you will see an improvement in your upload speed.
