WordPress Image Optimizer

wordpress image optimizer

WordPress might not be the fastest platform you could use for your website out of the box, but with a little optimization that can easily be remedied. There is a reason that over 26% of all websites on the internet choose WordPress, and that is because it is flexible, reliable, and easy to use. One of the biggest delays with WordPress sites all comes down to image optimization. That is why it is important to use a WordPress image optimizer plugin.

Images

According to httparchive, as of August 2016, images on a website make up for an average of 64% of a webpage’s weight, with video coming in 2nd at 17%. This means that image optimization should be at the top of your list when it comes to determining ways to speed up your website. A CDN, a fast web host, lightweight plugins, etc. are all good web performance optimizations, but almost none of them will show you such drastic results.

image ratio webpage weight

In December 2010, images made up 60% of an average webpage’s weight. Over 6 years we have seen a slight growth of 4%. Why? Because images have grown to larger sizes, especially with retina now in the mix, as well as websites today simply tend to be larger with a lot more content than they used to be. And you can expect images to simply keep growing, that is why image optimization is important.

Besides the performance aspect, images are very important from a marketing perspective, providing some of the following advantages:

  • Images enhance a web page via the visual aspect and let you convey more with less.
  • Images can act as call to actions (CTAs) to entice users to signup for a service or product.

Because of those reasons, simply removing images to speed up your site is usually never a good solution. The solution is finding the best ways to optimize them.

WordPress Image Optimizer

Typically users that take advantage of a good WordPress image optimizer can see savings of up to 70%, and sometimes even more. This means on that 1562 KB example above, that is almost 1 MB of savings that could be had. Again, this all depends on your level of compression and the image file format you choose to go with. But large reductions are very common, especially for those that have not yet optimized their images.

In our examples below we are using the Optimus Image Optimizer, as this allows us to take our image optimization even further with WebP and lossless image compression. It is developed and maintained by the team at KeyCDN, a global content delivery, with a sole focus on performance. The optimization of images – including thumbnails – is conducted automatically in the background and outside of the view of the user when you upload to the WordPress media library.

JPG Lossless Comparison

Lossless compression refers to compression in which the image is reduced without any quality loss. Usually, this is done by removing unnecessary metadata from JPEG and PNG files. You can read our post on more of the differences between lossy and lossless compression. We uploaded 5 different full resolution JPGs (most of them averaging between 1-5MB). We then ran them through the Optimus WordPress Image Optimizer plugin to compress them. Below are a couple examples of the photos we used.

jpg-to-webp-1
jpg-to-webp-3
jpg-to-webp-4
jpg-to-webp-5
JPEGs are usually always compressed to a certain extent but we are compressing them further so they are as small as possible. And remember, with lossless compression we don’t lose any quality.

FILE NAME ORIGINAL JPG LOSSLESS COMPRESSED JPG SIZE DIFFERENCE %
jpg-to-webp-1.jpg 758 KB 685 KB 10%
jpg-to-webp-2.jpg 599 KB 529 KB 12%
jpg-to-webp-3.jpg 960 KB 881 KB 8%
jpg-to-webp-4.jpg 862 KB 791 KB 8%
jpg-to-webp-5.jpg 960 KB 877 KB 9%

JPG to WebP Comparison

So we saw a decent reduction with lossless compression above, but now let’s see what happens when we take the same photos and convert them to WebP. The Optimus WordPress Image Optimizer plugin will actually convert JPG and PNG images to WebP for you automatically.

webp image optimizer

And then you can serve them to WebP supported browsers using the free WordPress Cache Enabler plugin. This is also a lossless compression method so you shouldn’t see any noticeable differences in quality with WebP.

FILE NAME ORIGINAL JPG WEBP FORMAT SIZE DIFFERENCE %
jpg-to-webp-1.jpg 758 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 200 KB 79%
jpg-to-webp-4.jpg 862 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 71.7 KB 93%

As you can see WebP resulted in a 85.87% decrease in average image size. Read more details about JPG to WebP in our case study.

PNG Lossless Comparison

We also tested lossless compression on PNGs. We uploaded 20 different full resolution 512 x 512 px PNG icons and ran them through Optimus WordPress Image Optimizer plugin. Below are a couple examples of the icons we used.

png-to-webp-1
png-to-webp-2
png-to-webp-3
png-to-webp-4
PNGs are generally smaller and so we wanted the results to match more of a real use case scenario.

File Name Original PNG LOSSLESS Compressed PNG Size Difference %
png-to-webp-1.png 44 KB 34 KB 23%
png-to-webp-2.png 46 KB 35 KB 24%
png-to-webp-3.png 43 KB 31 KB 28%
png-to-webp-4.png 30 KB 24 KB 20%
png-to-webp-5.png 15 KB 11 KB 27%
png-to-webp-6.png 34 KB 24 KB 30%
png-to-webp-7.png 15 KB 13 KB 13%
png-to-webp-8.png 63 KB 47 KB 25%
png-to-webp-9.png 48 KB 36 KB 25%
png-to-webp-10.png 17 KB 14 KB 18%
png-to-webp-11.png 18 KB 13 KB 28%
png-to-webp-12.png 61 KB 45 KB 26%
png-to-webp-13.png 32 KB 25 KB 22%
png-to-webp-14.png 26 KB 21 KB 19%
png-to-webp-15.png 14 KB 12 KB 14%
png-to-webp-16.png 36 KB 27 KB 25%
png-to-webp-17.png 14 KB 12 KB 14%
png-to-webp-18.png 21 KB 18 KB 14%
png-to-webp-19.png 42 KB 30 KB 29%
png-to-webp-20.png 23 KB 20 KB 13%

As you can see PNG lossless compression resulted in a 21% decrease in average image size.

PNG to WebP Comparison

So we saw a decent reduction with lossless compression above, but now lets see what happens again when we take the same photos and convert them to WebP.

File Name Original PNG WebP Format Size Difference %
png-to-webp-1.png 44 KB 30 KB 32%
png-to-webp-2.png 46 KB 33 KB 28%
png-to-webp-3.png 43 KB 25 KB 42%
png-to-webp-4.png 30 KB 18 KB 40%
png-to-webp-5.png 15 KB 8 KB 47%
png-to-webp-6.png 34 KB 18 KB 47%
png-to-webp-7.png 15 KB 8 KB 47%
png-to-webp-8.png 63 KB 44 KB 30%
png-to-webp-9.png 48 KB 33 KB 31%
png-to-webp-10.png 17 KB 11 KB 35%
png-to-webp-11.png 18 KB 9 KB 50%
png-to-webp-12.png 61 KB 39 KB 36%
png-to-webp-13.png 32 KB 21 KB 35%
png-to-webp-14.png 26 KB 17 KB 35%
png-to-webp-15.png 14 KB 9 KB 36%
png-to-webp-16.png 36 KB 24 KB 33%
png-to-webp-17.png 14 KB 8 KB 43%
png-to-webp-18.png 21 KB 13 KB 38%
png-to-webp-19.png 42 KB 27 KB 36%
png-to-webp-20.png 23 KB 18 KB 22%

WebP resulted in a 42.8% decrease in average image size. So in our scenario, just converting to WebP decreased our already compressed PNGs by another 22%. Read more about PNG to WebP in our case study.

Summary

As you can see from the results above, using a WordPress Image Optimizer such as Optimus, can greatly reduce your overall page weight and in turn drastically speed up your website. In our JPG to WebP test, we saw an 11% decrease in overall load times. If you are looking for a good solution to speed up WordPress we definitely recommend giving Optimus, along with WebP a try!

Related Articles