Whenever you open a website, all kinds of pictures will be immediately displayed on the page. Whether it is the Logo of a website, the rotation area of the home page or the display of content, it is inevitable to use pictures as an important resource. The importance of pictures for today’s Internet is naturally self-evident. But there are many different image formats, such as GIF, JPG, PNG, etc. Do you know the difference between them? If not, read on.

Before we dive into the differences between different image formats, let’s take a look at the basics.

Image compression mode

Picture compression generally has the following three ways

  1. Uncompressed: An uncompressed image will retain all the data of the original image, so that the image displayed in this way is also the most restored, but because the image is not compressed, the storage size of the image will be larger.
  2. Lossy compression: Lossy compression is a kind of compression algorithm, this kind of image compression algorithm through the image data processing, discarding some of the data will not cause too much impact on the image display, to play a role in the image compression. The more data lost, the higher the compression efficiency, the corresponding picture display effect will also have a certain decline.
  3. Lossless compression: Lossless compression algorithms only lose some redundant data when encoding and compressing image data, so that the quality of the image before and after compression is almost the same.

Graphic type

Graphics on computers generally fall into two categories, bitmaps and vector maps.

  • A bitmap, also known as a bitmap, is a type of image made up of many pixels. When you zoom in on a bitmap, you see little squares one by one, and a little square is a pixel. When the bitmap is enlarged to a large enough multiple, you can see distinct pixels and the edges of the bitmap start to look like jagged edges.

  • Vector graph, also called vector graph. Unlike a bitmap, a vector map does not record every point of data. Instead, it records the shape and color of the image, for example using lines and curves to describe a figure. When displaying on the page, the results are obtained and displayed on the page through calculation by using the formula. When the vector graph is enlarged, the display effect will not change because the vector graph is calculated by mathematical formula.

Color pattern

Color modes are generally divided into index colors and direct colors:

  • Index color: Refers to the use of a number to represent (index) a color, store a combination of numbers when storing images, and store a mapping of numbers to picture colors. This method can only store a limited number of colors, usually 256 colors, corresponding to the computer system, using a byte of numbers to index a color.

  • Direct colors: Use multiple numbers to represent a color, usually three or four numbers representing the red, green, blue, and transparency of the color. Popular display devices can support 256 variations in each of these four dimensions, so direct colors can represent 2 to the 32nd power of colors.

GIF

The full name of GIF is Graphics Interchange Format, which is a type of bitmap Graphics, so when you zoom in on GIF-type images, you will see significant distortion. GIF is designed primarily as a transfer format for streaming data, not as a storage format for files.

GIF is encoded using the LZW compression algorithm, a lossless compression algorithm whose core idea is to map data and represent it with less data. For example, if we have a string ABBABA, we can use the symbol 2 to represent BA, so that the original string becomes AB22, which suddenly reduces the amount of memory needed to store the data without losing the original data.

There are actually two standards for GIF:

  1. GIF87a: Version released in 1987. This version provides for storing one image per file, does not support transparent pixels and animation effects, and uses LZW compression algorithm, which can reduce image size by 20 to 25 percent while maintaining image quality.
  2. GIF89a: 1989 version that allows multiple images to be stored in a file, can animate, and allows certain pixels to be transparent. In this version, the GIF document has expanded the graphics control block, remarks, instructions, application programming interface four blocks, and provides transparent color and multi-frame animation support.

GIF uses an indexed color scheme, so a maximum of 256 colors are supported. Rich color images are not suitable for GIF format, simple color images are better.

JPEG

When it comes to JPEG, some students may want to ask: what is the difference between it and JPG? The answer is no difference, JPG and JPEG are the same thing, the reason why there is JPG, because DOS, Windows 95 and other early systems used the naming rules only support the longest 3 character extension, for compatibility with.jpg, later due to historical habits and compatibility consideration, .jpg is more popular now.

To get back to the point, JPEG, like GIF, is a bitmap that can be distorted when enlarged.

Unlike GIF, JPEG uses lossy compression because JPEG is designed to reduce the file size as much as possible without compromising human-readable image quality. This means that some of the image’s data is lost in order to compress the size of the image, but this doesn’t mean THAT JPEG is bad because JPEG uses direct colors and supports 1,600 colors, enough to handle the color requirements of most scenes. Therefore, the mass loss before and after compression is not easily detected by the human eye.

Therefore, for colorful pictures, the use of JPEG is a good choice, especially some large background pictures such as the home page, using JPEG to render can ensure the quality of the picture while reducing the volume of the picture. The downside of JPEG is that it does not support transparency, so you need to consider using a different image type if you want transparency.

