Graphics that every front-end engineer should know

preface

With the development of Web, the flow of website resources is becoming more and more large. According to statistics, 60% of website traffic is from website pictures, it can be seen that reasonable optimization of pictures can greatly affect website traffic, reduce bandwidth consumption and server pressure.

Sometimes you spend a lot of effort configuring WebPack to reduce the size of the package, so it’s better to optimize a few images. This article will give you an idea of how to choose the right image and how to use it in what scenarios. If you want to see the answer, you can just go to the bottom of the article and look at the image.

More of my posts can be found on GitHub,

The basic concept

Before we get to the point, let’s talk about some basic concepts related to images.

As you zoom in on a photo (bitmap), you’ll see little squares called pixels.

A grid (pixel), in a computer, is represented in binary, and the more bits used, the richer the color of the pixel.

For example 🌰, how many colors can a pixel have if it is represented by a binary number?

Two, one binary bit, either a 0 (black) or a 1 (white)

The figure below shows the maximum number of colors that can be displayed in a pixel binary.

After having a basic understanding of the picture, the next picture is divided into categories, which is conducive to understanding the characteristics of various formats of pictures.

Classify according to the type of graph

• Bitmap
• The vector diagram

Bitmap (bitmap)

Bitmaps, also known as bitmaps, pixel maps. A lattice figure is the smallest unit of pixels, the bitmap is arranged by the pixel array to achieve the display effect, each pixel has its own color information, at the time of registration figure image edit operation, operational object is each pixel, we can change the image of the hue, saturation, transparency, to change the display image.

A bitmap is a graph with a growing grid described earlier.

Common such as: JPG, PNG, webP, etc., we usually encounter most of the bitmap.

The vector diagram

Vector graph, also called vector graph. Vector graph does not record the information of every point on the screen, but the algorithm of the shape and color of the elements. When you open a vector graph, the software will calculate the corresponding function of the graph and display the shape and color of the resulting graph to you.

The algorithm for objects on the screen remains the same whether the screen is large or small, so the display remains the same even if the screen is scaled in large multiples (without distortion).

The most common is in SVG format.

Classification by compression

• No compression.
• Lossless compression.
• Lossy compression.

No compression

The uncompressed image format does not compress the image data and can accurately present the original image. The BMP format is one of them.

Lossy compression

It refers to the loss of some image information in the process of reducing the size of the file, that is, the quality of the image is reduced, and this loss is irreversible, it is impossible to recover the original image from a lossy compressed image.

The common lossy compression method is to merge adjacent pixels according to a certain algorithm. The compression algorithm does not compress all the data of the image, but removes the details that the human eye cannot recognize during the compression. So lossy compression can greatly reduce the size of an image with the same image quality. The representation is JPG.

Lossless compression

In the process of compressing the image, there is no loss of quality. We can recover the original information from lossless compressed images at any time.

Compression algorithm for all the data of the image encoding compression, can ensure the quality of the picture while reducing the size of the picture.

PNG is an example of this.

summary

• Using lossy compression processing image, is to remove some pixel data, can not recover the original image.
• Using lossless image processing is to compress the pixel data and retrieve the original image.

Common picture format parsing

GIF

Keywords: lossless compression, index color, transparency, animation

Graphics Interchange Format (GIF), originally meaning “Image Interchange Format”, is a lossless compression Format based on index colors based on continuous tones of LZW algorithm. Its compression rate is generally around 50%. It doesn’t belong to any application so almost all relevant software supports it. There are a lot of software in the public domain that uses GIF image files.

GIF is a lossless compression, so it is just a compression of pixel data, in fact, LZW algorithm is just a compression of data algorithm, if you know Huffman algorithm, it may be better to understand how to compress data.

GIF features frame animation.

It is smaller than the older BMP format and supports transparency (not translucency, because Alpha transparent channels are not supported) and animation.

advantage

1. The excellent compression algorithm ensures the image quality to a certain extent while reducing the volume.
2. Multiple frames can be inserted to achieve animation effects.
3. Transparent colors can be set to create the effect of objects appearing above the background.

disadvantages

Since 8-bit compression is used, it can only handle 256 colors at most, so it is not suitable for true color images (explained in the appendix at the end of this article).

Suitable for the scene

