Original text: Front-end development should know the picture knowledge

Front during the development of daily, will encounter a lot of use images of the scene, and pictures in the website resources of flow ratio is high, the reasonable use and optimize images, not only can reduce the pressure of the bandwidth consumption and server, and may also be more than any other optimization method are high efficiency, such as the effort to optimize the front packaging files. In this article, THE author summarizes some common front-end image types, advantages and disadvantages, and their use scenarios.

The types and characteristics of pictures

To display an image in vector or bitmap format in a computer:

  • A vector graph uses lines and curves to describe the image. The graph also contains color and position information, but does not record every point of information. When editing a vector graph, you define the properties of lines and curves that describe the graph. These properties will be recorded. Operations on the vector graph, such as changing position, shape and size, will not change the quality of the vector graph. Vector graphics display or output image, image quality is not affected by the resolution of the device.

  • Bitmaps, also known as bitmaps, are shown below:

When a bitmap is enlarged, you will see that the image is made up of many small cells, like a grid. Each cell is made up of pixels, and each pixel is represented by binary. The more binary bits on each pixel, the richer the color will be. The color on each pixel is fixed. During the operation of the bitmap, is the essence of each pixel in the definition of information, it does not define the image contour line like vector diagram or straight line, so the quality of the bitmap and related to the resolution of the adopted in image generation, which is why after the bitmap to be amplified, the bitmap appears on the edge of a lot of sawtooth.

To put it simply, a vector map can be infinitely magnified without distortion, while a bitmap will be distorted after amplification. However, bitmaps can show more color richness than vector maps because they use binary colors on pixels.

Bitmap file compression type

Image file compression is divided into two types, lossy compression and lossless compression.

  • Lossless compression is the compression of the file itself, is to optimize the way of data storage of the file, with some algorithm to express the repeated data information, the image can be completely restored, will not affect the image content, will not lose any details of the image. Lossless compression saves the same color information only once. Lossless compression first determines which areas of the image are the same and which are different. In general, lossless compression can remove some duplicate data and reduce the size of the image saved on disk, but it does not reduce the memory footprint of the image because, when the image is read from disk, the software will fill in the missing pixels with matching color information.

  • Lossy compression is changes to the image itself, in the preservation, the brightness of the image retains more information and the hue of similar information and the surrounding pixels to merge, the proportion of the merger, the compression ratio is different, because the description image information is reduced, the compression ratio can be high, with the decrease of the quality of the picture also. Lossy compression can reduce the image in memory and disk space occupied, but at the same time also can keep the color gradual change, delete images change suddenly, so watch the image on the screen, the appearance of the image does not produce larger impact, compared to the naked eye is hard to tell, such as the green grass, the compression of time will be around green gradient for compression.

Image formats commonly used on the front end

Common front-end image formats include GIF, PNG, JPEG, WEBP and SVG.

  1. GIF

GIF image is based on the color list, support up to 8 bits (256 colors), do not support translucent, can only be completely transparent or opaque, the file is divided into many storage blocks, used to store the image or determine the image performance control block, used to achieve frame animation and interactive applications, GIF files also reduce image size by losslessly compressing image data through the LZW compression algorithm.

  1. PNG

Image image is lossless compression image format, does not support animation, compared with lossy compression, compression volume is relatively large, support PNG8, PNG24, PNG32 three formats:

  • PNG8: non-animated Logo and icon and other fidelity of the small picture as far as possible choose to use PNG8, as far as possible do not choose to use PNG24 and PNG32, because PNG24 and PNG32 volume than PNG8, PNG8 format is mainly translucent, support transparency adjustment, the same picture PNG8 than GIF volume is smaller.

  • PNG24: If you want a great display and you don’t care about the size of the file, PNG24 is an option. PNG24 supports 2 ^ 24 colors and does not support transparency.

  • PNG32: Added 8 bits of transparent information on the basis of PNG24 to support transparency adjustment.

  1. JPEG

JPEG works well with brightness and color compression and works well on photos or shaded images, but not with graphic scenes such as icon geometries and screenshots. JPEG is a lossy raster image format. That is, lossy compression. Each time a JPEG is compressed, some information is permanently lost.

  1. WEBP

WEBP is based on the self-image encoding format VP8, informally pronounced as Weppy, and supports lossy compression, as well as lossless compression using repetitive data substitution. Lossy WEBP images are on average 25-35% smaller than visually similar compression level JPEG images. Lossless WEBP images are typically 26% smaller than the same image in PNG format. WEBP also supports animation: in lossy WEBP files, image data is represented by VP8 bitstreams, which may contain multiple frames. Lossless WebP saves the ANIM block that describes the animation and the block that represents the animation sequence frame. Support loops. WEBP is now widely supported in the latest versions of major web browsers (IE excepted), although it is not supported in older browsers and compatibility is somewhat problematic. But it can be reverted to JPEG or PNG format, for example:

<picture>
    <source srcSet="example.webp 1x" type="image/webp">
    <img src="example.jpg">
</picture>
Copy the code
  1. SVG

SVG files are pure XML and can be read and modified by many text editing tools. Text in images is optional and can be run with JavaScript. It is especially suitable for maps, data visualization, line art, logos and ICONS. To master SVG is just not an easy thing, the learning cost is too expensive, rendering cost is also relatively high, has a certain impact on performance.

extension

In addition to the above image formats that are common on the front end, there are several image formats that are used relatively infrequently in projects:

  • The BMP(Bitmap) is a standard image file format in The Windows operating system. It supports various compression methods, including lossy and lossless algorithms. It can be divided into two types: device-dependent Bitmap (DDB) and device-independent Bitmap (DIB).

  • TIFF is a flexible bitmap format. Most TIFF files are generally uncompressed, but they also support lossy compression and lossless compression. TIFF files are mainly used to store photos including artistic photos, which can be any type of image. But TIFF files tend to be larger than images in other formats. This is due to the inclusion of metadata and the fact that most TIFF images remain fairly bulky files uncompressed or with compression algorithms.

  • APNG is a file format first introduced by Mozilla that extends the PNG standard to add support for animated images. Similar to the animated GIF format, APNG is more powerful because it supports a variety of color depths, while GIF only supports 8-bit indexed colors.