We all use images and visuals, in general, on our sites. It’s inevitable nowadays. But the more images we upload, the more they impact the speed of the site. And a slow site can further lead to many other negative outcomes, which we will briefly cover later in this post.
So images can be troublesome if we do not optimize them, either by ourselves or with plugins. In this article, we will show you how to get rid of the unnecessary data that hides in your WordPress media library by compressing all the images without affecting their quality. Your pictures will look the same, it’s just their size that changes.
Without further ado, let’s dive into the best ways to optimize the images on your WordPress site with the least effort.
Through image optimization, you can reduce all the images on your WordPress site to their minimum size without making it noticeable to the naked eye.
Everyone should pay special attention to image optimization because it’s one of the most common ways to significantly increase the speed of a website. What’s nice about image optimization is that it doesn’t require any development skills, so it’s quite easy to achieve by any website owner.
Now, you can either keep track of every image you upload on your site and make sure to adjust and resize it manually, or you can use a plugin that will optimize all the images for you on autopilot.
Why Do You Need Image Optimization?
But now let’s talk a bit about why image optimization is important for your site and why you should not think twice before implementing it.
The main reason why you should use image optimization on your WordPress site is that it helps improve the page loading times on each web page. Images weigh considerably, especially if you upload them in their full dimension. You may not notice the consequences after each uploaded image but, with time, every small data added to your site contributes to a heavy page load.
According to Unbounce, pages that load faster than two seconds have an average bounce rate of 9%, while the pages that take five seconds to load have a bounce rate of 38%. That translates into less user engagement and fewer conversion rates.
Image optimization also improves your SEO ranking. How so? It’s just a Google thing. Starting with 2010, Google officially announced that the page speed will play a major role in the ranking algorithm. So, if you have a slow website, your chances of seeing your site at the top in the SERPs decrease.
Which leads us to lose conversions. The lower you rank in Google, the more your conversions drop. If your site’s SEO ranking improves, then more viewers or buyers will enter your page and will likely click on a call-to-action. Or, at least, spend more time on your site and engage with your content.
So, as you can see, image optimization is directly linked to website speed, SEO, and conversion rates. A small, but vital role in this business chain.
Image optimization can be done either manually (you take one image at a time and compress it following the best practices) or with a tool that will handle all the hard work for you on automatic mode.
Further on, we will discuss how you can optimize WordPress images automatically and avoid the extra work of doing it yourself.
How to Optimize Your Images on Your WordPress Site
Optimize Images Manually
Anyway, if you’re a fan of ‘do it yourself’ method, you can optimize the images manually… if you have the time for that. I mean, if your business profile entails using many images, then your job will be tough since it’s going to take precious time away from you.
You can resize and crop the images by yourself before uploading them. If you want to do that, it’s important to find out the maximum display size of your images so that you won’t exceed the size limit which will make the images look pixelated to your visitors. The maximum display size is actually the largest resolution an image can be displayed at on a site, in light of all the user viewports and screens that will access it. Learn more on how to serve images of the correct dimensions.
After handling the minor task of cropping and resizing, you can actually go deeper by compressing the images with an online tool like Kraken or ImageResizer, that work for both JPG and PNG.
Finding the right image format is also important because it can save you many megabytes. For instance, the simple fact that you’re using JPG for graphics and logos can cost you extra disk space. Why? Because you can get the smallest size possible of an image if you save it in the right format, and that depends on the image type.
If you upload mostly images with a large variety of colors, JPG is the right format. But if you use graphics, illustrations or icons in your posts (usually images with only a few colors), you might want to upload them as PNGs because this format is the best one to keep them at a minimum size. If you convert a PNG image to a JPG, its size will increase and will probably look blurry as well. The vice versa is also valid. Smashing Magazine did a few tests on how sizes change per each image format.
Set the Image Optimization on Autopilot
If you’re more of a time-saver and full efficiency is what you care for the most, then you can simply install a plugin that will do all of the above (and more) in seconds for you.
Optimole is a good example of a lightweight WordPress plugin with a smart functionality under the hood.
First of all, Optimole only optimizes an image when it is requested by the server. So, if you upload an image, it will be optimized when a user will access the page that contains it, right on the spot. After you install the plugin you just have to let it do its job, but not before you set your preferred optimization method – high, medium or low.
optimole plugin image quality settings
Second of all, Optimole resizes every image to the optimal size for each visitor’s viewport, so that it loads fast on any device. It will find the perfect dimension and size based on every visitor’s device type. On the same note, if the user’s connection is slow, Optimole will downgrade the quality of the image for that specific user, so that the page will still load fast and the image will show up quickly.
As far as our experience with WordPress goes, this plugin comes with all the features a user needs from an image optimization tool, all packed and delivered via a simple and user-friendly interface. This is the kind of plugin that you just install and forget it exists. That’s because it will work alone in the background, optimizing the images automatically so you can focus on the more important projects of your business.
How to Optimize Your WordPress Images Automatically
Next, we will show you how to optimize all the images on your WordPress site on autopilot. All you need to do is to install a plugin, set your preferences, and forget about it.
In order to do so, install and activate Optimole for free. After installing and activating the plugin, you must register via email in order to generate an API key that you will introduce in your WordPress dashboard.
optimole sign in page to optimize images
When the API key is confirmed, the plugin will start working. The next step is to go to Settings, enable the features you want to use, and select your preferred compression level.
You can see Optimole at work once you start uploading images. Every time you upload an image, it will do all the compressing in the background without intruding or even notifying you about that. If you already have images on your WordPress site, Optimole will compress them too once you or your users visit them. It transfers your original images to a cloud and replaces their initial link with a custom one after they’re being optimized. The optimized images are rendered through a CDN that delivers them faster to the user.
When you visit a page with an image, you will notice that the image will display the custom Optimole URL (click right -> Open image in new tab).
The reports on the optimized images won’t show up right away, it takes a few minutes for the plugin to update the changes. To see the progress, go to Media -> Optimole.
optimole media dashboard settings
You can also log in to your dashboard area on Optimole website and check Bandwidth section.
But before installing it, you can quickly test the tool and it will show you the state of the images that you use on your site. Optimole will give you an on-site report on how it can improve your site’s images and, hence, speed.
optimole plugin optimization results
Image Optimization Tests – Before and After
Now, let’s do some tests to see how efficient automatic image optimization is. WordPress, by default, scales down high-resolution images too but let’s see how you can reduce them even more with an image optimization plugin (which will also adapt each image to a maximum display size so that it won’t show up on the visitor’s device larger than necessary).
So let’s do a before-and-after experiment, using the same images and viewports.
Results Before Image Optimization
Using a testing WordPress instance and Twenty Twenty default theme, we uploaded a few photos of different sizes borrowed from MyStock.photos. We included the images in a regular blog post, via a gallery block.
adding a regular image post to the blog
Now, if you click on each image to enlarge it, you will notice that WordPress resized them by default. So the four images that we uploaded were reduced as follows:
7.47 MB -> 676 KB
12.3 MB -> 762 KB
11.2 MB -> 384 KB
8 MB -> 794 KB
If you upload the first image to a regular post type, without the option to enlarge it, its display size will change from 7.47 MB to 452 KB.
standard post image block
WordPress, by default, reduced the image uploaded in a single post from 7.47 MB to 452 KB.
If you access the same blog post from your mobile, the image will be reduced to 92.61 KB.
So these are the changes that WordPress is doing by default when you access your blog posts via desktop and mobile. You could see how an image is compressed for both full-size display and blog post size display.
Results After Image Optimization
Now, let’s take a concrete example of how Optimole compresses your data-heavy images. Just like we did in the first part of the testing (without Optimole), we created a gallery block by uploading the same unoptimized pictures taken from MyStock.photos.
Optimole has four compression levels. If you go with High, the compression will keep the image quality as high as possible. If you go with Low, the compression and optimization will be more drastic (as in will reduce the size to a larger extent).
Once you visit the post on the live website, Optimole immediately takes over and creates a compressed alternative of every image you click on (each image can be enlarged).
With high-quality compression, the images were reduced as follows (these are the same images listed in the same order as in the previous test):
7.47 MB ━> 557 KB
12.3 MB ━>548 KB
11.2 MB ━> 220 KB
8 MB ━> 547 KB
With low-quality compression, the results are different:
7.47 MB ━> 251 KB
12.3 MB ━> 269 KB
11.2 MB ━> 124 KB
8 MB ━> 302 KB
This is how the first image in the list looks after both High and Low compression levels (the level of quality) :
High-quality level (557 KB)
high quality compression level image sample
Low-quality level (251 KB)
low quality image compression level sample
With the naked eye, you can notice that the quality of the image didn’t change much.
Now, if you add an image to a blog post without the option to enlarge it, it will be automatically reduced to its maximum display size (the maximum display size that is required for a blog post).
For example, this image alone was converted from 7.47 MB to 75.3 KB (in high-quality compression) while being displayed in a single blog post:
standard post image block
Single post image compressed to 75.3 KB
580 x 387 pixels
high quality compression in a post sample
This is nice because your server won’t need to load the full size of the picture when a smaller size is preferred.
But that’s happening on the desktop. For mobile screens, Optimole will create alternative versions of the image, even smaller than their desktop counterpart.
So, if someone is accessing your site from mobile, Optimole won’t deliver the desktop variation of the image which, even optimized, can still take time to load on a smaller device. The plugin actually delivers a separate mobile alternative of that image.
To exemplify, the same image in the blog post from above was reduced to 20.15 KB for mobile users (from 7.47 MB in original).
very low quality compression image sample
Optimole uses both lossless and lossy compression methods, which are set based on what compression level you pick.
Through lossless optimization, the images won’t lose significant data during compression. They will look just like their original version after the optimization. That’s why the lossless optimization won’t reduce your disk space very much, the differences in size after compression is almost zero.
On the other side, there’s the lossy optimization, which actually reduces your images’ size to a high extent, but without deprecating their quality (as perceived with the naked eye). So if you are looking to make your database significantly lighter than it is now, you can go with lossy optimization because your visitors won’t notice the conversion.
Other Ways to Optimize Images
Apart from resizing, there are still a few other nice methods to serve lighter images to your visitors and improve your site’s loading times.
Lazy loading is another nice method that will contribute to keeping your images from slowing down your site. If you have image-heavy posts or pages, displaying them all at once might not be a good idea. The lazy loading feature will display them gradually when the user scrolls down the page. With every scroll, a new batch of images is displayed onto the visible area of the user’s screen, so this way the server will respond better to all the requests.
Content Delivery Network (CDN) is a feature that will serve your images via the server location that’s nearest to your visitors’ access point, which translates into faster loading times. Optimole comes with an integrated CDN service for your images, which works automatically. Cloudflare and StackPath are independent WordPress plugins that provide CDN services for your entire database in case you need a full-site optimization.
To save disk space and display lighter files,you can also convert GIFs to video. If you activate this feature in Optimole, it will automatically start to convert every GIF file you upload.
The video formats available are MP4 and WebM, and the plugin will choose the more efficient one for each particular case during the conversion. There are also several online tools that you can use to convert a GIF to MP4 before uploading it to your WordPress site. Why convert? Because GIF formats are larger than video formats.
Smart cropping means cutting out the unnecessary space or background in an image and only keep the point of interest. Cropping can be done either manually or with a plugin like Optimole that will automatically detect the ‘hot spots’ in an image and remove the unneeded parts.
Wrapping Up
To sum it up, image optimization is a simple technique that doesn’t require any big efforts from you. You just install a plugin and you’re fully covered.
If you choose not to use it on your site, you’ll be losing ground. A decreasing site speed is not something that you notice after every image file that you upload, it’s like a snowball that gets bigger and bigger with time. And Google cares about your site speed a lot, as we discussed earlier in this post; so much that it can affect your business.
So you’d better take precautions now before it gets serious. Image optimization doesn’t require any technical knowledge and can be handled by everyone.