Simple color logo, icon, wireframes, text output, etc

JPG/JPEG

Keywords: lossy compression, direct color, suitable for large picture, small size

JPEG format is one of the most common image format, file after dropping named “.jpeg “or”.jpg “, JPEG can be said to be the most familiar image file format, I believe in the popularity of digital cameras now, almost every digital camera, camera phone can (or even only) output JPEG format of the image file.

JPEG is a kind of very typical use lossy compression image format, which means the user each time after the archive action of JPEG, some contents of the image file details will suffer permanent damage, especially the use of high compression ratio, will make the final recovery image quality significantly decreased after decompression, if the pursuit of high quality image, Too high compression ratio should not be used.

The JPEG image format is designed to be as small as possible without compromising human-readable image quality.

Baseline JPEG and Progressive JPEG

JPEG can be saved in two ways: Baseline JPEG (standard) and Progressive JPEG (Progressive). Both formats have the same size and image data, and their extensions are the same. The only difference is how they are displayed.

Baseline JPEG

Baseline JPEG file storage is a top – to – bottom scan with each line sequentially saved in a JPEG file. When you open the file to display its contents, the data will be displayed line by line in the order it was stored until all the data has been read and the entire image is displayed. If the file is large or the network is slow to download, you will see images loaded in line by line. JPEG in this format has no advantage, so Progressive JPEG is generally recommended.

Progressive JPEG

Unlike the Baseline one scan, Progressive JPEG files contain multiple scans, which are stored in the JPEG file. In the process of opening the file, the blurred outline of the whole image will be displayed first. As the number of scans increases, the image becomes clearer and clearer. The main advantage of this format is that on a slow network, you can see the outline of the image and know roughly what image is being loaded. You’ll notice this technique when larger images open on some sites.

The benefit of progressive images is that users can see the general outline of the final image before downloading the image, which can improve the user experience to some extent (waterfall website recommends using standard type).

For more on Baseline JPEG and Progressive JPEG, see this article: Using Progressive JPEG to improve the user experience.

advantages

• Can support 24bit true color, widely used in the need for continuous tone images such as colorful pictures, photos, etc.;
• Variable compression ratios can be used to control file size;
• Interleaved (for asymptotic JPEGs)

disadvantages

• JPEG is not suitable for storing corporate Logo, wireframes and other images. Lossy compression will cause the image to be blurred, and the choice of direct color will cause the image file to be larger than GIF.
• Lossy compression will degrade the quality of the original image data.
• JPEG images do not support transparency processing and transparent images need to be rendered in PNG.

Suitable for the scene

JPG is good for rendering colorful images, and in our daily development, JPG images are often used as large background, rotation, or Banner images.

GIF vs JPEG

Due to the nature of the GIF and JPEG are so different, so we can easily choose when to use which kind of image file format to output we need: when the image is rich in color, and there is no obvious sharp contrast edge line, choose JPEG you can get the best output, the pictures is the best example of this; When the image is a line drawing with well-defined edges, doesn’t use a lot of color, or maybe even needs a transparent background, GIFs are a great choice, with small files and excellent image quality.

PNG

Keywords: lossless compression, index color, transparent support, large volume

PNG (Portable Network Graphics). PNG provides lossless compressed image files 30% smaller than GIF. It provides both 24 – and 32-bit true color image support and many other technical supports. Due to the excellent features of PNG, PNG images can be called “special format for web design”. PNG was originally developed as an alternative to GIF. As a newly developed image transfer file format, PNG also uses lossless compression format. In fact, THE development of PNG is born because of the patent problem of lossless compression format used in GIF.

PNG comes in three forms. Here are the differences.

PNG-8

Png-8 is the indexed color version of PNG. Png-8 is a lossless, indexed color, bitmap.

Png-8 is a very good GIF alternative, and should be used instead of GIF whenever possible because it has a smaller file size for the same image. In addition, pNG-8 also supports transparency adjustment, which GIF does not. Now, unless you need animation support, there’s no reason to use GIF instead of PNG-8.

PNG-24

Png-24 is the direct color version of PNG. Png-24 is a lossless, direct color, bitmap.

