HTML and CSS Reference
In-Depth Information
With multilayered graphics, preserving the i nal Web image in PNG format will save editing
time. In this particular example, in a JPEG i le, erasing the wrong label and replacing it with
the correct one in a space below the main image is not too dii cult. However, with more
complex graphics that include several layers, rather than having to redo the entire graphic,
designers can just edit the layer.
179
Figure 9-2: PNG fi le with preserved layer and transparent background (shown in a graphic editor).
h e only unfortunate problem in preserving layers in a PNG i le is that it increases the size of
the i le. h e JPEG i le is only 33 kilobytes (KB) and the PNG is 225 KB. However, in the next
section, you'll see how to reduce the size of a i le so that you may be able to maintain layers
and still have a i le that loads quickly.
WORKING WITH GRAPHIC FILE SIZES
Given the dif erent kinds of Web graphic i les that can be loaded, the temptation is to use the
type that has the smallest i le size. Indeed, in some cases, that is the way to go. However, when
your site needs the highest quality, the trick is to see how to get the highest quality with the
lowest bandwidth use — the format with the smallest settings. Unless you're using SVG
format, remember the key Web bitmapped graphic dictum:
Do not ever change a bitmapped graphic's dimensions with HTML5 attributes within an
element.
