Selection techniques of picture format in web design

In web design, the graphic output is an important step for the designer to convert the original artwork at hand to the image format used in the Web page and to submit the next person's Web page layout. Choosing the right picture format will not only make the design get a reasonable display effect, but also can effectively control the file size of the image file, save download time and effectively reduce the burden of the server.

For example, the most commonly used Photoshop and Illustrator for designers provide the function of "Save as Web ...". Unlike the default save mode, in this mode, the software provides the output of the simulation diagram file quality adjustment, file size control and other requirements for the page map file options:

I believe many people know that the most commonly used format in web design is JPG, GIF, PNG, and so on, but not all people know the actual difference between them and when to choose the format. What happens is that the output of the selected GIF looks bad, so PNG (24) seems to pop up all of a sudden, regardless of how many times the size of the picture is.

Jpeg

Because of the limitations of the old computer system and the file system, the file name of the computer and the extension are specified in the format 8.3, so the JPEG file name is abbreviated as. 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 (or even only) output JPEG graphics files. JPEG is a very typical use of destructive compression (lossy compression) of the graphics format, that is, each time the user to the JPEG archive action, the contents of the image will be destroyed, this feature is not obvious to the naked eye, but it can effectively reduce the file size of the image file.

Like these JPEG devices, JPEG is ideal for storing pixel-rich images, such as photos, and so on, which are not easily detectable even if they are slightly distorted: Conversely, JPEG is not suitable for storing lines, icons or text, and so on with clear edges of the picture

Storing the files repeatedly for JPEG images will permanently destroy the details in the picture.

Gif

Gif has a relative feature with JPEG in many features and manifestations. GIF uses lossless compression format (lossless Compression), but it restricts color performance and can effectively save file size. GIF only has 8 bits of color depth information, the so-called 8-digit refers to 2 8 times 256 color, when your picture appears in the color within 256, use GIF can get a good output quality, while taking into account the size of the file. GIF is therefore ideal for performing the output of icons, UI interfaces, line illustrations, text, and so on.

GIF also supports transparent backgrounds and animated graphics formats with little concern for support: almost 100% of browsers support it.

Because JPEG and GIF have so different characteristics, we can easily choose when to use the format to output the image we need.

When the image is rich in color, and there is no obvious sharp contrast edge lines, the choice of JPEG can get the best output, such as photos is the best example:

(left: Photoshop output JPEG Default value: Quality: High, compression quality 60%, optimize output.) Right: Photoshop output GIF default: 256 color, diffusion process color

GIF is a perfect choice when a picture is a line chart with a clear edge, not using too many colors, and may even need a transparent background, and the file is small, and beautifully decorated.

(Above: Photoshop output gif:64 color, diffuse process color.) Figure: Photoshop Output JPEG defaults: Quality: High, compression quality 60%, optimize output

Png

PNG was originally developed to serve as an alternative to GIF, as a new development image transfer file format, PNG also uses lossless compression format, in fact PNG development is due to the use of GIF lossless compression format patent problems.

PNG is divided into PNG-8 and PNG-24 two formats, PNG-8 features are close to GIF, support for 256 colors and transparent background features. 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 one of PNG-24 's most visually lit places. That is, you can effectively support different transparency effects when you use the PNG output map. This is certainly good news for web designers, like this one, which uses three PNG-24 images to be formatted in a Web page:

In most cases, the designer must choose a different document format based on the needs of the picture and make appropriate adjustments to it. Although PNG-24 looks perfect, the corresponding of course is the increase of file size. There is also the problem of browser support, although most browsers now support the PNG-24 format, but unfortunately IE6 does not support transparent PNG map, there are still a considerable number of users in the use of IE6 or earlier versions, although the proportion will become less But designers have to take it into consideration, whether to consider using GIF substitution or to support the transparent PNG format through script at the end of the program.