Lossless, color-coded bitmaps sound a lot like BMP, and yes, pNG-24 is no different from BMP in terms of display. The advantage of PNG-24 is that it compresses the image data, making pNG-24 files much smaller than BMP files for the same effect. Of course, PNG24 images are still much larger than JPEG, GIF, and PNG-8 images.

A big goal of PNG-24, though, is to replace the use of JPEG. But in general, PNG-24 files are five times larger than JPEG files, and the display is usually only marginally better. Therefore, use PNG-24 only if you don’t care about the file size of the image and want the best display.

In addition, pNG-24 does not support transparency.

In theory, pNG-24 is recommended when you’re looking for the best display and don’t care about file size.

In practice, to avoid volume problems, we generally do not use PNG for more complex images. When we came across scenes that were suitable for PNG, we preferred the smaller PNG-8.

PNG-32

The difference between PNG-32 and PNG-24 is the addition of an Alpha channel to support translucency, and the rest is basically the same as pNG-24.

Advantages:

• Support high level lossless compression;
• Support alpha channel transparency;
• Supports 256 color palette technology to produce small size files
• Supports up to 24 bit true color image and 8 bit gray image.
• Gamma calibration information to support image brightness.
• Support storage of additional text information to retain image name, author, copyright, creation time, notes and other information.
• Asymptotic display and streaming read and write, suitable for quick display of preview effect in network transmission and then display the full picture.

disadvantages

• Older browsers like Internet Explorer 6- and programs may not support PNG files;
• PNG provides less compression than JPEG’s lossy compression;
• There is no support for multiple image files or animation files compared to the GIF format.

Suitable for the scene

Use small logos, simple, contrasting images or backgrounds, etc.

PNG tips

PNG is divided into two types, one is Index, one is RGB. Index records the value and location of the same color. (To put it more simply, for example, a 2px by 2px super mini-graph, from left to right and top to bottom, the colors are red, white, white, and red. White – 2, 3 “); RGB maps record the color values of all pixels in sequence (i.e., “red, white, white red”). For the same image, the Index format is always smaller than RGB.

Png-8 is the Index color, called as the Index color, and PNG-24 and PnG-32 are RGB forms, can also be called as direct colors.

Because PNG is lossless compressed and retains all the information needed for an image, index colors can be converted to direct colors.

WebP

Key words: young, lossy, lossless, compatibility

WebP is a new image format developed by Google. WebP supports both lossy and lossless compression, and uses direct color, bitmap.

As the name suggests, it was born for the Web. That is, WebP has a smaller file size for the same quality image. There are a lot of images on the web, and if you can reduce the file size of each image, you can greatly reduce the amount of data transferred between the browser and the server, thus reducing access latency and improving the experience.

• Under lossless compression, the file size of WebP images of the same quality is 26% smaller than that of PNG images.
• In the case of lossy compression, the file size of WebP images with the same image accuracy is 25%~34% smaller than JPEG.
• WebP image format supports image transparency, a lossless compression of WebP images, if you want to support transparency requires only 22% of the extra file size.

As you can see, WebP combines the best of many image file formats, so in terms of image quality and performance, WebP is the clear winner.

However, WebP has a disadvantage that prevents it from being widely used, and that is compatibility.

This is a screenshot I took in May 2019, you can see that all versions of IE and Safari are not supported, and all browsers on ios are not supported (this is a hard hit), firefox is only supported in the latest versions, youth comes at a price.

In addition, compared with JPG, WebP encoding speed is 10 times slower, decoding speed is 1.5 times slower, and most network applications, pictures are static files, so users only need to care about the decoding speed. In fact, WebP, while adding extra decoding time, actually makes files render faster by reducing file size and loading time.

Usage scenarios

**WebP ** combines the advantages of multiple image file formats into one, so it is basically suitable for all scenarios, but due to poor compatibility, if we are applying WebP on a large scale, we must implement degradation in Safari and IE.

This is an example of taobao product picture I opened in Chrome. You can see that the suffix of the picture is.jpg_. Webp. If the picture is opened in Safari, the suffix will be.jpg.

APNG

APNG (Animated Portable Network Graphics), as its name suggests, is an animation format based on the PNG format extension, which adds support for Animated images, 24-bit images and 8-bit Alpha transparency. This means animations will be of better quality. It was created as a replacement for the older GIF format, but it is not officially approved by the PNG organization.

