Get Started
Get Started
February 28, 2023

What’s Image Compression and How it Works

Compressing images has many performance benefits for your website. Images draw attention and trigger emotion in your visitors. They are essential in a marketing strategy but must be optimized for the web. This guide explains everything you need to know about image compression, how it works, and the several ways you can compress your images. It will help you find the right balance between compression and image quality so you don’t compress images more than needed.

What’s Image Compression?

Image compression means converting an image file to take less space than the original file. It aims at reducing its size in bytes without degrading the quality of the image too much. 

Image compression summarized - Source: Imagify
Image compression summarized – Source: Imagify

Lossy vs. Lossless Compression 

There are two main types of compression: lossy and lossless. 

Lossy means that your image will “lose” some data, such as the number of pixels or colors. This loss is usually not noticeable to the naked eye and is enough for the web. 

However, if you plan on printing a large format of your photo, then you may go with lossless compression. You can simply convert the file from the raw format on your camera to JPG or PNG, saving space without impacting your file’s quality. 

Lossy vs lossless image compression – Source: Imagify
📖Learn more about the types of compressions in our guide dedicated to lossy vs lossless compression.

Next-gen Formats and Compression 

Compression can be made by converting images to next-gen formats such as AVIF or WebP.

Created by Google, WebP is a modern image format that provides superior lossless and lossy compression for images served on the web. Thanks to WebP, developers can create smaller images while maintaining the quality. According to Google, WebP lossless images are 26% smaller than PNGs.

Does Image Compression Reduce Quality?

Image compression slightly reduces quality, but this change is usually invisible to the human eye. There are no disadvantages to image compression, it’s a performance optimization process that is definitely on your side – when it’s done with the right tools.

Here’s an example below of an image compression properly done: the file got smaller while preserving the quality. We can’t even tell which one is the original and which one is the compressed one: 

Quality is almost unchanged after compression – Source: Imagify

On the contrary, if the software you use overly compresses the image, you’ll lose quality and impact the user experience. You must ensure you have selected both the right settings and compression mode. 

Overly compressed image - Source: Imagify
Overly compressed image – Source: Imagify

Why Compressing Images Is Important

The main benefit of compression is that it takes less time to render on a web page. Compressing your images is crucial to ensure your website performs well and provides an optimal user experience. 

PageSpeed Insights – a tool powered by Lighthouse that measures performance – provides an audit with technical recommendations to optimize images and make a web page faster. To have a fast website, lighthouse recommends that images should be compressed in 2 main ways:

Two PSI opportunities about image compression: Serve images in next-gen formats and efficiently encode images - Source: Imagify
Two PSI opportunities about image compression: Serve images in next-gen formats and efficiently encode images – Source: Imagify

How Images Affect the Core Web Vitals

By addressing the suggestions presented above, you will keep a good page speed load and maintain the Core Web Vitals in green. The KPIs below measure the user experience of a web page, and unoptimized images can negatively impact them:

  • First Contentful Paint (FCP): It measures the first text and image elements displayed on the screen. You want a compressed image to render it as fast as possible.
  • Largest Contentful Paint (LCP) – Core Web Vital: It measures when the main content has been loaded (e.g., the hero banner – usually an image).
  • Content Layout Shift (CLS) – Core Web Vital: The goal is to avoid any sudden movements in the layout. This happens when you are serving a too-large image that needs some extra time to be rendered. 

Those KPIs could be in the red by Google if you serve large images. As a result, the SEO ranking will also be impacted as search engines prefer to show results of faster websites (for the same content quality).

How Does Image Compression Work?

When an image is compressed, some of the redundant technical data, such as colors or pixels, are removed to reduce the file size. In the figure below, you can follow all the steps of compression, from the color transformation to the quantization (filtering). The main idea is to trim the “less important” information belonging to an image to make it smaller without altering its visual aspect.

Image compression technical steps - Source: Image-engineering
Image compression technical steps – Source: Image-engineering

Running all those algorithms manually would be very difficult and time-consuming. Thankfully there are powerful tools available to help you compress images: image compressors. 

What Are Image Compressors?

Image compressors are software, online tools, and WordPress plugins that reduce the image’s file size while preserving high quality. An image optimizer tool allows you to compress the most popular image file types, such as JPG, GIF, and PNG, to prepare your image for the web. 

For instance, Photoshop, Lightroom, and Photopea are well-known design software that let you compress your images during the export. The downside is that the quality is generally impacted to get a small file size. 

