What Does Image Optimization Mean?
We often hear the phrase Image Optimization in the context of site building and maintenance, but what exactly does it mean? Image optimization is the compression of an image’s file size (its weight) without changing its dimensions (its width and height). Some optimizations reduce the image’s quality – that is called a “lossy” compression, and some leave the quality intact, and that is called a lossless compression.
What Will This Article Teach you?
This article will discuss why we would want to optimize images in our WordPress site, which plugins you should use to optimize your site’s images, and we’ll end with a core feature that also addresses the issue.
My quest was to find the best image optimizer in WordPress, and I tried and tested three major free plugins:
I chose these three because they are the most well known plugins focused purely on optimization and nothing else, as opposed to other plugins, that optimize the whole site, and image optimization is only part of their functionality.
Why would we want to optimize images?
Decreasing image file sizes, i.e., optimizing images, has two benefits:
- The first is it increases site speed, since smaller file sizes load faster.
- The second benefit is that it saves disk space, and thus if your hosting pricing plan is based on disk space, you could actually save money.
Now that we understand the motivation, let’s dive into the various options the WordPress’s plugin repository offers us freely.
How I Went About Testing the Plugins
In order to test the plugins, I downloaded images from three sites: Pixabay, Freepik, and Unsplash.
I downloaded images in 2 sizes: a smaller image with a width of 640 pixels, and a larger image with a width of 1920 pixels. When those sizes weren’t available, I resized the downloaded image using paint.net.
Pixabay Image
640×426 pixels
Original Image size: 30.4 KB.
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| FULL | 0 (No savings) | No savings | 3.6 KB (12%) |
| MEDIUM (600×399) |
436 B (1.9%) | 436 B (1.9%) | 5.7 KB (22%) |
| THUMBNAIL (350×350) |
212 B (1.5%) | 212 B (1.5%) | 0 (No savings) |
| Total | 3 sizes reduced by 648.0 B. Total savings 1.3%. |
3 sizes reduced by 648.0 B. Total savings 1.3%. |
3 sizes reduced by 9.3 KB. Total savings 13%. |
1920×1280 pixels
Original Image size: 322.3 KB
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| FULL | 0 (No savings) | 24.7 KB (7.7%) | 215.2 KB (66.77%) |
| LARGE (850×567) |
625 B ( 1.7% ) | 625 B ( 1.7% ) | 8.3 KB (20.15%) |
| MEDIUM_LARGE (768×512) |
420 B ( 1.3% ) | 420 B ( 1.3% ) | 6.7 KB (28.63%) |
| MEDIUM (600×400) |
246 B ( 1.1% ) | 246 B ( 1.1% ) | 8.1 KB (23.34%) |
| THUMBNAIL (350×350) |
194 B ( 1.4% ) | 194 B ( 1.4% ) | 0 (No savings) |
| Total | 7 images reduced by 6.1 KB. Total savings 2.5%. | 7 sizes reduced by 30.8 KB. Total savings 5.6%. | 7 sizes compressed. Total savings 50% |
Freepik Image
Design vector created by stories – www.freepik.comFreepik doesn’t let you choose width. Instead, they let you download a zip file containing an image with large dimensions, plus other formats of the image (mainly Adobe’s Photoshop and/or Illustrator). Therefore, I used Paint.net to resize it to 640 pixels width.
640×640 pixels
Image size: 58.6 KB.
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Full | 0 (No savings) | 6.3 KB (10.8%) | 16.8 KB (28.67%) |
| MEDIUM (600×600) |
2.4 KB ( 5.4% ) | 2.4 KB ( 5.4% ) | 13.1 KB (26.79%) |
| THUMBNAIL (350×350) |
1.2 KB ( 5.5% ) | 1.2 KB ( 5.5% ) | 0 (No savings) |
| TOTAL | 3 sizes reduced by 3.6 KB. Total savings 4.2%. | 3 sizes reduced by 9.9 KB. Total savings 7.9%. | 3 sizes compressed. Total savings 23%. |
1920×1280 pixels
Image size: 256.8 KB.
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Full | 0 (No savings) | Reduced by 11.0% (28.2 KB) | 131.8 KB (51.32%) |
| LARGE (850×567) |
4.9 KB ( 6.3% ) | 4.9 KB ( 6.3% ) | 25.6 KB (30.01%) |
| MEDIUM_LARGE (768×512) |
4.0 KB ( 6% ) | 4.0 KB ( 6% ) | 21.8 KB (29.95%) |
| MEDIUM (600×400) |
2.7 KB ( 5.7% ) | 2.7 KB ( 5.7% ) | 13.7 KB (26.10%) |
| THUMBNAIL (350×350) |
1.2 KB ( 5.6% ) | 1.2 KB ( 5.6% ) | 0 (No savings) |
| TOTAL | 7 sizes reduced by 29.4 KB. Total savings 6.4%. | 7 sizes reduced by 57.5 KB. Total savings 8.3%. | 7 sizes compressed. Total savings 40%. |
Unsplash Image
Photo by Nguyen Dang Hoang Nhu on Unsplash640×426 pixels
Image size: 52.8 KB
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| FULL | 0 (No savings) | Reduced by 0.4% (213 B) | 15.1 KB 28.49% |
| MEDIUM (600×400) |
982.0 B ( 2.5% ) | 982.0 B ( 2.5% ) | 7.6 KB 18.14% |
| THUMBNAIL (350×350) |
643.0 B ( 2.9% ) | 643.0 B ( 2.9% ) | 0 (No savings) |
| TOTAL | 3 sizes reduced by 1.6 KB. Total savings 2.0%. | 3 sizes reduced by 1.8 KB. Total savings 1.6% | 3 sizes compressed. Total savings 19%. |
1920×1280 pixels
Image size: 393.4 KB
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| FULL | 0 (No savings) | 0 (No savings) | 203.9 KB (51.83%) |
| LARGE (850×567) |
2.0 KB ( 2.8% ) | Reduced by 2.8% (2.0 KB) | 14.7 KB (18.26%) |
| MEDIUM_LARGE (768×512) |
1.7 KB ( 2.8% ) | Reduced by 2.8% (1.7 KB) | 14.5 KB (21.64%) |
| MEDIUM (600×400) |
1.2 KB ( 3% ) | Reduced by 3.0% (1.2 KB) | 6.7 KB (14.92%) |
| THUMBNAIL (350×350) |
748.0 B ( 3.2% ) | Reduced by 3.2% (748 B) | 0 (No savings) |
| TOTAL | 7 sizes reduced by 14.1 KB. Total savings 3.0%. | 7 sizes reduced by 14.1 KB. Total savings 1.7%. | 7 sizes reduced. Total savings 36%. |
Which Plugin is the Best Optimizer
It’s easy to see that the plugin that reduces the most weight is TinyPNG, and if I were building a site from scratch I’d probably go with that. It does, however, have the drawback of optimizing only 50 images a month, that number including the various sizes that WordPress creates out of the original image. Therefore, if you know that you have many sizes – I’ve run into Gallery plugins that create a fair number of sizes – then this plugin might not do the job.
Another drawback is the need to open an account on TinPNG.com. It is free, but the process itself is disrupting, so you have to take that time into account when installing the plugin. If you’re pressed for time, this may not be the plugin for you.
If, however, I were installing an optimization plugin in an existing site, that already has many images, I might go with one of the other two. As you can see, both Smush and EWWW give the same results in reducing image sizes. So how can you choose between them?
I have some rules of thumb that I use decide between plugins. In the next section I’ll elaborate on them, and then after that we’ll dig into the three plugins’ additional features.
How I Choose Between Plugins in General
When I have a few plugins that do more or less the same thing and I have to choose one, these are the parameters I consider:
- Active installations: the popularity of a plugin is a big consideration. Exact numbers aren’t needed but I do look at two: Order of Magnitude and Relativity – Is the number in the hundreds? Thousands? The hundred-thousands? If all of the plugins’ downloads are in the same order of magnitude, I’d lean towards the one with the most downloads. The reasons that the number of downloads is a main consideration are as follows:
- As a rule of thumb, I’d say the the more downloads a plugin has, the more in indicates customer satisfaction. While not everyone who downloaded the plugin was necessarily happy with it, if the numbers are in the higher magnitude it does say something about audience satisfaction.
- More testers and testing environments – the more people use a plugin, the more use cases there are and the more bugs are found by those people, and, hopefully, fixed by the author. A new plugin or one with few downloads might be still rough around the edges, as opposed to a plugin that’s been in the wild for a while and has been honed and improved.
- Author: The question of who developed the plugin is also an indication of plugin quality. Is the plugin developed by Automattic? That would usually hint at a stable plugin that can be trusted to go a long way. If the developer is an individual, what other things has she done in WordPress? A developer’s name is always a link to their profile page where you can see listed other plugins and/or themes they have developed, whether they contribute to WordPress’s core code, and all their activity on wordpress.org. As a rule, when a knowledgeable and experienced developer is involved in a plugin, it’s a good indicator of a well written and well maintained plugin.
- Rating: The amount of stars and how many reviews they’re based on can also aid in your decision whether to use the plugin or not. However, there have been cases where reviews were found to be fake, so this can’t be your main parameter.
Another use for ratings is in the low star ones: it’s good to know ahead of time what the plugin’s shortcoming are – are they fundamental to its use or are they marginal? Do they apply to your use case? If you know in advance what to look out for, you’re better prepared to deal with the plugin’s disadvantages should you still decide to use it. - Support: You want the plugin to be well supported and maintained. There are a few ways to understand if this is the case in the plugin you’re thinking of using:
- The number of solved issues is a good indicator of the plugin’s maintenance attitude. A high percentage of solved cases hints that the plugin developer(s) are dedicated to their customers, and that the plugin is still being maintained. This can be combined with the Last Updated date and the Tested Up To version, where the later the date and the version, the more up to date the plugin. You do want to check, however, that the plugin author(s) aren’t mass-marking issues as solved.
- Another indication for an active plugin is many support issues, and that many of them are resolved. Active software has bugs – that’s kind of a given. If a plugin has very few issues, it might mean it doesn’t have many users.
| Image size | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Author | WPMU DEV | Exactly WWW | TinyPNG |
| Active installations | 1+ million at the time of writing this | 800,000+ at the time of writing this | 200,000+ at the time of writing this |
| Rating | 5 stars based on 5440 reviews | 4.5 stars based on 956 reviews | 4.5 stars based on 138 reviews |
| Support | 34 out of 47 issues resolved in last two months | 11 out of 16 issues resolved in last two months | 0 out of 5 issues resolved in last two months |
As you can see, Smush and EWWW are very close in all the parameters, therefore let’s dig deeper into the additional features that they and TinyPNG offer.
Smush – Lazy Load Images, Optimize & Compress Images
Plugin Description
Optimize images, turn on lazy load, resize, compress & improve your Google Page Speed. Smush will compress images without a visible drop in quality.
About the Plugin
- Author: WPMU DEV
- Active installations: 1+ million at the time of writing this
- Rating: 5 stars based on 5440 reviews
- Support: 34 out of 47 issues resolved in last two months
Additional Features
The plugin offers enhancements on the basic optimization process. I brought down some of them, but this is by no means an exhaustive list.
Bulk Optimize
In addition to optimizing any uploaded image, Smush enables you to optimize all the images that have been uploaded prior to its installation. The only drawback here is that it optimizes in batches of 50, so you have to keep clicking the “continue” button until the end of the optimization.
Selective Optimization
Lets you select which thumbnail sizes of an image may be optimized.
Metadata
Photos often store camera settings in the file, i.e., focal length, date, time and location. Removing this data reduces the file size. If you’re worried about damaging the image as a result of this removal, Smush adds a note saying: “This data adds to the size of the image. While this information might be important to photographers, it’s unnecessary for most users and safe to remove”.
Image Resizing
Detects unnecessarily large oversize images on your pages to reduce their size and decrease load times.
As of WordPress 5.3, large image uploads are resized down to a specified max width and height. If you require images larger than 2560px, you can override this setting here. Note: Image resizing happens automatically when you upload attachments. To support retina devices, we recommend using 2x the dimensions of your image size. Animated GIFs will not be resized as they will lose their animation, please use a tool such as http://gifgifs.com/resizer/ to resize then re-upload.
Pro Version
Since I’m only addressing free plugins I’ll only be brief about the Pro version’s features. They include: Bulk optimizing all images in one click, Optimize using lossy compression, streamline your images with CDN, enable automatic image sizing and WebP support, optimize original full size images, auto-convert PNGs to JPEGs (lossy), and more.
How to Use the Plugin
If you want to learn how to use the plugin, we have a great guide for optimizing images using Smush It:
EWWW Image Optimizer
Plugin Description
With EWWW IO you can optimize all your existing images, from any plugin, and then let EWWW IO take care of new image uploads automatically.
About the Plugin
- Author: Exactly WWW
- Active installations: 800,000+ at the time of writing this
- Rating: 4.5 stars based on 956 reviews
- Support: 11 out of 16 issues resolved in last two months
Additional Features
The plugin offers enhancements on the basic optimization process. I brought down some of them, but this is by no means an exhaustive list.
JPG to PNG
Enables conversion of JPGs to PNGs. Also enables deleting of originals.
Shows Optimized Images
Shows a list of all of the optimized images and their resized versions.
Delete Originals
When WordPress scales down large images, it keeps the original on disk for thumbnail generation. EWWW enables you to delete them to save disk space.
Bulk Optimize
In addition to optimizing any uploaded image, EWWW enables you to optimize all the images that have been uploaded prior to its installation.
Further, it offers 2 extra features:
- The possibility to force re-optimize – previously optimized images will be skipped by default, but if you check a check-box before scanning, EWWW will run its optimizer on them again.
- EWWW’s plugin also offers an explanation when a large number of images to optimize is found: Why are there so many images?
Comprehensive Coverage
EWWW lets you optimize everything on your site, not just the WordPress Media Library.
Pro Version
Since I’m only addressing free plugins I’ll only be brief about the Pro version’s features. The include: Auto-WebP, Lazy Load, Auto-Scale, JS/CSS Optimize, CDN, and more.
TinyPNG – Compress JPEG & PNG images
Plugin Description
Make your website faster by optimizing your JPEG and PNG images. This plugin automatically optimizes all your images by integrating with the popular image compression services TinyJPG and TinyPNG.
Note: Using the plugin requires creating an account in order to acquire an API key. It is free and doesn’t ask for payment details, however the process does add another step in the plugin installation since you can’t run the plugin without it.
Another note: The free version of this plugin limits the number of optimized images to 500 per month. This means that when counting image variations and assuming an average of 5 variations per image, only 100 uploaded images per month can be processed. This is fine if you start using the plugin before you have many images in your media library, however if you’ve installed it after you have hundreds or thousands of image it might take you many months to optimize them all.
About the Plugin
- Author: TinyPNG
- Active installations: 200,000+ at the time of writing this
- Rating: 4.5 stars based on 138 reviews
- Support: 0 out of 5 issues resolved in last two months
Additional Features
The plugin offers enhancements on the basic optimization process. I brought down some of them, but this is by no means an exhaustive list.
Bulk Optimization
Enables to bulk optimize images uploaded prior to this plugin installation. Since the plugin is limited to 500 images per month, it shows you how much resizing the remainder images on your site would cost.
Background Optimize
TinyPNG lets you decide when new images should be compressed: in the background or during upload.
Selective Optimization
Lets you select which thumbnail sizes of an image may be optimized.
Lets you optimize Original image
Metadata
Removes Metadata by default, allows to preserve creation date and time, copyright information, and GPS location.
A Short Review of the Plugin
We featured this plugin in our Tools category a few years ago:
Which Plugin to Choose
AS we saw before, the best optimizer is TinyPNG, but it has 2 drawbacks: only optimizing 50 images a month, and the registration requirement. If those are OK for you, the you should go with TinyPNG.
If, however, those drawbacks are a problem, then the next best plugin in my opinion is EWWW. Although its metrics are slightly lower than Smush’s, they’re still in the same ballpark, and its additional features are better than those Smush offers: JPG to PNG, Shows Optimized Images, enables deleting the originals, and its bulk optimization runs without interruptions. Smush does, however, have the advantage of letting you select which images to optimize, and of detecting overly large images and resizing them.
All in all, I have experienced all three plugins on various sites at different times, and they each had their merits and additional features that aren’t offered by the others.
This section is aimed at developers, as it describes a core feature and how to disable or override it.
WordPress 5.3 introduces a new way to manage these images by detecting big images and generating a “web-optimized maximum size” of them.
When a new image is uploaded, WordPress will detect if it is a “big” image by checking if its height or its width is above a big_image threshold. The default threshold value is 2560px, filterable with the new big_image_size_threshold filter.
If an image height or width is above this threshold, it will be scaled down, with the threshold being used as max-height and max-width value. The scaled-down image will be used as the largest available size.
In this case, the original image file is stored in the uploads directory and its name is stored in another array key in the image meta array: original_image. To be able to always get the path to an originally uploaded image a new function wp_get_original_image_path() was introduced.
Disabling the scaling
The scaling is controlled by the big_image_size_threshold filter. Returning false from the filter callback will disable it.
add_filter( 'big_image_size_threshold', '__return_false' );Closing Words
Optimizing images is vital and basic nowadays, and the plugins offered here do an excellent job of it, as does the core feature described above.
If you have suggestions for other great image optimizations tools or plugins, I’d love to hear them in the comments ? .
Keep reading the article at WPShout. The article was originally written by Lea Cohen on 2021-03-23 15:31:12.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.