The reasonable selection of picture format in Web development

To some extent, to judge whether a web designer is good or not, you can draw a conclusion from its rational use of various picture formats in Web development (or web design). In fact, perhaps everyone knows that images exist in gif,jpg and PNG formats, but not everyone knows the exact difference between them and the skills they use.

Next, we'll introduce you to some of the most popular picture formats in web development in the past and present and how to use them correctly.

1.JPEG

The JPEG format is a compressed picture format that is balanced in size and mass. In layman's terms, it is: high compression ratio = low picture quality = Small file size. Conversely, low compression ratio = high picture quality = large file size. Because JPEG files cannot maintain the pixel data of 100% of the original image, it is not considered a lossless image format.

Use:

Because of this extremely sensitive balancing feature, JPEG is ideal for applications that allow for slightly distorted pixel color-rich picture (photo) occasions. Conversely, JPEG format pictures are not suitable for simple colors (less tonal) pictures, such as logos, various small icons (ICONS).

2.GIF

GIF format, which is a specially developed picture format that enables pictures to be applied to online applications. Gif, sometimes also become "Giff", is a lossless, 8-bit picture format. "Lossless" refers to the 100% pixel data information that keeps the original image. Professional noun "8-bit" refers to the color depth that can be displayed--a 8-bit image can only support 256 different colors (a picture with an extra 256 colors will appear distorted if it is saved with a GIF image).

Use:

Because of the 8-bit color depth limitations, GIF is not suitable for use in a variety of colors too rich photo storage occasions. But it is very suitable for applications in the following situations:

* Logo

* Small Icons (icon)

* Pictures for layout (e.g. a layout corner, border, etc.)

* Simple, small picture situations containing no more than 256 colors

Transparency Features:

GIF supports basic transparency features, which means that you can make certain pixels of a picture "invisible". When it is placed in a Web page, we can see the background color (picture) behind the picture through these invisible areas. This feature is useful: if you need to place the contents of an GIF picture on top of all the pictures, you can set it to be transparent.

Compression characteristics:

GIF format using the LZW algorithm for compression, this algorithm is a Unisys application of a patent. A long, long time ago, if you wanted to use the GIF format, that meant you would have to pay Unisys for a patent license. However, it is gratifying that this patented technology expired on June 20, 2003, we are now free to use GIF!

Interlaced scanning:

GIF also supports interlaced scanning. Interlaced scanning enables images to be loaded and displayed faster in the browser. This feature is especially useful for surfers who are slow to speed.

Animated GIF:

A dynamic GIF file is a dynamic picture that is connected by a number of frame images. When displayed, these dynamic frames are repeatedly drawn and read to create a simple animation effect. A reasonable use of GIF animation can add static and dynamic effect of the Web page, and excessive use will make the Web page messy.

3.PNG

PNG, read "Ping", was initially developed as a free alternative to GIF, using a public patent compression algorithm. PNG format is also a lossless compression, but unlike the GIF format, PNG supports both 8-bit and 24-bit images.

8-bit PNG image:

A 8-bit PNG image that supports transparent backgrounds and cannot have more than 256 pixel colors. In addition to the compression algorithm, this 8-bit PNG format is very similar to the GIF format;

Use:

The use of 8-bit PNG pictures is essentially the same as the GIF format,

* Logo

* Small Icons (icon)

* Pictures for layout (e.g. a layout corner, border, etc.)

* Simple, small picture situations containing no more than 256 colors

24-bit PNG image:

24-bit PNG, which supports 1.6 million different pixel colors and supports alpha transparency, which means that PNG images can blend well with the background regardless of the transparency setting.

Support for PNG:

Thanks to the extensive use of PNG format and the fact that developers attach more importance to Web standards for Web pages, the support of PNG for different browsers is significant. Fortunately, however, the prevailing browsers in the market now have good support for the PNG format, including: Ie,firefox,safari,opera,and Konqueror.

* But unfortunately, the browsers below IE6 and IE6 do not support PNG's transparent background. However, we can still solve this problem in other ways, for more information, see How to display transparent PNG normally in IE6.