APNG frame 1 is a standard PNG image, and the rest of the animation and frame rate data is in the PNG extension data block, so software that only supports native PNG will display frame 1 correctly.

In terms of compatibility, most browsers still support it. If you used to use GIF for animation reasons, APNG is now a good choice. Other features are PNG like, because APNG is just an extension of PNG.

Read more about APNG

SVG

Keywords: lossless, vector graph, small size, no distortion, good compatibility

** English Scalable Vector Graphics(SVG) is lossless and Vector Graphics.

SVG is an XML-defined language for describing two-dimensional vectors and vector/raster graphics. SVG provides three types of graphics objects: vectorgraphics shapes (e.g. paths made up of lines and curves), images, and text. Graphic objects can also be grouped, styled, transformed, combined, etc. Feature sets include nestedtransformations, clippingpaths, and alpha Alphamasks, filtereffects, templateobjects and other extensions.

The biggest difference between SVG and these image formats is that SVG is a vector image. This means that SVG images are made up of lines and curves and methods for drawing them. When you zoom in on an SVG image, you still see lines and curves, not pixels. This means that SVG images do not distort when enlarged, so it is ideal for drawing corporate logos, ICONS, etc.

Advantages:

• SVG can be read and modified by a wide variety of tools (such as Notepad).
• SVG is smaller and more compressible than JPEG and GIF images.
• SVG is scalable.
• Text in SVG images is optional and searchable (great for making maps).
• SVG can work with JavaScript technology
• The SVG graphics format supports a variety of filters and special effects, which can be used to achieve the effect of text shadow in bitmap format without changing the image content.
• The SVG graphics format can be used to generate graphics on the fly. For example, interactive maps can be dynamically generated in SVG, embedded in web pages, and displayed to end users.

Disadvantages:

• Rendering costs are high and have an impact on performance.
• SVG is expensive to learn because it is programmable.

Applicable scenario

1. High-fidelity complex vector documents have been and continue to be SVG’s sweet spot. It is very detailed and suitable for viewing and printing. It can be independent or embedded in WEB pages. 2. 3. Data visualization.

SVG is just a vector graph commonly used in Web development. In fact, there are several formats of vector graph: BW format, AI format, CDR format, ICO format.

conclusion

This paper introduces in detail the common picture formats: GIF, JPEG, PNG, WebP, APNG, SVG, introduced what they are, what is used, advantages and disadvantages, as well as the use of scenarios. As there is too much knowledge about pictures, I just write out what I think is necessary. Below, I found a table and picture of the process of selecting pictures on the Internet. Next time, I don’t know what picture format to choose, just look at the picture.

The APNG and WebP formats are relatively recent and have not yet been adopted by Web standards, only when the specific platform or browser environment is predictable. The selection process of picture format is as follows:

Image format	Support transparent	Animation support	Compression way	Browser support	Relative to the original size	To adapt to the scene
baseline-jpeg	Does not support	Does not support	lossy	all	It depends on the quality	All common scenarios
progressive-jpeg	Does not support	Does not support	lossy	all	It depends on the quality	All common scenarios, progressive loading
gif	support	support	nondestructive	all	It depends on the number of frames and the size of each frame	Simple colors, animations
png	support	Does not support	nondestructive	all	Determined by the number of PNG color values	When transparency is required
webp	support	Does not support	Lossy and lossless	All (except Internet Explorer, Safari and IOS devices)	It depends on the compression rate	Complex colors and shapes, predictable for browser platforms
apng	support	support	nondestructive	All (except IE and Opera)	It depends on each frame	Animations that require translucent effects
svg	support	support	nondestructive	All (IE8 and above)	Depending on the content and the complexity of the effects	Simple graphics, need good zoom experience, need dynamic control picture effects

Additional content

Most of the following content comes from the Internet, because I read these in the process of writing this article, I feel it is necessary to know, so I will post these, not related to the content of the article, can not read.

Bitmap image properties

Index color/color table

A common compression method for bitmaps. Select a number of the most representative colors (usually no more than 256) from the bitmap to compile a color table, and then represent the original colors in the picture with the index of the color table. In this way, the original image can be compressed lossfully. Suitable for compression of web page graphics with fewer colors, not suitable for compression of colorful graphics such as photos.

