Appropriate Image Format for Website/Blog | JPG, GIF, PNG, WEBP

1
77
views

This article will focus on the formats of JPEG, GIF and PNG, as well as two other, more modern formats. Most web developers learn to use this or that format by trial and error, while earning valuable experience. However, almost no one understands exactly how each of these formats works.

The material in this article will help you navigate what compression algorithms each of these extensions are using, and understand what types of images each of these formats is suitable for.

JPEG

This format has passed the test of time, since it appeared in 1992. Compression of this format is as follows. First, the image from the RGB color space (from English “red”, “green” and “blue”) is converted to a YUV space, which is based on the brightness and chroma characteristics; This space is closest to how a person perceives colors. Then the image is divided into 8×8 pixel blocks, and each block is decomposed into color components, the frequency of which is then calculated. Speaking from the point of view of mathematics, it turns out that such a compression carries the image from the spatial domain to the frequency domain.

In a sense, such a compression allows you to discard some information about brightness and colors. What part of the information will be removed directly depends on the quality of the image that you want to get in the end.

From this we can conclude that the best format is suitable for compressing halftone images: images with a huge number of colors and soft transitions between them. In other words, JPEG implies that your image will somehow resemble a photo.

But for images with sharp edges and detailed textures, JPEG, on the contrary, does not work: clear faces will be erased, and the image as a whole will be blurred.
Below you can see an example of JPEG images:

GIF

At the dawn of the Internet, if the image was not a JPEG format, then it was a GIF format. GIF uses the LZW algorithm (Lempel-Ziv-Welch – Lempel-Ziva-Velcha algorithm) for compression, which is much simpler than JPEG compression technology. In fact, this algorithm scans the image data and creates a short code for those sections that are repeated. Therefore, GIF is suitable for compressing images that consist of identical or repeating parts. These are images with clear shapes that have only a few colors with sharp boundaries between them. It is these images that can be compressed with GIF most efficiently and without loss.

Despite the fact that GIF is a fairly simple format, it has a couple of interesting characteristics – it’s transparency and animation.

But to compress images with a variety of shades, GIF does not work: this format supports only 8-bit color, that is, a maximum of 256 colors in one image. So if you decide to compress with the help of GIF image with a wide color palette, you can eventually get a posterized image with a significant drop in the depth of color, which will look awful.

Example of images in GIF format:


Summarizing, it can be noted that JPEG and GIF have their strengths and weaknesses. During the inception of the Internet, these were the main formats used. However, later some enthusiasts decided to try to create a new format for image compression without loss.

PNG

The development of PNG began in 1995, and a year later it could be used as a fully-fledged network format.

Since PNG was conceived as a replacement for the GIF format, it significantly exceeds its predecessor in its capabilities. For example, PNG has the following advantages:

  • No restriction in 256 colors;
  • Support for the alpha channel (thanks to this, the effect of partial transparency is achieved);
  • Excellent compression (in all cases with rare exceptions).

See how well PNG compresses a multi-colored translucent image, you can lower it:


So why does PNG compress images better than GIF? This is due to new compression algorithms.

In particular, using string filtering, PNG gets much more convenient data for compression: there are 5 different prediction filters, the values ​​of each of which are selected in such a way that the total weight of the image is the smallest. PNG assumes that the adjacent pixels are similar, and if this is the case, PNG saves the data by recording the difference between the predicted value and the actual value.

Thus, the PNG format, for example, effectively squeezes vertical single-color areas (while GIF compresses only horizontal areas).

However, going back to the beginning of the article, it should be noted that in the case of PNG photos, it behaves better than GIF, but still worse than JPEG.

Next-generation formats

JPEG, GIF and PNG are common and universal formats that web developers can use everywhere. However, new formats of images appear, which also have interesting features.

WEBP

This format appeared in 2010, it was created by the corporation Google. WebP uses the WebM multimedia format architecture.

The compression algorithm is similar to the one that uses PNG: one of the sixteen existing prediction strategies is applied to each block. Thanks to this, flexibility is achieved in storing images, both graphic and photographic.

Since this format belongs to Google, at the moment it is supported only by Chrome and Opera.

JPEG-XR

JPEG-XR was developed by Microsoft. Like all similar formats of the new time, JPEG-XR has significant compression advantages over the traditional JPEG format:

  • Lossless compression;
  • More productive compression with losses;
  • Support for an alpha channel with partial transparency.

As in the case of WebP, JPEG-XR is a more complex, efficient and less supported format than its predecessors. At the moment, JPEG-XR is supported only by Internet Explorer and Edge.

Using Future Formats Today

Despite the fact that new formats are not yet supported by all browsers, you can use them on your site right now.

The new version of the markup language allows web developers to post the same image in several formats in order for browsers to decide which to upload. The code will look like this:

<picture>
<source type=”image/webp”
srcset=”sun.wepb” />
<source type=”image/vnd.ms-photo”
srcset=”sun.jxr” />
<img src=”sun.jpg”
alt=”A beautiful sun” />
</picture>

 

Another way to display different images for different visitors is to make sure that the client side rather than the server part is responsible for information output. In this case, different pictures will be shown to different users at the same address.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here