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.
| Image | File name | Original JPG | Compressed JPG | WebP format | Size difference |
|---|---|---|---|---|---|
| jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86% | |
| jpg-to-webp-2.jpg | 599 KB | 529 KB | 58.8 KB | 90% | |
| jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79% | |
| jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83% | |
| jpg-to-webp-5.jpg | 960 KB | 877 KB | 71.7 KB | 93% |
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 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.
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!