JPG PNG GIF SVG webP ICO the most commonly used image formats in the projectCopy the code

GIF

Advantages: LZW compression algorithm for coding, is a lossless image format based on index color. Because of lossless compression, it is smaller than the older BMP format, and supports transparency and animation.

Cons: GIF stores only 8-bit indexes (i.e., 2^8=256 colors at most), and complex, detailed images are not suitable for GIF format. GIF format is suitable for logo, icon and wireframes with simple colors.

Application scenario: Used for small dynamic ICONS.

PNG8

Advantages: PNG-8 uses lossless compression and is a bitmap format based on 8-bit indexed colors. Png-8 has better transparency support than GIF and is smaller for the same quality. Ideal as an alternative to GIFs.

Disadvantages: PNG-8 also has an obvious disadvantage of not supporting animations.

Application scenario: It is mainly used for small ICONS or small background images with simple colors and strong contrast.

PNG24

Advantages: PNG-24 uses lossless compression and is bitmap based on direct color. Png-24 has picture quality comparable to BMP, but has a size advantage that BMP does not. Of course, compared to JPG, GIF, pnG-8, the size is still larger. Because of its high quality, lossless compression, it is ideal for saving source files or image formats that require secondary editing. Support transparency.

Disadvantages: PNG-24 vs. JPG, the file size is at least 5 times larger than JPG, but the image quality is little improved. So unless the quality requirements are extremely high, it is recommended to use JPG for colorful web images.

Application scenarios: pictures with high requirements for quality.

PNG24

Pros: JPG is a lossy image format based on direct colors. Due to the use of direct colors, THERE are 1600W colors available in JPG (2^24), while the number of colors recognized by the human eye is only about 1W, so JPG is very suitable for colorful images, gradient color. JPG lossy compression can greatly reduce the size of an image by removing details that are not visible to the naked eye.

Cons: JPG is not suitable for ICONS, logos, because it has no advantage in file size over GIF/PNG-8.

Application scenario: the use of colorful network pictures.

SVG

Pros: SVG is vector graphics, not affected by pixels, and works well on different platforms; Animation effects can be achieved through JS control.

Disadvantages: Because it is a vector map can not show the rich true color of bitmap

Application scenarios: Vector graphics, scalable; No need for multi-terminal, multi-resolution adaptation; Support a variety of editing, with strong interactive characteristics;

webp

Pros: WebP images is a new image format developed by Google. Compared with PNG and JPG, the size of WebP image is reduced by about 30% under the same visual experience. In addition, WebP image formats support lossy compression, lossless compression, transparency, and animation. In theory, it can replace PNG, JPG, GIF and other picture formats.

Disadvantages: Currently webP is not fully supported.

Webp compatibility

Application scenario: High compression ratio, suitable for fast network transmission