A brief description of common Web page image format: png/svg

PNG image format

PNG is a portable Network image format. PNG began with the combination of GIF and JPG Two, intended to replace both formats. October 1, 1996 PNG to the International Network Alliance proposed and received the recommended accreditation standards, and most of the drawing software and browsers began to support the PNG image browsing, the PNG image format of the vibrant glow.

IE browsers support PNG image browsing starting with version 4.0.

Feature 1: Both GIF and JPG color mode.

We know that the GIF format image uses the index color pattern below 256 colors, and JPG uses the 24-bit true color pattern. PNG not only stores the index color image below 256 colors, but also stores 24-bit true color images and can even store up to 48-bit super color images.

The characteristic 2:png can compress the image file to the limit to facilitate the network transmission, but can retain all the information related to the image quality.

If your image is based on text, shapes, and lines, PNG uses a GIF-like compression method to get a better compression rate without destroying any details of the original image. According to the International Network Consortium, the eight-bit PNG image is 10% to 30% smaller than the same GIF image.

For a class of compression for photo quality, PNG uses a JPG-like compression algorithm. But the greater the degree of JPG compression, the worse the image quality. Because its compression is the use of destructive compression, each compression at the same time it is more or less missing some pixels. PNG differs from JPG in that it deals with photo-like images using non-destructive compression, which, after compression, retains the same image quality as before compression, without distortion.

Feature 3: More optimized transmission display.

An image processor familiar with GIF format knows that GIF images have two modes,--normal (normal) and interlaced (interleaved) patterns. Interlaced mode is more suitable for network transport. In the process of transmitting the image, the viewer first sees a rough outline of the image and then slowly clear it. PNG also takes the interlaced mode, allowing the image to be horizontally and vertically on-screen, speeding up the download speed.

Feature 4: Supports image transparency display.

GIF format, while also supporting transparent display, transparent images in GIF format are too rigid, because GIF transparent images only 1 and 0 transparent information, only transparent or opaque choice, there is no hierarchy, and PNG provides the Alpha band 0 to 255 of transparent information, can make the transparent area of the image appear depth different levels.

The PNG image will allow the image to be overwritten with no background to see the seams, improving the GIF transparent image of the poor stroke problem.

Feature 5: Good compatibility.

GIF images appear differently on different systems, but PNG allows you to make images on the Macintosh exactly the same as those shown on Windows, and vice versa.

PNG is designed to be transmitted over the network to any machine and operating system for reading.

Text data (such as author, source), Storage mask (MASK), gamma value, color correction code and other information can be mixed in the PNG image transmission.

Several discoveries:

Opaque and indexed-transparent pictures, PNG8 has an advantage over GIF.

Alpha-transparent pictures, Png8 better than GIF, but larger files.

PNG24 has no transparency effect: Includes index-color transparency and alpha transparency.

Different browsers, the display effect is not the same.

Firefox: Supports PNG8 index-color transparency, PNG8 and PNG32 alpha transparency.

IE: Supports PNG8 index-color transparency, but does not support alpha transparency for PNG8 and PNG32. (Can be resolved with JS+CSS filter)

Photo-class images used in Web pages, JPG files are generally much smaller than png24. However, special circumstances are not excluded.

SVG image format

SVG is a scalable vector graphic. It is based on XML and developed by the consortium. Strictly speaking, it should be an open standard vector graphics language that allows you to design exciting, high-resolution web graphics pages.

Users can use code to describe the image, can use any word processing tools to open the SVG image, by changing some of the code to make the image interactive, and can be inserted into the HTML at any time through the browser to watch.

SVG provides the current network popular format GIF and JPEG does not have the advantage: you can zoom in any graphic display, but never at the expense of image quality;

Text preserves editable and searchable state in SVG images; On average, SVG files are much smaller than JPG and GIF files, and thus are downloaded quickly.