Squeeze it gently

Do you know that the image is compressed on the site? Moreover, it is compressed either with loss in quality or without loss.

Let's figure it out?

Imagine that you are developing websites. With lossy compression, some of your data will be lost forever. Lossy compression permanently removes image data and degrades the image in the process.

Sometimes there is nothing to worry about, since the human eye cannot even perceive some additional details.

Lossless image compression saves all the necessary data to faithfully recreate the image.

Ideally

Ideally, your image will first go through a lossy compression phase and then a lossless phase where what's left will be optimized.

So, the image formats that we will need when developing a website:

JPEG

JPEG uses lossy compression to keep the file size small.

It has a cool advantage: you can adjust the compression ratio from 0% (high compression) to 100% (no compression).

Note: Compressing an image at 75-100% will keep the image quality high, but at 75% the image will be half the size of 100%.

PNG

The superpower of PNG is that its algorithm compresses the image without loss. PNG preserves fine details in images, even when it comes to text. Face it - thanks to this super power, PNG file sizes are much larger compared to other formats.

Oh, to combine JPEG and PNG!

However… Google thought about it first and invented WebP.

WebP

Giants like YouTube and eBay have already started using this format to improve site performance.

There are two kinds of WebP images.

WebP uses lossy compression. A kind of WebP JPEG.

The second variation is called WebP Lossless and is similar to PNG.

Both types of WebP produce an image that is much smaller than their JPEG and PNG counterparts. On average, WebP images are 25-34% smaller than comparable JPEGs and 26% smaller than PNGs.

As you can see, file compression is not such a difficult issue when it comes to website development.

Follow us on : or