Front-end image format selection, when should I use JPG, PNG, WebP or SVG?

When developing the frontend, whether it is a web page or a mobile app, it is very common to use images.

However, there are many image formats that modern web pages can choose from. When should I use JPG, PNG, SVG or WebP?

This is a common question in front-end interviews. Let us quickly understand the differences between these formats, and which format to use under what circumstances.

To make a choice among the above image format, we can first classify the above formats into two categories: raster image and vector image.

• JPG, PNG, and WebP belong to the raster image, which is an image composed of small dots and small pixels.
• SVG is a vector image, which is an image drawn by a mathematical formula.

Raster image

JPG and PNG are raster image, in other words, they are made up of small dots of pixels. The difference between the two is that

• JPG is a lossy compression, in other words, the quality of the image will be reduced during compression, and it is irreversible.
• PNG is lossless compression, which does not affect the quality of the image after compression, but the file size will be larger than JPG. At the same time, PNG can have a transparent background.
• WebP is a format published by Google in 2010. It is also a raster image. It can be lossy or lossless. Its characteristic is that the file with lossy compression is smaller than JPG, and the file with lossless compression is smaller than PNG.

PNG, JPG or WebP which one should I choose?

If you don’t care much about the image quality, then JPG will be better because the file size is relatively small; but if you don’t want to affect the original image quality, or if you need to revert the image back, then PNG will be more suitable than JPG.

Of course, almost all modern web browsers support WebP, so no matter what the situation is, choosing WebP can make the file smaller. In other words, it can be transmitted faster. Therefore, compared to PNG and JPG, WebP is recommended in most cases.

Bonus question: Alternatives to GIF

The raster image was mentioned above, but if it is a raster animation, in the past, it would be intuitive to think that the GIF format is the one to be used.

But in addition to GIF, WebM is also an option in modern web. Compared with GIF, the file format of WebM is smaller, so the transmission speed will be faster. Currently, most web browsers support this format, so it is a good choice.

Vector image

Vector images are not composed of small pixels. It is calculated based on mathematical formulas and algorithms.

The advantage of being calculated is that when the vector image is enlarged, it will not be distorted, and it will not be blurred into little dots like the raster image. SVG is one of the most common vector graphics.

Raster image vs Vector image

After analyzing the raster and vector image above, the next question to discuss is "When should I choose which one?"

If the image has various colors and shapes, such as a photo, then it will be suitable for raster image, because if you use vector images to present this kind of picture, the file will become relatively large.

However, if the color in the image does is not too complicated, you should choose a vector image, because in this case the file of the vector image is usually relatively small. In addition, vector image is also recommended when you want the image to be placed in a large size without blurring. For example, for logo or icon images, generally vector image such as SVG would be a good choice.