The selection of image format in HTML page I see 1th/2 Page _ Experience Exchange

Source: Internet
Author: User
Let's take a look at the more formal explanations of several formats (note: The following are from Baidu know):

GIF is Graphics Interchange Format (Graphics Interchange Format), GIF image extension is gif. Now all graphics browsers support GIF format, and some graphics browsers only know the GIF format. GIF is an indexed color format, in the case of a small number of colors, the resulting file is very small, its advantages include:

GIF format supports background transparency. GIF picture if the background color is set to transparent, it will be combined with the browser background to produce a picture that is not rectangular.
GIF format supports animations. GIF animations can be said to be the only animated form in a Web page before Flash animations appear. The GIF format can combine single-frame images, and then play each frame in turn and become animated. Although not all graphics browsers support GIF animations, the latest graphics browsers already support GIF animations.
GIF format supports graphic progression. Gradual refers to the picture gradually displayed on the screen, the progressive picture will be faster than the non-progressive picture appears on the screen, so that visitors can quickly know the picture.
GIF format supports lossless compression. Lossless compression is an effective way to compress pictures without losing the details of a picture, and because the GIF format uses lossless compression, it is better suited to lines, icons, and drawings.
The disadvantages of the GIF format are also quite obvious. Index color is a legacy of history, in DOS of the old game with almost no exception to the use of indexed color, this format should have been eliminated already. But because of bandwidth constraints, GIF from the DOS era to the internet age. The biggest drawback of this indexed color format is that it has only 256 colors, which is clearly not enough for picture quality pictures.

JPEG represents the joint Photograhic Experts Group (Federated image expert team), which is often written as a jpg with an extension of jpg,jpg pictures.

JPG's main advantage is the ability to support millions of colors, which can be used to represent photos. In addition, JPG images use more efficient lossy compression algorithms, which make the file length smaller and download time shorter. lossy compression discards certain details in the image to reduce the length of the file. Its compression ratio is quite high, the use of special JPG compression tool its compression ratio of up to 180:1, and image quality from the view of the quality of viewing is not too much damage, which greatly facilitates network transmission and disk exchange files. A JPG is better suited to a photograph than a GIF, because losing some detail in a photograph is not as obvious as the art line. In addition, JPG to the photo compression ratio is larger, and the final quality is also better.

But in the long run, with the increasing bandwidth and the development of storage media, JPG should also be a obsolete picture format, because lossy compression can cause unrecoverable loss to the image. So compressed JPG pictures are generally not suitable for printing, and it is best not to use JPG when backing up important pictures. Also, JPG is not as flexible as a GIF image, and it does not support graphic progression, background transparency, or animation.

PNG was developed in the mid 1990s as an image file storage format designed to attempt to replace GIF and TIFF file formats while adding features that are not available in GIF file formats. The streaming Network Graphics format (Portable Network Graphic format,png) is derived from the unofficial "PNG ' not GIF", a bitmap file (bitmap file) storage format, read as "Ping." When PNG is used to store grayscale images, grayscale images can be as deep as 16 bits, and when storing color images, color images can be as deep as 48 bits and can store up to 16 bits of alpha channel data. PNG uses a lossless data compression algorithm derived from LZ77.

The PNG file format preserves the following attributes of the GIF file format:

Use a color lookup table or a palette to support 256 colors of color images.
Streaming read/write performance (streamability): Image File format allows continuous readout and writing of image data
This feature is ideal for generating and displaying images during the communication process.
Successive approximation displays (progressive display): This feature enables the transmission of image files on the communication link at the same time on the terminal to display the image, the entire contour display after the gradual display of the details of the image, that is, first display the image with low resolution, and then gradually improve its resolution.
Transparency (transparency): This performance allows some parts of the image to be displayed and used to create some distinctive images.
Auxiliary information (Ancillary information): This feature can be used to store some textual annotation information in an image file.
Independent of computer hardware and software environment.
Use lossless compression.
In the PNG file format, add an attribute that is not in the following GIF file format:

A true color image of 48 bits per pixel.
A grayscale image of 16 bits per pixel.
You can add alpha channels to grayscale and true color graphs.
Add gamma information for the image.
Use cyclic redundancy code (cyclic redundancy CODE,CRC) to detect damaged files.
To speed up the display of the image display method of successive approximation.
A standard read/write toolkit.
You can store multiple images in one file.
File structure
Current 1/2 page 12 Next read the full text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.