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.
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 a complete 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.
Please pay attention to my column (constantly updated), here, I will put all the important articles in this directory, for you to read, I hope to help you
Ali factory standard Web front end senior engineer tutorial directory, from the basic to the advanced, look to ensure that your salary rises a step
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
- The excellent compression algorithm ensures the image quality to a certain extent while reducing the volume.
- Multiple frames can be inserted to achieve animation effects.
- 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 the user can see the outline of the final image without downloading the image, which can improve the user experience to some extent (waterfall stream recommends using the standard version).
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.
Also, pNG-24, like PNG-8, supports image 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, and you can see that all versions of IE and Safari are not supported (this is a hard hit), and 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
Scalable Vector Graphics(SVG) is a lossless, Vector graph.
SVG is an XML-defined language for describing two-dimensional vectors and vector/raster graphics. SVG provides three types of graphics objects: vector graphics (for example, paths made up of lines and curves), images, and text. Graphic objects can also be grouped, styled, transformed, combined, and more. The feature set includes nested transforms, clipping paths, alpha masks, filter effects, template objects, 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:
OK, that’s all for this article. Thank you for reading.