Alpha channel

On the basis of the original image encoding method, increase the transparency information of pixels. In graphics processing, RGB color information is usually called red channel, green channel and blue channel, and the corresponding transparency is called Alpha channel. Most bitmap formats that use color tables support Alpha channels.

Color depth

Color depth is also called color number, that is, the number of binary bits in a bitmap to represent the color of each point, is an important indicator of resolution. There are 1 bit (monochrome), 2 bits (4 colors, CGA), 4 bits (16 colors, VGA), 8 bits (256 colors), 16 bits (enhanced colors), 24 bits (true colors) and 32 bits, etc. Bitmaps with color depth of 16 bits or more can be further classified by the number of bits representing the RGB three primary colors or CMYK four primary colors (some also include Alpha channel). For example, 16-bit bitmap images can also be divided into R5G6B5, R5G5B5X1 (one bit does not carry information), R5G5B5A1, R4G4B4A4 and so on.

• 8-bit color, the so-called 8-bit color is not an image only 8 colors, but 2^8, namely 256 colors, 8-bit map refers to 8 bits of color;
• 16 bit color, 2^16, from the sense of the human eye, 16 bit color can basically meet the needs of vision;
• 24 bit color, also known as “true color”. There are about 16 million of them, which is almost the limit of color that human vision can distinguish;
• 32 bit color, not 2^32, is actually 2^24 color, but it increases the 2^8 gray level of the color, which is 8 bit transparency, so it is defined as 32 bit color.

When creating web page images, designers usually choose 24-bit images. While 32-bit images are of better quality, they also result in larger image sizes (in fact, it’s hard to tell the difference between a 24-bitmap and a 32-bit bitmap to the naked eye). In addition, zooming-in and zooming-out of the original bitmap will distort the image effect because they reduce the number or density of effective pixels in the image, so the number of times the image is edited should be avoided as far as possible in the production process.

True color and false color, direct color

Describing an image requires using the attributes of the image. Image attributes include resolution, pixel depth, true/false color, image representation and type, etc. This section describes the first three features.

Make halal color, pseudo color and color meaning directly, for writing image display program, understand the image file storage format has direct guiding significance, also won’t to appear such as this phenomenon confused: was expressed in true color images, but display on VGA display image color but not the color of the original image.

I’m not going to go through all the fancy concepts in a graphical way, but I’m going to go through them in the simplest way, as a programmer.

True color

A true color image is a computer image storage method that describes pixels in three or more bytes.

Typically, the first three channels are represented by one byte each, such as red-green-blue (RGB) or blue-green-red (BGR). The presence of a fourth byte indicates that the image has an Alpha channel. However, real systems tend to represent a channel in more than 8 bits (that is, 1 byte), such as a 48-bit scanner. Such systems are collectively known as true color systems.

Pseudo color

In fact, pseudo-color images can be understood as index images, and each pixel value stores not the direct primary color intensity, but the stored index. Just like a reference variable in JS, a variable is just an address, and the value it points to is the real value.

For false color images, there will be a color table, which is an array [3,255], corresponding to 0~255 RGB values respectively. The comparison principle is as follows:

As you can see in the figure above, the pixel value stores only the index number 128, and the RGB value found according to the index is the real base color intensity.

Direct color

Direct color is also known as false color. The difference between it and pseudo-color is that each primary color intensity of the former should be indexed to find the true primary color intensity.

summary

Compared with the true color system, the color produced by the direct color system is similar in that R, G, B components are used to determine the intensity of the primary color. The difference is that the primary color intensity of the former is directly determined by R, G, B, while the primary color intensity of the latter is determined by R, G, B after transformation. As a result, the two systems produce different colors. The experimental results show that the color images displayed on the display screen with direct colors look real and natural.

The difference between the direct color system and the pseudo-color system is that the former transforms the R, G and B components respectively, while the latter takes the whole pixel as the index value of the lookup table for color transformation.

Refer to the link

• What are the advantages and disadvantages of JPG, PNG and GIF? What format should be used in what situations?
• True color and false color, direct color difference
• 10 free image compression optimization tools and scripts
• Selection of image formats in web pages

Finally, welcome everyone to pay attention to my public account – “front-end Taoyuan”, I am Taoweng.