Compressing your images can not only help you save bandwidth, but also increase page load speeds and thereby benefit your from the SEO perspective. This is because Google and other search engines consider Page load speeds a vital factor when it comes to ranking websites.
Manually compressing images for wordpress can be a bit tricky as wordpress auto-generates cropped/resized versions of the original image upon upload. This includes the standard thumbnail and medium size and any other custom size that your theme uses. So even if your original image was optimized you will still need to re-optimize all these new sizes (unless you are only going to be using the original image) which can be a bit of a work. You can solve this issue by using a WordPress image compression plugin that compresses all auto-generated image sizes along with the original image.
There are three plugins that really stand out when it comes to image compression. These are, TinyPNG, WP Smush and EWWW Image optimizer. Out of these three, EWWW Image optimizer compresses images right within your server, whereas the other two transfer your image to their own server and then transfer the optimized image back overwriting the original image.
In this article, let's take a closer look at each of these plugins, their pros and cons and then figure out which plugin is the best when it comes to compressing images (JPEG and PNG) to the max while retaining the image quality.
Before going into the article you might want to familiarize yourself with the following terms:
Image Optimization and Image Compression: Image optimization involves compressing a image to make it smaller in size yet retaining the image quality. The terms Image Optimization and Image Compression have been used interchangeably in this article.
Lossy Compression: To keep it simple, lossy compression is a type of compression where the image is compressed with some loss of quality. The loss of quality can be kept to a minimum so it is not readily noticeable. This type of compression can give you maximum file size reduction, the trade-off being a little loss of quality.
Lossless Compression: As the name suggests, in lossless compression the image is compressed while retaining the original quality of the image. While the quality of the image is retained the compression in this case will not be optimal.
Now that we have familiarized ourselves with these terms, let's have a look at these three plugins in further detail:
1.) TinyPNG (Version 1.3.1 )
First in line is TinyPNG which is an excellent plugin for compressing PNG and JPEG images. This plugin automatically detects if the uploaded image is a PNG or JPEG and sends the image to one of its servers for compression. The compressed image is then sent back to your server where it overwrites the original files with the new compressed version.
This service is 100% free for compressing up to 500 images every month. To compress more than 500 images in a month you will need to sign-up for a pro account. Your images will be charged at $0.009 per image thereafter. For more details visit this link: https://tinypng.com/developers
Image Compression Details
Let's see how this plugin compresses, JPEG and PNG images.
PNG Compression: To compress PNG images, TinyPNG uses the open source tool PNGquant which is an excellent lossy compression software that works by converting 24-bit PNG image files to much smaller 8-bit indexed color files. This of-course means there will be loss in quality, but it would be very minimal, almost unnoticeable.
JPEG Compression: TinyPNG optimizes JPEG images by stripping unnecessary meta data and then re-encoding the image to create a compressed file. Not sure which encoder they use for this purpose, but I suspect it is JPEGTran, mozjpeg and/or JPEGOptim.
Once you have installed and activated the plugin, go to Settings > Media and select the file sizes that you want the plugin to compress. For instance, if you are only going to use the Original image and the thumbnail image, then un-check all other sizes. Lesser sizes to compress means that your images will be compressed faster in addition to keeping your monthly usage lower as each image size is counted as a separate image. This means, if you have 10 different image sizes per image, you will reach your monthly usage of 500 images once you have compressed 50 images (50 images x 10 sizes).
Individual Image Compression: Images are compressed automatically as you upload them and as of now there is no option to change this which is a bit of a drawback. You can compress already uploaded images individually by visiting the Media Library and clicking on the compress button next to the image.
Bulk Compression: You can bulk compress older images that have already been uploaded either by going to Tools > Compress All Images or by going to Media > Library and then individually selecting the images you want to compress and then selecting compress images option from the bulk actions drop down menu as shown in the image below:
Pros and Cons
These are of-course my own personal opinion:
Pros: This plugin is super easy to install and use and has minimal settings.
- Does not have an option to disable automatic optimization of images as they are uploaded.
- Does not support Gif Images.
- This plugin sends your images to an external server and depending on the current server load, your images might have to wait a bit longer to be compressed.
2.) WP Smush from WPMU Dev (Version 188.8.131.52)
WP Smush is a free plugin offered by WPMU Dev that works similar to TinyPNG by sending images over to their servers for compressing and then returning the compressed image back to your wordpress uploads folder. The only difference is that the free version of this plugin only performs lossless compression on the images. This means no image quality will be lost, but this also means that the file size will not be reduced by much.
The free version though has no limit on the number of images you can compress as long as the images are under 1 MB in size. Bulk compression is available for upto 50 images at one go. Compression is available for PNG, JPEG and GIF images.
The paid version known as WP Smushit Pro, offers lossy compression which can further compress images with minimal quality loss. Paid version also allows you to bulk compress unlimited images and keep backups of un-compressed images if you want to restore them later. The paid version comes at $19/month. Check out more details here.
Once installed, go to Media > WP Smush and select the 'Auto-Smush Images on Upload'. This will auto compress your images as you upload them to the WordPress Media Library.
Individual Image Compression Go to the Media library to compress images individually.
Bulk Compression To bulk compress, go to Media > WP Smush and select 'Bulk Smuch 50 Attachments'. One thing I did not like about bulk smushing is that it does not allow you to select the images you want to smush. Instead, once you press the button it randomly compresses 50 unoptimized images. Another issue is that there is no button to stop the bulk smush once you have pressed the start button. Hopefully these issues will be fixed in a later update.
Pros and Cons
Pros: Easy to install with minimum settings.
Cons: A few things I did not like about this plugin are as follows:
- Sends images to a different server which can cause minor delays.
- Offers only lossless compression for free version. Lossy compression is available only on the pro version.
- Does not have option to select image sizes that you want to compress. The plugin automatically compresses all image sizes.
- Does not have option to individually select images for bulk compression.
3.) Ewwww Image Optimizer (Version 2.4.5)
Ewwww Image Optimizer is the only plugin in this list that does not transfer your images to a different server, reason why the optimization is much faster. It downloads all required software namely, JPEGtran, Optipng and PNGquant to your server and uses them to compress images. This of-course also means that the plugin creates its own MYSQL database table to save temporary images.
In addition to compressing images, the plugin also allows you to convert JPG to PNG and PNG to JPG if need be. But more often than not, you will not be using this feature. The plugin also supports new standards like WebP that can offer very high compression, but is supported only in Firefox and Chrome.
Image Compression Details
Compressing PNG Images: This plugin gives you the option of lossless compression and lossy compression for PNG images. Optipng is used to losslesly compress images. But if you want further compression you can turn on, lossy compression by going to Settings > EWWW Image Optimizer > Basic Settings and then checking the box that says 'Lossy PNG optimization' and clicking 'Save'. Lossy PNG compression is achieved using PNGquant, the same open source software that TinyPNG uses. Therefore the results will more or less be the same.
This plugin also allows you to use PNGOUTWin which can help you further compress your image. But PNGOUTWin being a paid software, you will need to get a license first to start using it.
JPEG Optimization: The free version of EWWWW Image Optimizer compresses JPEG Images using JPEGTran which is a lossless compression software. This means that the size reduction will not be that high. Although the paid version allows Lossy JPG optimization using JpegMini which promises to give up to 80% size reduction. To get more details about the paid version, visit this page.
After activating the plugin, go to, Settings > EWWW Image Optimizer. Under the Basic tab, check the option that says 'Remove metadata' and 'Lossy PNG optimization'. The lossy PNG optimization option will give you maximum reduction for your PNG image files. If you have a paid subscription, you might also want to check the box next to 'Lossy JPG optimization'.
Next go to the Advanced tab and under the 'Disable Resizes' option, check the image sizes that you do not want to compress and click 'Save Changes'.
Compressing Individual Images: Images are automatically optimized as you upload them to your Media library. Although, you can disable automatic optimization by going to the Advanced tab in the settings page and checking the box next to 'Disable Automatic Optimization'.
Already uploaded individual images can be optimized by going to Media > Library and clicking on 'Optimize Now' next to the image you want to optimize. Images that are already optimized show the Re-Optimize link. You can press this link if you want to re-optimize the image.
Bulk Compression: You can bulk optimize images, either by going to Media > Library and selecting images that you want to optimize and then selecting Bulk Optimize from the Bulk Options Menu or by going to Media > Bulk Optimize.
Pros and Cons
Pros: Very fast compression since the images stay in your server.
Cons: These are just a few things that I personally did not like with the plugin:
- Too many settings.
- Uses the PHP exec() function.
- Adds a database table which does not get removed on plugin deactivation.
- Only offers Lossless compression for JPEG Images in the free version.
Note: If you are concerned about the cons, the paid version of EWWW which is called EWWW Image Optimizer Cloud eliminates all these issues as the images are transferred and optimized in their cloud server and then transferred back similar to the other two plugins mentioned here.
Putting the Plugins to Test
Now let's put these plugins to test and see how much compression they can offer.
It is to be noted that once an image is uploaded to the Media Library, wordpress auto-crops the images into two standard dimensions namely the thumbnail which is 150 x 150 pixels and medium size which is 300 x 300 pixels. In addition I also used a custom dimension of 400 x 400 pixels for the test. So apart from the original image, there are three additional sizes. These are the sizes that you would typically use as a featured image or as a thumbnail while displaying sidebar or related posts.
Note: I am not displaying the final optimized images here as that is insignificant considering that all outputs are pretty good and look very close to the original image. So all we are concerned about right now is the output size which is what these tests reveal.
So let's get started:
JPEG Optimization Test:
I tested two JPEG images of different sizes with these three plugins. The output details of each of these images is listed in a tabular format for easy reference.
JPEG Image 1: The first image had a dimension of 640 x 427 Pixels and total size of 116 KB.
Visit the following link to view the image that was used:
Original Image Link: https://c1.staticflickr.com/3/2935/14676957593_5d931c6150_z.jpg
Image Dimensions: 640 x 427 Pixels
Image Size: 116 KB
Image Credit: https://www.flickr.com/photos/aloha75/14676957593/
Here is a small preview of the image used:
The results are listed as follows. The first column named Unoptimized Image displays the original image sizes once they were uploaded into the WordPress Media Library. Subsequent columns display the size of the final optimized image by TinyPNG, WP Smush and EWWW Optimizer. Each row details the image sizes for a particular image dimension namely the original image, thumbnail, medium and custom size.
JPEG Image 2: This image had a dimension of 640 x 426 Pixels and total size of 226 KB.
Original Image: https://c2.staticflickr.com/4/3956/15066427183_122202782d_z.jpg
Image Dimension: 640x426 Pixels
Image Size: 226KB
Image Credit: https://www.flickr.com/photos/pavdw/15066427183/
Here is a small preview of the image used:
Conclusion: In both the tests TinyPNG gave the max compression. Compression outputs of EWWW and WP Smush are exactly the same probably because they use the same software JPEGTran which offers lossless compression. Lossless compression as mentioned before maintains the original image quality but as a down side does not give max compression. Paid versions of both these plugins use lossy compression which will give much better results.
Note: These tests have been done using free version of these plugins and not paid versions.
PNG Optimization Test
I used two PNG images to conduct the test. The details are as follows:
PNG Image 1: The dimensions of this image was 560 x 560 Pixels and the image size was 117 KB. Here is a preview of the image used.
Image Size: 117 KB
Image Dimension: 560 x 560 Pixels
The results are as follows:
PNG Image 2: The dimensions of this image was 560 x 500 Pixels and the image size was 57 KB.
Image Size: 57 KB
Image Dimension: 560 x 500 Pixels
Here is a preview of the image used.
The results are as follows:
Conclusions: Again, as in case of JPEG, TinyPNG has the best results closely followed by Ewww. This is because both these plugins use PNGQuant to compress images. Oddly enough, WP Smush does not compress PNG images that are more than 100 KB in size. I tested it with various images over 100 KB and each time I get the 'Already Optimized' message. So I guess this could be a bug and hopefully it gets taken care of in future updates.
As far as free plugins go, TinyPNG seems to be the clear winner followed closely by EWWW. As far as paid versions go, I am a little tilted towards EWWW as it uses JPEGmini for JPEG optimization which is a very good service and offers a host of options for PNG optimization including PNGquant, Optpng, PNGOutwin. Although I have to say that I have not yet tried out paid versions of either of the plugins so it is difficult to come-up with a strong recommendation.