Understanding Image Compression Algorithm: How Do They Work?

High-quality & well-optimized images are vital to surviving in today’s online world, and why not? Images are the first thing visitors notice about our brand or get attracted to. They are essential to buyers’ decisions and affect a website’s page loading speed. 

‍

Nowadays, the internet is flooded with super-quality & high-definition images being used by various businesses or photographers to give a captivating & stunning look to their brand’s product. 

‍

But at the same time, they are larger in file sizes, which takes up a lot of server space and leads to slow-loading web pages. Ultimately, visitors abandon a web page due to poor experience, hurting our ranking on SERPs. It is where the concept of image compression occurs.

‍

‍Page speed is a determining factor for improved rankings on Google which gets disrupted by heavy image file sizes. Optimising bulky images helps us resolve these issues. Let’s understand image compression and its techniques in detail:

‍

What is Image Compression?

Image compression is a useful way to compress or reduce the size of images to help manage storage space and accelerate the speed of data transmission. In simple words, image compression involves converting an image file size to achieve less space on the server than the original ones.

‍

It reduces the file size in bytes without hurting images’ quality so that they can be stored in a given amount of disk or memory space. Various image compression algorithms are available that help compress an image to the smallest minimum size possible while retaining quality, such as Lossy & Lossless Image Compression methods. 

‍

An encoder performs the process of compressing an image. When image size is reduced, some inessential technical data like colours or pixels are removed to decrease the file size. The main idea is to cut out the “less critical” image data belonging to an image to make it small enough without compromising on its visual aspects.

‍

Does image compression reduce quality? The process slightly reduces quality, but this change is generally ignorable by the human eye. The ultimate goal of image compression is to make it easy to store, transmit, and display images without sacrificing the image’s visual aspects. 

‍

Why Are Compressing Images Important?

The main benefit of running image compression algorithms is ensuring it takes less space on the web host and boosting the website’s loading speed whenever a visitor opens any web page. Compressing images is vital to ensure your website is optimised to perform well and provides an optimal user experience. Here are a few reasons for establishing the value of image compression:

‍

• For website optimisation: Websites with bulky images can take longer to load and cause high bounce rates. 

• To decrease the amount of data being transmitted

• To save storage speed

• For sending and uploading images without the hassle.

‍

How Does Image Compression Work? A Comparison Between Lossy And Lossless Compression

The methods or image compression algorithms used to compress image file size fall into two categories:

• Lossy Compression

• Lossless Compression

Let’s understand each of them in detail:

‍

Lossy Image Compression

This type of image compression method reduces the image file size by removing some of the less critical data of an image, particularly redundant data. However, it doesn’t affect the visual appearance of images while uploading or sending.

‍

In simple words, though lossy image compression algorithms can significantly reduce an image’s file size, they can also slightly affect image quality, especially if the image is overly compressed. Quality is maintained by ensuring the right amount of compression levels. 

‍

Lossy compression works with a quality parameter to determine the change in quality. Generally, users are required to set these parameters. For example, if it is lower than 90, the quality of images would be tremendously affected and visible to the human eye.

‍

One of the main challenges of, let’s say, features of lossy compression is that it is irreversible. It means once the changes are applied to an image, the image cannot bring back to its original state.

‍

Moreover, if lossy algorithms are applied to an image multiple times, it degrades the quality to the level of distortion. Therefore, using lossy image compression algorithms is ideal for web-based platforms. 

‍

Pros:

• It provides a highly reduced image size

• Faster loading time

• Ideal for web-based platforms 

• Supported by a variety of tools, plugins, and software

‍

Cons

• Quality hurts due to the high rate of compression

• Removes image components 

• It is irreversible

‍

Lossless Image Compression

The other approach to image compression is known as Lossless compression. Lossless image compression algorithms resize an image into smaller versions but don't compromise the image quality. Simply, this method compresses images without eliminating critical data or reducing image quality. 

‍

More importantly, users can get compressed images that can be restored to their original state, unlike Lossy compression without degradation or distortion. Undoubtedly it is a great method to resize image files. The output may still not be too small as lossless compression doesn’t remove any part of an image.

‍

It offers few benefits regarding storage space, network bandwidth or download speed. This image compression tool is generally used when maintaining image quality is more vital than storage space or network performance or example, product images or artwork display.

‍

Pros 

• Retains critical image information

