Gif,jpg (JPEG), png,webp,base64 picture format comparison

For the Web front-end development of students, picture preservation format is very important. So how to choose the format of the image saved? Below I summarize the difference of picture format such as Gif,jpg,png.

GIF is an image format that is applied very early. It uses the LZW compression algorithm, the LZW algorithm is to replace the long string with a short string method to achieve compression. GIF support animation, support transparent, support gradient color, GIF is lossless compression, and GIF is horizontal compression, that is 10*500 picture compression effect than 500*10 picture. However, the shortcomings of GIF is quite obvious, that is, it only supports 256 colors, so the color-rich image compression effect is not good. According to these features of GIF can be summed up: small icons, color-rich images suitable for compression to GIF format.

JPEG represents joint Photograhic Experts Group (Joint Photographic Experts Group), which is often written as a jpg,jpg image with the extension jpg.

The advantage of JPG is that it supports millions of colors. JPG is a lossy compression method that discards some of the details of a picture. Therefore, if the quality of the picture is not very high, you can use JPG to save the way. Then according to the characteristics of JPG summed up: color-rich photos suitable for the preservation of JPG, not suitable for small icons, lines of pictures.

PNG is a picture format introduced in the 1990s, which uses lossless compression. Its purpose is to replace GIF. PNG is divided into png8,png24,png32. These are the main differences between storage methods.

The PNG8 is only 256 colors and supports transparency (either fully transparent or opaque).

Png24 colors are many, but transparency is not supported. And the Png24 exported in Photoshop is actually png32.

The PNG32 has a 8-bit alpha channel, so it supports the setting of transparency.

WEBP is a graphic format that Google has developed to increase the speed of image loading, which is compressed to a size of about 2/3 jpg. But WEBP currently only supports browsers such as google39+,safari+.

　　

Gif,jpg (JPEG), png,webp,base64 picture format comparison