1.JPEGThe JPEG format is a compressed picture format that is balanced in size and quality. In layman's words, it is: high compression ratio = low image quality = Small file size. Conversely, low compression ratio = high picture quality = large file size. Because JPEG files cannot hold 100 of the original image's pixel data, it is not considered a lossless image format.
Use:
Thanks to this extremely sensitive balancing feature, JPEG is ideally suited for use in images (PHOTOS) where there is a wide range of pixels that allow for slight distortion. Conversely, JPEG format picture is not suitable for simple color (less tonal) pictures, such as logo, a variety of small icons (ICONS).
2.GIFGIF format is a specially developed picture format for making pictures available on online applications. Gif, sometimes also known as "Giff", is a lossless, 8-bit picture format. "Lossless" means 100% of the pixel data information that keeps the original image. The professional noun "8-bit" means the color depth that can be represented--a 8-bit image can only support a maximum of 256 different colors (a picture of an extra 256 colors will appear distorted if it is saved with a GIF image).
use:Due to the 8-bit color depth limit, GIF is not suitable for use in a variety of color-rich photo storage scenarios. But it is ideal for applications in the following situations:
* Logo
* Small Icons (icon)
* Picture for layout (e.g. a layout corner, border, etc.)
* Simple, small picture occasions with 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 this picture through these invisible areas. This feature is useful: if you need to place the contents of a GIF picture on top of all the pictures, you can set it to transparent.
Compression Characteristics:The GIF format is compressed using the LZW algorithm, which is a patent for the Unisys application. Long, long ago, if you wanted to use the GIF format, it would mean you would need to pay Unisys for a patent license. But happily, this patented technology expired on June 20, 2003, and we can now use GIF for FREE!
Interlaced scanning:GIF also supports interlaced scanning. Interlaced scanning allows images to be loaded and displayed more quickly in the browser. This feature is especially useful for those with slow speeds.
Animated GIF:
A dynamic GIF file, which is a dynamic picture that is connected by several frames of pictures. When displayed, these dynamic frames are read over and over again to create a simple animation effect. The reasonable use of GIF animation can add static and dynamic effects to the Web page, and overuse will make the Web page messy.
3.PNGPNG, read "Ping", was initially developed as a free alternative to GIF, using a public-patented compression algorithm. PNG format is also a lossless compression, but unlike GIF format, PNG supports both 8-bit and 24-bit images.
8-bit PNG image:A 8-bit PNG image that supports transparent backgrounds with no 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 images is basically the same as the GIF format,
* Logo
* Small Icons (icon)
* Picture for layout (e.g. a layout corner, border, etc.)
* Simple, small picture occasions with no more than 256 colors
24-bit PNG image:24-bit PNG that 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 amount of transparency set.
support for PNG:Because of the widespread use of the PNG format and the developer's emphasis on Web standards for Web pages, PNG support from different browsers is very important. Fortunately, however, the mainstream browsers on the market now have good support for PNG formats, including: ie*, Firefox, Safari, Opera, and Konqueror.
*Unfortunately, browsers with IE6 and IE6 below are not good at supporting PNG transparent backgrounds. However, we can still solve this problem by other means, see how to display transparent PNG in IE6 in detail.
Common image formats for web development