• Zero loss in image quality

• Changes are reversed

• Slightly decreases file sizes

‍

Cons

• Compression files are larger than lossy file

• Decoding is complex

‍

Lossy Vs Lossless Summary

When it comes to digital images, it is not only about taking pictures and uploading them to a server, folder or website. The optimisation is equally important; otherwise, bulky file sizes can disrupt the website’s speed and cause a poor user experience. Therefore, you must find the right compression tool for your images and files.

‍

• Lossy will help you save storage space but can affect image quality.

• Lossless retains image quality, thereby saving less space.

‍

Both lossless and lossy image compression algorithms have their respective advantages and disadvantages. Thus, you need to address multiple factors while picking one.

‍

Different types of image Compression Techniques

We know that image compression is a method used to reduce or minimise the amount of memory or data needed to be represented in an image.  We can use three image compression techniques: transform, predictive, and Hybrid coding. Let’s start with Transform coding:

‍

1. What is Transform Coding?

Transform coding is the most often used image compression technique. In this coding, the ultimate goal is to decompose, convert or transform the input data into a form where compression is easier. Simply put, it is a compression method based on modifying the data of an image. 

‍

Here, a reversible and linear transform is considered to create an image into a group of transform coefficients which are then quantised and coded. Due to its linear process, the number of coefficient groups generated equals the number of pixels. 

‍

DFT 

In this coding scheme, transforms like DFT (Discrete Fourier Transform) and DCT (Discrete Cosine Transform) are used to convert the pixels in the original image into frequency domain coefficients known as transform coefficients. These coefficients contain numerous desirable properties. 

‍

DCT

Discrete Cosine Transform (DCT) applies the measure of motion by observing how much image content converts corresponding to the number of cycles of the cosine in a block.

‍

It is a part of the encoding algorithms converting pixel values in an image block to frequency values that can be further transmitted with less data. It is lossless, avoids producing spurious spectral components, and has a fast implementation skipping complicated algebra. 

‍

DFT

DFT (Discrete Fourier Transform) is well-known for its spectral analysis and filtering connection. Due to the assumed periodicity of image blocks, it is unfavourable regarding storage, adjustment of complex quantities, and generation of spurious spectral components. 

‍

Transform coding is an image compression method that first switches to the frequency domain, followed by its compressing. These coefficients are then coded as precisely as possible not to lose information.

‍

2. What is Predictive Coding?

Image compression plays a vital role in digital multimedia by reducing or resizing the image file size. It helps save storage space and enables fast transition time. Predictive coding is the simplest image compression technique for encoding and decoding that works on lossless compression algorithms.

‍

It is an approach that delivers good compression without significant computational complexity and overload. Predictive coding can give favourable results with the help of compression ratio and time algorithm. 

‍

The coding technique is based on removing an inter-pixel excess of closely situated pixels by extracting and coding only the new information in each pixel. The new pixel data pixel is defined as the difference between that pixel's original and predicted value. Predictive coding means there will be a transmission of differences between the current and previous pixels. 

The predictor takes a pixel from the input image that is F(n) to predict a pixel's future value based on data from the past. It is generally formed by a linear combination of m actual pixels where m is the order of linear predictor. 

‍

1-D Linear Predictive Coding

In 1-D linear predictive coding, the m-sample is used to estimate the value of each pixel coming from the current scan line. In 2-D linear, it is used to estimate the value of each pixel coming from the current and previous scan lines.

‍

On the other hand, in 3-D linear, the m-sample is used to predict the value of each pixel coming from the current and original image from sequences of images. 

‍

3. What is Hybrid Coding?

Hybrid compression coding is achieved by combining lossy and lossless image compression algorithms to obtain a high-quality compression ratio while retaining the quality of the reconstructed image. The lossy compression technique generates a relatively high compression ratio.

‍

In contrast, lossless compression produces high-quality data reconstruction as the data are later compressed through the same results as before compression.  In simple words, hybrid approaches to image compression involve combining two or more traditional approaches to improve individual methods and gain better-quality reconstructed images with a higher compression ratio. 

‍

Hybrid coding was initially introduced on transform coding combined with predictive coding. Since then, numerous hybrid techniques have evolved: vector quantisation combined with Discrete Cosine Transform (DCT), VQ-based, Wavelet-based, ANN-based, etc. Every approach contains its merits and demerits. 

