Just a quick note, this article is based on my own understanding, so my input might be limited if there is anything I leave out of this article please comment, so I can improve on it more. Also will be adding resources were necessary for further research.

For this article I will focus mainly on images, videos will come later as I look into more including video delivery.

What is compression?

Compression is the process of reducing file sizes and changing various attributes of media example an image/video.

Some of the attributes affected by compression are:

• file type i.e. jpg, png, wav, mp4. more
• resolution i.e. 480p, 1080p, 720p, 4K. more
• dimensions i.e. 640x480
• bit depth i.e the number of bits to indicate color in a single pixel. more

There are two types of compression, lossy and lossless.

Lossless

Lossless compression means as the file size is compressed, quality is not taken into account, and the file can be compressed to retrieve the lost data from the compression.

There are a number of image file formats that offer lossless compression the common one being Portable Network Graphics (.png). Others include Bitmap (.bmp)(by Microsoft).

Lossy

Lossy compression means as the file size is compressed, there is a loss of quality, and data is lost permanently without retrieval.

The most common lossy image file format is the JPEG, and am pretty if you have used image compression software, the result is always a JPEG, these bad boys can be compressed to bits I tell you, its the reason why some sites restrict uploading or recommend uploading JPEG, example Spotify Playlist cover restricts to JPEG only.

There are also file formats that also do both lossy and lossless, they are the hybrids of image formats. These are:

• WebP (.webp) -> by Google
• AV1 Image File Format (.avif) -> by Netflix

You might be wondering, how are these file formats able to achieve both types of compression, well they do so because of their ability to use an alpha channel(transparency for UI and design elements) - more.). These file formats boast of high-quality images with smaller file sizes.

Source

Before you go jumping into using this hybrid file formats you have to know they support is not that great especially .avif because it's fairly new and as for .webp I think is not supported in Safari, so rushing to use them you might lose potential users of your product due to accessibility.

You might use AVIF soon as more and more developers are jumping into it by the day increasing adoption.

Lossless Compression Disadvantages?

• The resulting compression have large file sizes

Which File Format Should I Use?

• Well both lossless and lossy file formats are needed in certain situations example if your product needs to showcase high-quality images then lossless compression is the way to go and expect longer load-times.

Read More

• The Math and Technology Behind AVIF

• About WebP

Follow me on Twitter @wachira_dev