I. Preface:
The front end is often responsible for displaying various images, and it is important to choose a suitable image format to have a good visual effect.
Two: image compression type:
Uncompressed: The uncompressed image format does not compress the image data and can accurately present the original image. For example, BMP format.
Lossless compression: using the statistical redundancy of the image to compress, can completely restore the original data without causing any distortion, can ensure the quality of the picture while reducing the volume of the picture. For example, if there are ten consecutive #000666 elements in the background of an image, the compression algorithm can be written as (#000666, 10) to save space. In essence, lossless compression can remove some duplicate data, greatly reducing the disk space footprint. However, the lossless compression method does not reduce the memory footprint of the image because, when the image is read from disk, the computer restores (#000666, 10) to ten consecutive #000666.
Lossy compression: Experiments in biology have shown that the human brain uses the closest color to fill in the missing color. When looking at a picture on a screen, the brain uses the colors seen in one area to fill in the missing colors near that area. Lossy compression is the removal of the details of an image that the human eye cannot recognize, reducing the memory and disk space occupied by the image. The purpose of image compression is to save storage space and improve transmission efficiency.
Three: common picture types and characteristics
GIF – In 1987,
GIF is a bitmap. The rough idea behind bitmaps is that an image is made up of many pixels, each assigned a color, that together make up the image. GIF can support animation, also can support background transparency.
Advantages:
- Supports animation and transparent backgrounds
- Good compatibility
- Grayscale image has better performance
- Some of the received files can be displayed at lower quality. This is especially useful when the network connection is slow
Disadvantages:
- Supports up to 256 colors, poor color transition, the picture has a sense of granularity
- Transparency is supported, but translucency is not
Applicable scenario
- It is suitable for less colorful pictures, such as cartoons, company logos
JPG/JPEG – 1992
JPG/JPEG images are the most common image formats. Some special coding methods are adopted to remove some redundant images and color data, which belong to lossy compression format. It can compress the image in a very small storage space, so it is not suitable for the pursuit of high-quality images.
advantages
- High compression rate
- Good compatibility
- Color is rich
disadvantages
- JPEG is not suitable for storing high definition images such as corporate logos and wireframes
- Animation and background transparency are not supported
\
ICO
Microsoft Windows Icon (ICO) is a Windows icon file format designed by Microsoft for desktop ICONS in Windows. It can also display small ICONS as the beginning of favorites in favorites. Now PNG can also be used to make website ICONS.
\
PNG – 1996
PNG is a bitmap format using lossless compression algorithm. The PNG format comes in 8-bit, 24-bit, and 32-bit formats, all of which do not support animation. 8-bit PNG supports two different transparent forms, 24-bit PNG does not support transparency, and 32-bit PNG adds 8-bit transparent channels on the basis of 24-bit.
advantages
- Compress the image file size as much as possible without losing authenticity
- Compatible with most browser versions
- Support for transparent effects
disadvantages
- Large files (PNG provides less compression than JPEG’s lossy compression)
- The lack of animation,
\
APNG: Animated PNG — 2004
APNG (Animated Portable Network Graphics), as its name suggests, is an Animated format extension based on the PNG format that adds support for Animated images. It was created to replace the older GIF format, but it is not officially approved by the PNG organization.
As opposed to GIF
- Color is rich
- Support transparent
- Backwards compatible PNG
- Support for animation
disadvantages
- The generation is cumbersome
- Not standardized
SVG – 1999
SVG is developed by W3C as a lossless VECTOR graphics format based on XML. Users can draw images directly with code, open SVG files with any word processing tool, or put them into HTML at any time and view them through a browser.
advantages
- It is scalable and can be rendered to any size without compromising quality
- Small in space, SVG is much smaller on average than GIF, JPEG, PNG, and even at extremely high resolutions
- Animation support, more flexibility, unmatched quality
- Support transparency
- Seamlessly working with DOM, SVG can be manipulated directly using HTML, CSS, and JavaScript (such as animation)
disadvantages
- High SVG complexity can slow down rendering
- Not suitable for games such as high interactive animation
\
Base64-1987
Image Base64 encoding is to encode an image into a string, using the string instead of the image address, the image is downloaded to the local along with the HTML, no longer a separate HTTP to request the image.
advantages
- No additional request
- For very small or very simple images
- Can be used as a single image, such as background image reuse, etc
- No cross-domain issues, no need to worry about caches, files, etc
disadvantages
- Too large compared to other formats
- Encoding and decoding costs extra
\
webP – 2010.
WebP is a novel image format that provides excellent lossless and lossy compression for images on the Web, and the degree of lossy compression is adjustable so developers can trade off file size and image quality.
WebP lossless images are 25-30% smaller than PNG images;
WebP lossy images are 25-34% smaller than JPEG images under the same SSIM (structural similarity) quality index;
advantages
- The same mass is smaller
- There is no significant change in mass after compression
- Lossless image support
- Support for animation
disadvantages
- Compatibility relative to JPG, PNG, GIF poor
Compatibility of each browser:
