Optimus

Find answers, guides, and tutorials to optimize your images.

WordPress Image Optimizer

Updated on November 21, 2018
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 HTTP Archive, 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.

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 five different full resolution JPGs (most of them averaging between 1-5 MB). We then ran them through the Optimus WordPress image optimizer plugin to compress them.

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.

ImageFile nameOriginal JPGCompressed JPGWebP formatSize difference
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

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.

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 NameOriginal JPGWebP formatSize difference
jpg-to-webp-1.jpg758 KB109 KB86%
jpg-to-webp-2.jpg599 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB200 KB79%
jpg-to-webp-4.jpg862 KB146 KB83%
jpg-to-webp-5.jpg960 KB71.7 KB93%

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.

PNGs are generally smaller and so we wanted the results to match more of a real use case scenario.

File nameOriginal PNGLossless compressed PNGSize difference
png-to-webp-1.png44 KB34 KB23%
png-to-webp-2.png46 KB35 KB24%
png-to-webp-3.png43 KB31 KB28%
png-to-webp-4.png30 KB24 KB20%
png-to-webp-5.png15 KB11 KB27%
png-to-webp-6.png34 KB24 KB30%
png-to-webp-7.png15 KB13 KB13%
png-to-webp-8.png63 KB47 KB25%
png-to-webp-9.png48 KB36 KB25%
png-to-webp-10.png17 KB14 KB18%
png-to-webp-11.png18 KB13 KB28%
png-to-webp-12.png61 KB45 KB26%
png-to-webp-13.png32 KB25 KB22%
png-to-webp-14.png26 KB21 KB19%
png-to-webp-15.png14 KB12 KB14%
png-to-webp-16.png36 KB27 KB25%
png-to-webp-17.png14 KB12 KB14%
png-to-webp-18.png21 KB18 KB14%
png-to-webp-19.png42 KB30 KB29%
png-to-webp-20.png23 KB20 KB13%

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 nameOriginal PNGWebP formatSize difference
png-to-webp-1.png44 KB30 KB32%
png-to-webp-2.png46 KB33 KB28%
png-to-webp-3.png43 KB25 KB42%
png-to-webp-4.png30 KB18 KB40%
png-to-webp-5.png15 KB8 KB47%
png-to-webp-6.png34 KB18 KB47%
png-to-webp-7.png15 KB8 KB47%
png-to-webp-8.png63 KB44 KB30%
png-to-webp-9.png48 KB33 KB31%
png-to-webp-10.png17 KB11 KB35%
png-to-webp-11.png18 KB9 KB50%
png-to-webp-12.png61 KB39 KB36%
png-to-webp-13.png32 KB21 KB35%
png-to-webp-14.png26 KB17 KB35%
png-to-webp-15.png14 KB9 KB36%
png-to-webp-16.png36 KB24 KB33%
png-to-webp-17.png14 KB8 KB43%
png-to-webp-18.png21 KB13 KB38%
png-to-webp-19.png42 KB27 KB36%
png-to-webp-20.png23 KB18 KB22%

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!

KeyCDN uses cookies to make its website easier to use. Learn more about cookies.