‍

What is JPEG Compression?

JPEG stands for Joint Photographic Experts Groups, and such image compression algorithms are performed to reduce the file size without hurting its quality. By resizing an image file size, we can store them in a huge amount which wasn’t the case before compression. Reducing the size of images also improves the system’s efficiency as there will be less load on it.

‍

JPEG is today the most widely used image format. It is a lossy image compression method that follows the DCT (Discrete Cosine Transform) method to transform codes. It balances storage size and the degree of compression controlled by care. 

‍

How does JPEG compression work?

Following are the steps of JPEG Image Compression. Take a look:

‍

1. The input image is divided into small blocks, each with dimensions of 8 x 8. The dimension is aggregated to 64 units. Remember, each unit of the image is known as Pixel.

2. JPEG compression deals with the [Y, Cb, Cr] model instead of the [R, G, B] model. Thereby, in this step, RGB is converted into YCbCr.

3. When the conversion of colours is executed, it is sent to DCT. DCT uses a cosine function instead of complex numbers. It converts the data in a block of pixels from the spatial domain to the frequency domain. 

4. The human eye cannot notice essential aspects of the image as they have high frequencies. After DCT conversion, the matrix can retain values at the lowest frequency at a certain point. Quantisation takes place to reduce the number of bits per sample. 

5. There are two types of quantisation - Uniform & Non-uniform

6. Through a zigzag scan, the 8x8 matrix is created into a 1x64 vector.  Zigzag scanning helps group low-frequency coefficients to the top level of the vector and the high coefficient to the bottom. It also eliminates the large number of zeros in the quantised matrix.

7. The next step is vectoring, where different pulse code modulation (DPCM) is incorporated into the DC component. These components are large and vary.

8. This step involves applying Run Length Encoding (RLE) to AC components as they have many zeros. 

9. After this, DC components are coded into Huffman.

‍

Advantages And Disadvantages of JPEG Compression

‍

There are several advantages of JPEG image format, including:

• High resolution is one of the notable pros of JPEG image formats. A JPEG supports 24-bit colour with up to 16 million colours. Even the resolution of digital images remains intact after applying high-level editing.

• Compared to other image formats like BMP, PNG, or RAW files, JPEG offers the advantage of compressing a digital image at a smaller file size. 

• Due to the JPEG’s size, the format enables more high-quality images in burst mode.

• JPEG is a widely accepted file format for editing or using smartphones, cameras, or editing software.

• The small size of JPEG images makes it the best storage option and online file transfer.

‍

There are a few disadvantages also using JPEG images:

• JPEG compression is a lossy compression technique. It means it loses some contents of an image after being compressed. 

• JPEG images do not support layered images. You might need to work extra on layered images to adjust and edit graphic images. 

• While shooting on JPEG, it may limit the colour variations.

‍

What is PNG Compression?

Stands for Portable Network Graphics, PNG is a lossless file format to reduce the file size of an image, i.e. while compressing, the image compression algorithms don’t hurt the image quality. Therefore, being a lossless technique is its biggest advantage, as there is no quality loss each time it is opened or saved again. 

‍

PNGs are popular for graphics, logos, and other easy designs as they support transparency, making them a top choice among other image formats. This image format supports either 24-bit or 8-bit colours.

‍

The higher the bit support, the more colours there are for that PNG, and the larger the file size is. If your website has a logo which is 24-bit PNG, it is taking up necessary space and disrupting your page loading time.

‍

Reducing an image to an 8-bit palette will decrease the file size without affecting quality. This way, you can have a smaller file consuming less space in storage, and your page will load slightly faster.

‍

How Does PNG Compression Work?

When exporting a PNG file, compression occurs in two steps: pre-compression (filtering) and actual compression (DEFLATE). The compression process is completely lossless, meaning there is no quality loss. 

‍

Step 1 - Filtering 

In the first stage, all the image pixels are passed through a lossless arithmetic transformation known as Delta Filtering or Filtering and, then, is further sent as a filtered byte sequence. The filtering process does not compress or reduce the file size of an image but makes the data more compressible. 

‍

Step 2 - Deflate Compression

The second stage is referred to as Deflate, where compression is applied. The filtered byte sequence is passed through the Ziv-Lempel algorithm (LZ77), generating LZ77 codes. It is a widely used algorithm for lossless data compression. The maximum size of the LZ77 in Deflate is 32768 bytes.

