Several image formats used in front-end development and their usage specifications

Before introducing the picture format, let's start by saying something extra.

Vector graphs and bitmaps.

vectors are the basic elements of a graph, such as points, lines, polygons, borders, fill colors, and other information that are displayed graphically by means of calculations. In general, vectors represent geometry, files are relatively small, and zooming out is not distorted.

One thing to note here is that the images used in web development are not vectors, even if it is a triangle, with only one border, all bitmaps.

So where does the vector map work?

My current knowledge pool knows an icon font, such as Font-awesome

There are three types of image formats commonly used in front-end development: Jpg,png,gif. These are bitmaps.

bitmaps are also called pixel or raster plots, which store and display images by recording information such as the color, depth, and transparency of each point in the image. A bitmap is like a big puzzle, except that each tile is a solid pixel. The advantage of bitmap is that it is beneficial to display realistic images with rich color levels. The disadvantage is that the file size is large, and zooming in and out of the image is distorted.

lossy compression and lossless compression

lossy compression is the processing of image data, removing the details of those images that are ignored by the human eye, and then filling them with gradients or other forms using nearby colors. This can greatly reduce the data volume of the image information, without affecting the image restoration effect.

JPG is the most common image format for image information processing using lossy compression.

We have a quality option when we save the image in JPG format

This refers to the degree of loss of the picture, if the compression of the general choice of quality in 60-80, 60 to the chip distortion will be very serious.

Lossless compression

PNG is one of our most common image formats that use lossless compression. The compression principle of lossless compression is to determine which areas of the image are the same color, which are different, and then compress the same data information, (for example, a blue sky needs to record the starting point and the location of the end of the position can be), and the different data saved (such as clouds and gradients in the sky and other data).

The point here is that lossless compression is only a relatively "lossless" compression, not that the compressed picture is not distorted anyway. This is particularly evident in the PNG8. PNG8 can only index up to 256 colors, so when the number of colors that appear on the image is greater than the number of colors we can save, we cannot actually record and restore the image.

Transparent

Index Transparency : That is, Boolean transparent, similar to GIF, a pixel only full-transparent and full-opaque two effects can not set the transparency

Alpha Transparent : Translucent

Let's get down to the chase.

1 GIF

Let's just say GIF, GIF is a gradually discarded image format. The PNG format appears to replace it. PNG 8 does not support animations, PNG8 has all the features of GIF, but the advantage over GIF is that it supports alpha transparency and better compression (GIF only supports index transparency).

But GIF in the online still have a place, such as in the bar or QQ group often see the animated pictures, with GIF.

When the picture color is simple to a certain extent, size small to a certain extent, GIF format picture size is smaller than PNG8. For example, a 1*1 pixel of the pure black point, under the PNG8 is 124byte, under the GIF is 43byte.

But this time with CSS or base64 is a better choice. About Base64 Specific reference:base64:url background picture and Web page performance optimization.

2 JPG

JPG will decompose the image into a 8*8 pixel raster (such as) when storing the image, and then compress the data for each raster, and when we zoom in on an image, we will find that many of the details in these 8*8 pixel rasters are removed, and some special algorithms are populated with nearby colors. This is why we use JPG to store images that sometimes produce blocky blur.

At the same time because it is a piece of, then when the boundary is blurred, the color gradient, it can achieve a very good effect, which is also suitable for large pieces of color similar pictures of the reason.

JPG accurately records a few points in the grid, other points with the difference, so when the color is small, in the file size can show the advantages.

Advantages and Disadvantages

1. Advanced compression of photographic images or realistic images is supported, and the image file size can be controlled using compression ratios.
2. lossy compression can degrade the quality of image data and accumulate when editing and re-saving JPG images.
3. JPG and PNG8 are suitable for images with fewer colors, but PNG8 may be more appropriate when the number of images is less than a certain value such as 256.
4. Both JPG and PNG8 are suitable for large blocks of similar color images.
5. JPG is not suitable for simpler pictures where the brightness ("sharpness") difference is obvious.

JPG in the storage of photographic or realistic images can generally achieve the best compression effect, such as the site's background map, carousel Map, user avatar and so on.

3 PNG

Here PNG puts in the end that PNG can be subdivided into three formats: PNG8,PNG24,PNG32.

The numbers that follow represent the maximum number of color values that can be indexed and stored in this PNG format. "8″ represents 2 of the 8-time square is 256 colors, and 24 represents 2 of the 24-time side is about more than 16 million colors."

About transparency:

1. PNG8 supports index transparency and alpha transparency
2. PNG24 does not support transparency;
3. The PNG32 adds 8-bit (256-order) alpha channel Transparency on a 24-bit PNG basis, which means that it can store a total of 256 levels of transparency (known as translucency) from completely transparent to completely opaque.

You may have to ask, I save is PNG-24 format, why still have transparent?

In fact, after you check the Transparency option, the format you saved is PNG-32, but PS didn't prompt you.

Advantages and Disadvantages

1. The image file size can be compressed as much as possible with the least distortion guaranteed.
2. When PNG is used to store grayscale images, the depth of the grayscale image can be as much as 16 bits, and when the color image is stored, the depth of the color image can be as many as 48 bits, and the alpha channel data of up to 16 bits can also be stored.
3. For more complex images that require high fidelity, PNG can be uncompressed, but the picture file is large and not suitable for use on Web pages.

Usage Specification:

1, use less picture element, try to use CSS3 instead

such as rounded corners, cue boxes, not two times the shadow of the rendered element. On the CSS3 Filter property, on the mobile side is not recommended, although it will save space for the picture, but 1, rendering will consume performance, resulting in page loading is slow, 2, andorid system in more than 4.0 version is supported.

2, try to use less png32 format , too big =. =

In some cases, if the loss of a certain vision can achieve a higher performance, you can negotiate with the designer to remove some effects.

3, JPG suitable for photographic images or realistic images, but also suitable for less color images;

The PNG8 is suitable for simple images with very few colors (less than 256), areas with similar large color, or very obvious luminance differences;

The PNG32 is suitable for situations where a picture is more complex and transparent, and the transparency effect cannot be achieved with CSS.

4, If the page has more small icon, first consider the use of Webfont, if the Webfont can not meet the requirements, you must use CSS sprite to merge the picture, to compress the overall picture size, while reducing the page request to improve access speed.

In addition to the PNG image compression, in addition to adjust the maximum index color, this site is very good www.tinypng.com

Meat Mountain said compression to grunt find a plugin write a script can, imagemin, wait for me to update after success ~

Several image formats used in front-end development and their usage specifications