In general, a website contains a lot of images (Imagine that in 2019, images represent about 50% of the bandwidth on the web) and you may have read or heard that it is good practice to optimize the images on your site. But in concrete terms, why should you make the effort to reduce the size of your web images (compress them)? So let us tell you right away, image compression is a very important part of website optimization and we will explain why in detail in the following article.
This article explains how to compress your images to optimize their weight, I also wrote an article that explains how to optimize the dimensions of your images according to the size and type of screen.
What is an image and what should be optimized?
There are several different image formats (raw, jpeg, png, gif…) and what differentiates them mainly is the amount of information that each type of image contains. Imagine that you take the same image in raw, png or jpeg, you will notice that the raw file is much larger than the png and jpeg. This is because the raw file contains a maximum of information about the image to allow photographers to edit their photo while giving them a maximum of possibilities. Moreover, photographers use photo editing software to work on raw files and export the result to jpeg or png.
The jpeg and png are compressed image formats that are much less informative than the raw file, and are therefore less heavy (the weight of the image in Mb is reduced). This type of image is therefore already much more suitable for display on a website. But often these image formats still contain metadata (date, technical characteristics of the photo…) and information that is not necessarily essential for photos on the Internet.
The idea for images intended to be put online on websites is to reduce the weight of the image as much as possible while maintaining sufficient image quality so that the human eye does not make a difference.
3 reasons to compress the images on your site
It’s nice to explain that there are different types of images, but why is it better to reduce the size of your photos on your website:
- To improve the loading speed of your site: Each image displayed on a web page must be downloaded by your browser. And of course the lighter the image file, the faster the download will be. As Internet users nowadays expect to have web pages that are displayed faster and faster, this will improve their browsing experience and encourage them to stay on your site longer.
- For search engine optimization (SEO): What is good for Internet users is also generally good for Google (which seeks to give the best search results for them). It is therefore quite natural if a site loads slowly, it is a little penalized by google. By compressing your images, you will improve your loading speed and probably your referencing at the same time.
- To reduce the storage space on your server: The storage space you use at your host is not free, so you might as well optimize it a little by reducing the size of your images.
Optimize images without loss or with loss of quality
What does that mean with or without loss of quality? Imagine that you have just taken a very nice picture with your camera in raw format (the image may weigh around 25Mb), you edit your picture with your favorite software and export it with a nice quality in jpeg format. You will notice that your image is now less heavy (maybe 5-10Mb) but it may still contain information that is not useful for displaying on the Internet (like metadata such as dates, gps coordinates, technical characteristics of the photo…).
Optimizing images without loss of quality means that we will simply remove all this information that is not essential without touching the pixels of the image: Basically all this non-essential metadata is removed but the images remain intact. As a result the quality is still perfect but you probably haven’t significantly reduced the size of the image (maybe 0-10%).
Optimizing images with quality loss means that in addition to removing metadata, we will also modify the pixels of the image to try to obtain the best weight/image quality ratio. The idea is really to reduce the weight of the image as much as possible without the difference in image quality being visible to the human eye (and with these techniques, the image weight can be reduced by up to 70-90%)
Why I advise you to compress your images with loss of quality
If you are a little interested in optimizing your website, you have probably already entered the url of your site in tools such as the page speed insight from google or the Pingdom tool. And even if you have already optimized your images without loss of quality, you will surely have noticed that these tools still advise you to optimize the size of your images. And why is that? Simply because these tools assume that it is now recommended to use image optimization techniques with loss of quality to make the web in general faster.
But I will reassure the photographers among you right away, optimizing images with loss of quality in 2019 does NOT mean making compromises on the beauty of the images. There are tools with very powerful algorithms that drastically reduce the weight of your images without you being able to make any difference (at least in my opinion). If you don’t believe me, I’ll let you test it yourself, but here are the best tools to compress your images for the web.
WordPress plugins to compress your images
I will focus here on wordpress plugins that allow you to automatically optimize your images. These tools also allow you to optimize images directly but installing a plugin simply ensures that all the images you use on your site are optimized for the web (it’s always that much less to think about no? 😉 ). However, to achieve high image compression and good quality, the tools available are not free.
Since I have been using WordPress, I have tested several image optimization plugins, but I think 2 of them really stand out:
Ewww Image Optimizer : It is one of the first plugins I used to compress images and I installed it on most of the wordpress sites I develop. This plugin allows you to do the optimization for free without any loss of quality. It also allows you to optimize all the images already existing on your site, to define folders to optimize outside your upload folder, to define a maximum weight for images etc… This plugin is very flexible and robust and I have never had a single problem using it.
For compression with quality loss (which I really recommend), ewww image optimizer uses TinyPng in the background (one of the best image optimization tools) to produce superb images visually but reduced in weight by 70-90%! After processing your images with ewww, the google speed insight page will no longer complain about the size of your images believe me 😉 . The price per image for compression with quality loss is 0.003$/image which makes 15$ the 5000 images (the first 500 images are free)
See ewww Image Optimizer wordpress plugin
ShortPixel : I discovered the shortpixel plugin quite recently by doing image optimization tests because I got a higher image compression for the jpeg image format than with ewww (it is the only tool that gave me smaller files than ewww for an image format). On the other hand, when comparing the quality of the images produced, I found that their “lossy” compression was too aggressive and that the degradation of the image quality was too important for me. But their “glossy” compression produces pretty images (a little less beautiful than ewww but the files are a little smaller) and could be a good solution. Their plugin is also very intuitive, flexible and will allow you to do the same thing as with ewww image optimizer (the price per optimized image is also a little lower than for ewww… it will cost you $5 for 5000 images with 100 free images per month to start).
See ShortPixel wordpress plugin
Important: when you add an image to wordpress, you will optimize 5-6 images each time because wordpress creates several copies of different sizes of your images at the time of upload.
If you don’t know which plugin to choose, you can compare the compression obtained with ewww on the TinyPng website and that of ShortPixel with one of your images for free. But to help you a little more, here is an example of an image with the different types of compression offered by these two programs.
So in my opinion, the lossy compression of ShortPixel is too aggressive and degrades too much the image quality (despite the 119kb weight obtained)… I would say that the best weight / image quality ratio is obtained by the “Maximum lossy” compression of the ewww image optimizer software (250kb) closely followed by the “Glossy” compression of ShortPixel (256kb). In both cases, we certainly see a small difference in the sky but it is really minimal and the quality is acceptable to my taste. For an absolutely perfect result, the “lossy” compression of ewww is what you need but the image size remains at 390kb.
So as far as I’m concerned, I’m going to continue to test the Shortpixel software for a while because the price of image optimization is quite interesting ($5 per 5000 images) and if the plugin is robust, it’s a serious competitor for ewww image optimizer. But otherwise, ewww’s Maximum lossy compression is excellent and I’ve never had a single problem with this plugin.
EWWW image optimizer has updated its compressions and now offers pixelperfect plus, premium and premium plus compressions. As I have planned a complete review of this plugin, I will soon talk about it in more detail.
Version 5.3 of WordPress also introduces a lot of changes in the handling of big images. I wrote a complete article on this topic here.
Here, you now know a little more about the topic of image optimization for the web. In my opinion, the use of a powerful tool to reduce the weight of your images is very important (while keeping a beautiful image quality) and I really advise you to try one of the 2 tools I presented above.
But even if you have optimized images on your website, this does not necessarily mean that your site displays the smallest possible image depending on the size and type of screen used by Internet users. In this article, I also addressed the not so simple question of adaptive images.
NB: This article contains affiliate links to ShortPixel and Ewww Image Optimizer sites. By using our links you don’t pay anything more, but we will get a small commission.
Ewww Image Optimizer is the tool we use on a daily basis on all our sites and for which we also pay for the compression of our images. We do not use ShortPixel but we have tested it in detail to offer you this comparison.