HTML and CSS Reference
In-Depth Information
At one time, not all browsers supported the PNG format and some developers didn't use it,
despite its many advantages. However those days are long gone, and any browser that sup-
ports HTML5 will support PNG. As a result, any HTML5 developer or designer can use PNG
i les without fear of the browser not being able to load them.
PRESERVING LAYERS IN WEB GRAPHICS
One of the big advantages of PNG i les is that they preserve layers. Designers who use tools
like Adobe Illustrator, Adobe Fireworks, and Adobe Photoshop organize their graphics in
layers. A simple application of a layer is labeling a photograph. For example, suppose you
have a photograph that you label and save as a JPEG i le, as shown in Figure 9-1.
178
Figure 9-1: A JPEG image with embedded label.
At er you i nish the graphic and save it as a JPEG i le, you realize that it's mislabeled. It's a
morning glory, not a daisy. Because the i le is saved in JPG format, the layer with the Daisy
label is not preserved. When you edit the i le, you'll i nd that the label is fused with the rest of
the graphic.
With a PNG i le, not only are the layers preserved, but if you use a transparent background, it
picks up the background of your Web page, and the transparency is preserved. Figure 9-2
shows that the simple swapping of layers i xes the label problem and provides a transparent
background.
