Websites now-a-days consists of more images than text, as people prefer a visual approach rather than a textual approach. Though websites with multiple beautiful images looks really amazing but under the hood those images make the website load slow, especially if those images are unoptimized. This is why image optimization is a must need for all modern websites. Image optimization can not only reduce your image size without any noticeable degradation by human eyes, but also can provide those images in future ready version (like WebP). These future ready versions of the same image can be 60% smaller than the original image. Also, browsers can read these new file formats much faster.
Now when it comes to a WordPress website, there are countless option to choose from, most of whom are WordPress plugins, free or premium. These many choices often make people confused and they tend to choose some plugins without understanding the underlying things. Before we go further, lets make some things clear; we don’t use any WordPress plugins (free or premium) to optimize images on our own or our client websites. In this article we will explain why we do that and how it is more beneficial than using some WordPress plugins.
Table of Contents 📜
Lossy vs Lossless Image Compression
Before we dig any further, it is very important that you know the basic difference between a lossy and lossless image compression and what does what. Let’s first talk about “lossless” image compressions. If you have ever use Google Photos on your phone or computer, you might have noticed that there is a small info icon for each image and if you click on that icon, it will show you a bunch of details about that photo like where it was taken, when it was taken, camera name, lens configuration and many more things like that.
Believe it or not all that information is also part of that image and takes space to store those details. These are called image metadata, i.e. some extra information about the image gets stored inside the image to give some context. But when you are using this same image on the web instead of viewing it in some memory album like Google Photos, you really don’t need all that extra information for each of your image.
This is where lossless compression comes in. Lossless compression mainly removed all the extra garbage data from an image without reducing the image quality, as this algorithm doesn’t tinker with image pixels or colours. So, by using a lossless image compression, we can make an image file smaller, but not by much.
Now let’s come to “lossy” image compression. With lossy compression, it does everything that lossless does but on top of that use complex mathematics and algorithm to check each pixel of the image to see how much pixel and colour it can remove from the image without degrading the image quality too much, especially when the viewer is viewing the image from a distance instead of zooming all in. As this approach of image compression takes out data from an image to make it smaller, you can expect a huge compression for your images, but there will be some quality loss which is unnoticeable when you see the image from a distance, but if you zoom all the way, then you can see it. Anyhow, a lossy image compression is always the best path to take when you are optimizing images for a website, as most people will look at that image for less than 1-2 seconds.
Cost Problem with Lossy Image Compression
Though lossy image compression is truly awesome and it can cut a lot of valuable bandwidth from your images, the main problem with lossy image compression is that as stated earlier to use lossy image compression, your image must need to be processed via some advanced and complicated algorithm which takes a lot of compute power. This is why you will see that almost all of the WordPress image optimization plugins will give you a free lossless image compression option but when you want lossy image compression, you need to purchase some API and pay per image basis. So, lossy image compression is way more expensive than lossless image compression.
Problem with WordPress Image Optimization Plugins
The main problems with WordPress image optimization plugins are how they work and the cost behind it. When you install an image optimization plugin on your website, it generally asks you to run that plugin so that it can analyse and optimize all the images in your website. Now depending on what plugins, you are using, it may completely ignore all the images inside your theme and plugins and just look for the images in your upload folder.
Moreover, if you look at the core of WordPress image handling you will notice something. Inside a WordPress theme and plugins, a developer can decide what size of images he needs for various parts of the theme or plugins. Now when you upload a new image, WordPress will keep that image you have uploaded and on top of that crop that image many times as per the many requirements from themes and plugins.
On top of that WordPress itself has some default cropping size. So, even if you are not using a theme or plugin, WordPress will still crop each image to those default sizes and will also keep the full-size image you have uploaded. This is why you might have seen that one image you upload on your website can become 10 or 20 images inside your upload folder based on what theme and plugins you are using. Now, this is a great feature and technique that WordPress uses to ensure the images are right sized and no extra data gets wasted and we love it for that but the problem is how image optimization plugins handles them.
When you run an image optimization plugin, it will check all the images, including these cropped versions created by WordPress and then try to optimize them all. Please note that this operation is happening on your web server, so it is increasing load on your server and eating your bandwidth. Moreover, if you are using the free “lossless” image compression, then each image is getting optimized on your server using some PHP library and this is increasing your server load to the sky and even slow down your website tremendously during the operation.
If you opt for a paid “lossy” image optimization approach, then these plugins will ask you to go on their website and buy some API key where you will be charged on usage basis. Then again at the time of running the image compression plugin, it will consider each cropped version of an image to be an actual image and it will be counted against your API. So, if WordPress generated 10 versions for 1 image for your website, you might end up paying for 11 images when you optimize 1 image of your website.
Moreover, despite the lossless optimization happen on the provider’s server instead of your own server, there is still a request/response back and forth happening which is going to use your server resource but not as much as lossless compression.
So, as you can see this approach can easily increase the cost of image optimization for any size of website. We have seen client’s paying more than 500$ for just image compression API usage. Ask yourself, does all the images needed to be optimized? If you have an image for which you just use one crop version and don’t use the rest crop versions or the full-size images, then why would you optimize them and pay for them? This is the exact question we asked ourselves as we hate to see our clients’ money gets wasted.
Image Optimization Services We Use
As stated earlier we do not use any WordPress plugins to optimize images, instead we use either ImageKit or Cloudflare to optimize the images on the fly only for the images which needs optimization. As these are not WordPress image optimization plugins, almost no work happens at the server level and instead all the optimization happens on the fly when a user request for an image.
Both ImageKit and Cloudflare works as an image CDN, providing you the image from your nearest node instead to travelling all around the world and fetch each image from the web server. When you request for an image via these CDNs, these services optimize the images on the cloud and send you the optimized version of only those images your browser has requested, stopping the waste of optimizing all images regardless of whether you use them or not.
Moreover, these services will check if you are using a modern browser and if you do, they will send you the images in future ready version like WebP which is even smaller than the conventional JPG, PNG or GIF. Also, as this is a web-based image format, browsers can parse them much faster. All of these things happen without a need for you to do any special customization on your website.
Also, these services do not charge you on number of optimized image basis, instead they charge for the bandwidth you have used for the image CDN.
Choosing Between ImageKit and Cloudflare Image Optimization
We decide which image optimization service to use based on the bandwidth usage for a client website. If it is a small website and doesn’t have a huge bandwidth requirement, we go with ImageKit as they have a very generous free tier, where the clients don’t have to pay a penny. But when the bandwidth demand increases, we mostly recommend Cloudflare professional plans to our customers as with Cloudflare pro, just by paying 20$ per month, you can have unlimited bandwidth and image optimization.
But ImageKit does provide some extra features which Cloudflare doesn’t. Like ImageKit has a feature where the service will check the internet speed of the visitor and if the visitor is accessing your website from a really slow network like 2G, you can provide a lower quality image which are much smaller in size to them so that the website loads faster even if you are using a slow internet.
Though we really appreciate all the hard work the WordPress image optimization plugin developers put on their plugins, but using an external service is always cheaper as they will not only cost less but also reduces the load on your server while giving you images in future ready format. Let us know what do you think about this? Do you use any image optimization plugins, if so, then why? We would love to discuss more about this in the comment section below.