Web Design You should know about the image format selection tips

In web Design , the graph output refers to the designer to convert the original artwork at hand to the image format of the Web page, and to the next staff page layout of the important steps. Choose suitable picture format not only can let the interface design get reasonable display effect, even can effectively control the file size, save download time, effectively reduce the burden of the server.
As an example of the most commonly used Photoshop and Illustrator for UI designers , the "Save for Web Page ..." feature is available. Unlike the default disk mode, in this mode, the software provides the options for the quality adjustment of the simulation diagram file output, the file size control, and other requirements for the Web map files:

I believe many people know that the most commonly used formats in Web design are JPG, GIF, PNG, and so on, but not all of them know the actual difference between them and what format to choose. What happens most often is that the output after GIF selection looks bad, so PNG (24) seems to pop up all of a sudden, no matter how many times the size of the picture is.

JPEG
Because of the limitations of older computer systems and file systems, the file name of the computer and the extension are specified in the format 8.3, so the file name of the JPEG is abbreviated. Jpg. JPEG can be said to be the most familiar image format, I believe that in the popularity of digital cameras now, almost every digital camera, camera phone can (and even only) output JPEG format files. JPEG is a very typical use of destructive compression (lossy compression) of the image file format, that is, each time the user of the JPEG archive action, the contents of the document will be destroyed, this feature is not obvious to the naked eye, but it can effectively reduce the file size of the image.
As with these JPEG devices, JPEG is ideal for storing pixels with color-rich images, such as photographs, and so on, even if they are slightly distorted and not easily noticed: and conversely, JPEG is not suitable for storing lines, icons, text, etc. with sharp edges.
repeated JPEG file storage will permanently destroy the details in the image.

Gif
Gif has relative characteristics to JPEG in many features and manifestations. GIF uses lossless compression format (Lossless Compression), but it restricts color performance and saves file size effectively. GIF only has 8-bit color depth information, so-called 8-bit refers to 2 8 is the 256 color, when your picture appears in the color within 256 colors, using GIF can get quite good output quality, while taking into account the file size. GIF is therefore ideal for showing the output of icons, UI interfaces, line illustrations, text, and so on.
GIF also supports transparent backgrounds, animated graphics, and almost no support issues: almost 100% of browsers support it.

Since JPEG and GIF have so many different features, we can easily choose when to use which format to output the files we need.
When the picture has a rich color, and there is no sharp contrast of the edge line, choose JPEG to get the best results, such as the picture is the best example:

(left: Photoshop output JPEG default: Quality: High, compression quality 60%, optimized output.) Right: Photoshop output GIF default: 256 color, diffused process color

When a picture is a line chart with a clear edge, doesn't use too much color, or even needs a transparent background, GIF is a perfect choice for small files and beautiful images.

(: Photoshop outputs gif:64, diffused process color.) : Photoshop Output JPEG default: Quality: High, compression quality 60%, optimized output)

Png
PNG was originally developed to be used as an alternative to GIF, as a new image transfer file format, PNG also uses lossless compression format, in fact, the development of PNG is due to the lossless compression format used in GIF patent problem.
PNG is divided into PNG-8 and PNG-24 two formats, PNG-8 features close to GIF and supports 256-color and transparent backgrounds. The PNG-24, however, supports up to 1.6 million colors.

Although PNG does not support animations, PNG-24 supports alpha transparency, which can be said to be the most eye-lit PNG-24. This means that when you use PNG to output a file, you can effectively support different transparency effects. This is undoubtedly a good news for web designers, like this picture is actually the use of three PNG-24 pictures in the page layout of the effect:

In most cases, the UI design division must select different drawing formats according to the picture requirements and make appropriate adjustments to them. Although PNG-24 looks perfect, the corresponding increase in file size is of course. There is also the issue of browser support, although almost most of the browsers now support the PNG-24 format, but unfortunately IE6 is not supported transparent PNG file, there are still a considerable number of users in the use of IE6 or earlier versions, although the proportion will be less, But the designer has to think about it, whether to consider using GIF instead, or to support the transparent PNG format via script at the terminal.