‍

Like any other compression technique, PNG compression depends on the statistics of the input data, including the PNG image type, delta filters, and the size of the Huffman buffers.

‍

Advantages And Disadvantages of PNG Compression

‍

Some of the advantages of PNG image formats include the following:

• It supports lossless compression

• Supports (semi)-transparency and the alpha channel.

• PNG supports a large number of colours. 24-bit RGB or 32-bit RGBA colours

• It is possible to work with layers

• Small size files

• Ideal for images containing texts, line art or graphics.

‍

Here are some of the disadvantages of using a PNG format:

• Bigger file sizes require more memory space

• Not ideal for printing

• It does not support animation

‍

Other Compression Formats

‍

What is GIF Image Compression?

GIF (Graphics Interchange Format) is a primarily used image format for animated and graphic images. People commonly use GIFs for small images like icons, logos, and easy animations. 

‍

Unlike JPEG, GIF is a lossless compression method, ie. No image data is lost while the file is compressed. It makes GIFs a good choice for images requiring high quality. It supports up to 8 bits per pixel, allowing an image to contain 256 distinct colours chosen from the 24-bit RGB colour space.

‍

For this, it uses LZW (Lempel Zev Welch) that removes inefficiencies in the data storage without losing data. The idea is to decrease the number of colours in a GIF image to the minimum.

‍

However, GIF images are larger than JPEG files, so they aren’t a good option for storing on the cloud or transmitting over a network. The format uses ".gif" or ".GIF" as a file extension. 

‍

What is TIFF Image Compression?

TIFF stands for "Tagged Image File Format" and is one of the most popular file formats designers, companies, and digital marketers use. Compared to JPGs, GIFs, and PNGs, TIFF image formats are different as they are uncompressed. 

‍

The format supports lossless image compression algorithms, meaning the original image quality is intact when compressed. You can open and save a TIFF file as often as possible without worrying about quality degradation. 

‍

TIFF files are widely used for high-quality printing purposes like magazines, newspapers, posters, etc., due to their ability to preserve quality after being compressed or resized multiple times. Additionally, they can be used for digital archiving as they support lossless compression. 

‍

What is WebP Image Compression?

WebP is a new-generation image file format that uses lossy and lossless image compression algorithms to reduce the image file size while maintaining its quality. WebP allows web admins and developers to generate smaller, high-quality images that make the web faster.

‍

Lossy Web image compression uses predictive coding to encode images, the same method used by the VP8 video codec for compressing keyframes in videos. The compression occurs through discrete cosine transform or DCT, which converts redundant data into residual zeros, which are removed.

‍

Lossless WebP compression uses a variety of techniques to transform images. Then, entropy coding is used on the transformed image data. 

‍

Factors To Consider When Choosing A Compression Format

Optimising a website for improved performance online takes various actions and approaches involving all aspects of a website, especially an image compression. The images we use are critical for improving SEO efforts. 

‍

Here are a few things you must remember while choosing a compression format. Take a look:

‍

Type of Image Format

Since images can be larger in file size, many image formats employ some type of compression, which decreases the file size by altering or removing data. 

‍

Suppose you are working on an image format that uses lossless compression. In that case, you will likely get images with slightly or not removed data from the image, resulting in a file that looks almost identical to the original one.

‍

On the other hand, if you use a format that uses lossy compression, your compressed images will completely lose certain information presented on them, making the size smaller. So, there is a tradeoff between image quality and file size.

‍

Colour Depth

It refers to the number of colours presented in an image and is displayed via bits, the smallest unit of binary measurement. The colour depth in an image can range from one bit to 24 bits, providing over 16 million different colours. 

‍

Remember that the more colours an image presents, the larger the file size. So, pick a compression method accordingly.

‍

Balance Between Compression Quality & Size

A low compression rate will produce the highest quality, while a very high compression rate results in a very low-quality image. 

‍

Conclusion

Now you know that image compression significantly deals with reducing or compressing an image’s file size to store them in a given amount of memory. Depending on image compression techniques, greater compression is applied to files where some loss is tolerated than with no tolerance for loss.

‍

No matter how fast the Internet gets or how strong the storage becomes, there will always be room for image compression. It should be noted that image compression algorithms are not one-size fits, and different algorithms are suited to different types of images.