PNG

PNG stands for Portable Network Graphics. In fact, PNG can be divided into several kinds according to the number of data bits stored in color. We will introduce them respectively below.

  • Png-8: Uses 8-bit binary to store image color data, so only 256 colors are supported at most. It is a color mode with indexed colors. Two different forms of transparency are supported (index transparency and alpha transparency).
  • Png-24: use 24-bit binary storage image color data, can support 16 million colors, belongs to the color mode of direct color, does not support transparency.
  • Png-32: Uses 32-bit binaries to store color data, adding an alpha channel compared to PNG-24, thus supporting transparency and up to 4.2 billion colors.

PNG uses lossless compression, so it is larger than JPEG and, like JPEG, does not support animation. But PNG supports transparency, which is another advantage of PNG because of its high quality lossless compression and is ideal for saving source files or image formats that require secondary editing. While PNG’s big goal is to replace the use of JPEG, PNG-24’s file size is five times that of JPEG, and the display is usually only marginally better. So, only use PNG-24 or PNG-32 if you don’t care about the file size of the image, want better presentation, or want to use transparency.

APNG

APNG stands for Animated Portable Network Graphics and, as the name suggests, is PNG for Animated Graphics.

APNG is a format based on the PNG extension that adds support for animated images, along with 24-bit RGB and 8-bit Alpha transparency, as well as transparency support for PNG-32, which supports 4.2 billion colors. This is equivalent to the APNG integration of PNG and GIF advantages, rich color, lossless compression quality, but also support animation, the only hard or large size. APNG has also been optimized for volume. When storing animation effect data, it uses an algorithm to calculate the differences between frames and stores only the differences between frames, rather than storing all frames.

Assume a 4-frame composite APNG, as shown below:

Image information actually stored by APNG:

Because only the necessary image information of the animation frame is stored, the redundant data is optimized to further reduce the size of APNG.

APNG is also very compatible with browsers. Animations can be displayed on compatible browsers, and images do not hang on incompatible browsers. This is because APNG stores a normal PNG image for the first frame. Only the first frame of an APNG file is displayed, ignoring the subsequent animation frames, which is why APNG is backward compatible with PNG.

SVG

Scalable Vector Graphics (SVG) is a TWO-DIMENSIONAL Vector Graphics standard based on XML released by W3C. Unlike the image formats mentioned above, SVG is a vector image that processes the image not based on pixels but on its description, which is computed by a data formula and displayed on a page, so it has a remarkable feature that no matter how large you zoom in, there is no distortion.

Because SVG stores a description of an image, rather than individual pixels of data, it makes SVG files much smaller and more compressible.

While SVG has many advantages, it also has disadvantages:

  1. Rendering costs are high because the image presentation needs to be calculated based on the description, which consumes more performance than a single image.
  2. SVG has a learning cost that other image formats do not, and it is programmable. (Of course, this also proves its flexibility.)

WebP

Of all the image formats mentioned above, WebP is the latest format, introduced by Google in 2010 to allow efficient compression of web images without compromising the compatibility of the image format and the actual sharpness of the image, thus making the overall web download faster.

WebP supports lossy compression and lossless compression at the same time, can support transparency like PNG, like GIF and APNG support animation effects, can be said to be a collection of all the advantages of the image format, let’s take a look at Google official advantages of WebP description.

  • Compared to PNG, WebP lossless images are reduced in size by 26%. WebP lossy images are 25-34% smaller than comparable JPEG images under the equivalent SSIM quality index. Lossless WebP supports transparency (also known as alpha channel) with only 22% extra bytes. For cases where lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times the file size compared to PNG.

Although WebP has so many advantages, but it is still too young, in the browser, the consequence of too young is who all can not pass with you (incompatible), the data from the below looks not very miserably, but in Internet explorer, Safari, especially on the IOS does not support, to know how big the mobile traffic, now, That’s enough to make a difference.

Of course, there is a solution to this, open some e-commerce sites, if you open it with a webP-enabled browser, you can see that the larger image is XXXX.jpg. WebP, if you open it with a browser that does not support WebP, you can see that the image is xxxx.jpg. You can find that the web site checks the browser to determine whether WebP is supported. If WebP is supported, WebP resources are returned; otherwise, other compatible resources are returned.

Well, today’s introduction is here, if you feel that the writing can also be friends welcome a little praise collection, convenient work check with ~ ~