Reducing the quality to 15% to get a low file size - Source: Photopea
Reducing the quality to 15% to get a low file size – Source: Photopea

Then, there are also image compressors amongst WordPress plugins such as Imagify. Those plugins allow you to optimize and compress your images directly within the WordPress dashboard:

Compressing Images in bulk directly on WordPress – Source: Imagify

When compressing images with a WordPress plugin, the process is fast and efficient. We present the optimization results in the next section and take Imagify as an example. 

How To Compress Images With Imagify (With Performance Results)

Imagify is an image compressor plugin with powerful optimization features, resulting in improved performance and a better Page Speed Insights (PSI) report score. It’s easy to use, and the compression can be done directly from the WordPress admin. 

Smart Compression Mode

Imagify has a Smart Compression mode that compresses the image to its maximum and scales back up the compression level until it finds the perfect balance between file size and quality. 

Original vs compressed image using smart compression mode: quality of the image is not impacted  - Source: Imagify
Original vs compressed image using smart compression mode: quality of the image is not impacted  – Source: Imagify

Straightforward Compression Process: Bulk or Single Image Optimization in One Click

To compress images with Imagify, you can press the bulk compression button (1) from Imagify’s WordPress admin or optimize them one by one from the WordPress library (2). 

Bulk compression and single image compression with Imagify – Source: Imagify

WebP Conversion

During the compression process, Imagify converts your images to WebP, allowing them to become even smaller while retaining quality.

Converting images to WebP to make them even smaller - Source: Imagify
Converting images to WebP to make them even smaller – Source: Imagify
🔊 Important to note: as of March 2024, Imagify also converts images to Avif, the other next-gen format recommended by Google to make your images lighter.

Good Value for Money

You can compress 20 MB for free every month with Imagify. After that, you can choose between two affordable paid plans: only $9.99 per month for unlimited data or $5.99 per month for 500 MB.

The Impact of Image Compression on Performance

We have tested the following metrics before and after the optimization with Imagify:

  • Image file sizes (Imagify)
  • Total Page Size (GTMetrix)
  • Core Web Vitals (PageSpeed Insights)
  • Serve images in next-gen formats and Efficiently encode image warnings (PageSpeed Insights audits)

Imagify’s compression reduces image file sizes.

The first impact of Imagify’s compression is the significant file size reduction. The image we tested went from 1.6MB to 87KB. That’s a 88% savings! Imagify also generated the WebP format.

Compressed image – Source: Imagify

Here’s another compression result with a PNG image. Imagify optimized 95.94% of the file size. It went from 1.90MB to 79.15 KB:

Compressed image at 95.94% - Source: Imagify
Compressed image at 95.94% – Source: Imagify

Although the image has been compressed to 95.94%, the quality has been preserved.

Original vs compressed image with Imagify: same visual quality – Source: Imagify

Imagify makes the Core Web Vitals green on mobile.

Core Web Vitals improved with Imagify and optimized images - Source: PSI
Core Web Vitals improved with Imagify and optimized images – Source: PSI

The Core Web Vitals and other PageSpeed Insights metrics were orange and red before compression:

Core Web Vitals without Imagify - Source: PSI
Core Web Vitals without Imagify – Source: PSI

Imagify fixes the image-related issues on the PageSpeed Insights audit.

Passed audits - Source: Imagify
Passed audits – Source: Imagify

For reference, this was the PageSpeed Insights audit before applying compression with Imagify:

Before compressing images with Imagify - Source: PSI
Before compressing images with Imagify – Source: PSI

Imagify reduces the overall page weight from 3.93 MB to only 822 KB. The number of HTTP requests also decreased from 67 to 15. 

Total Page Size reduced after compressing images with Imagify - Source: GTmetrix
Total Page Size reduced after compressing images with Imagify – Source: GTmetrix

If you’re curious, the total page size before compression was 3.93MB, and images occupied 2.06MB of the total weight. 

Before compressing images with Imagify - Source: GTmetrix
Before compressing images with Imagify – Source: GTmetrix

Image compression can make your speed loading faster and improve the user experience when done properly. Start your image compression journey with Imagify! Before installing the plugin on your WordPress site, you can use the web app for free

Imagify, decrease the size of your images, increase the speed of your website: try it for free
Comments 0
Add Comment

Ready to optimize
your image?
Sign up for free in few seconds