The difference and selection of image format embedded in HTML page

Picture format is the format of the computer to store pictures, the common storage format has Bmp,jpg,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw and so on.

　　Commonly used in HTML pages are: Bmp,bmp,jpg,gif.

BMP is a hardware device independent of the image file format, the use of very wide. It uses bit-mapped storage format, in addition to image depth optional, no other compression, so theBMP file occupies a large space. BMP file Image depth selectable lbit, 4bit, 8bit and 24bit. BMP files when storing data, the image is scanned in order from left to right, from bottom to top.

Because the BMP file format is a standard for exchanging graph-related data in a Windows environment, graphic image software that runs in a Windows environment supports BMP image formats.

The typical BMP image file consists of three parts: the bitmap file header data structure, which contains BMP image file type, display content and other information, bitmap information data structure, it contains BMP image width, height, compression method, and define color and other information.

As for the BMP cross-platform capability is strong, mainly because of its early birth, no compression, many supporters, used to be the only image format across windows,MAC .

gif means Graphics Interchange Format (Graphics Interchange), and GIF images have a gif extension. All graphics browsers now 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 are mainly:

The 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 non-rectangular picture.
GIF format supports animations. Before Flash animations appear, GIF animations can be said to be the only animated form in a Web page. The GIF format can combine single frame images and then play each frame in turn to be animated.  Although not all graphics browsers support GIF animations, the latest graphics browsers already support GIF animations.
GIF format supports graphics progressive.  Progressive refers to the image gradually displayed on the screen, progressive images will appear more quickly than non-progressive pictures on the screen, allowing visitors to know the picture more quickly.
lossless compression is supported in the GIF format.  Lossless compression is an effective way to compress a picture without losing the details of the image, which is more suitable for lines, icons, and drawings, since the GIF format uses lossless compression.
the disadvantage of GIF format is also quite obvious. Index color is a legacy of history, in the old game under DOS almost no exception to the use of indexed color, this format should have been eliminated long ago. However, due to bandwidth constraints, GIF from the DOS ERA red to the internet era. GIF The biggest drawback of this index color format is that it has only 256 colors, which is obviously not enough for picture quality pictures.

JPEG represents joint Photograhic Experts Group (Joint Photographic Experts Group), which is often written as a jpg,jpg image with the extension jpg.

The main advantage of JPG is the ability to support millions of colors, which can be used to represent photos. In addition, because JPG images use a more efficient lossy compression algorithm, the file length is smaller and the download time is shorter. lossy compression discards some of the details in the image to reduce the file length. Its compression ratio is quite high, using a dedicated JPG compression tool with a compression ratio of up to 180:1, and image quality from the viewing angle of the quality damage will not be too large, which greatly facilitates network transmission and disk exchange files. JPG is more suitable for a photo than a GIF because losing some detail in a photo is not as obvious as an art line. In addition, JPG compresses photos more, and the final quality is better.

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

PNG is an image file storage format that was developed in the mid 1990s to attempt to replace GIF and TIFF file formats while adding features not available in the GIF file format. The streaming web graphics format (Portable Network Graphic format,png) is named after the unofficial "PNG's not GIF", which is a bitmap (bitmap file) storage format that reads "Ping". 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.  PNG uses a lossless data compression algorithm derived from LZ77.

the PNG file format preserves the following characteristics of the GIF file format:

Color images can be supported in 256 colors using a color lookup table or a palette.
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 communication.
successive approximation displays (progressive display): This feature enables the transmission of image files on the communication link while displaying the image on the terminal, showing the entire contour after the image is displayed progressively, that is, the image is displayed in low resolution, and then gradually improves its resolution.
Transparency (transparency): This performance allows some parts of the image to not be displayed to create some distinctive images.
Auxiliary Information (ancillary information): This feature can be used to store some text annotation information in an image file.
independent of the computer hardware and software environment.
use lossless compression.

in the PNG file format, add features that are not in the following GIF file format:
a true color image of 48 bits per pixel.
a grayscale image of 16 bits per pixel.
Alpha channels can be added for grayscale and true color graphs.
adds the gamma information for the image.
Use cyclic redundancy codes (cyclic redundancy CODE,CRC) to detect damaged files.
speed up the display of images by successive approximation.
Standard read/write toolkit.
You can store multiple images in one file.

The difference and selection of image format embedded in HTML page