Graphics on the Web 35PrinciplesWeb DesignGraphics on the WebWeb Design in a Nutshell, eMatter Editionthe compression process, but in most cases, the degradation of the image is not
detrimental or even noticeable.
Photographic images, or any image with subtle gradations of color, are best saved
as JPEG files because they offer better image quality packed into a smaller file.
JPEGs, however, are not a good solution for flat, graphical images because they
tend to mottle colors and the resulting file will generally be a lot larger than the
same image saved as a GIF.
See Chapter 15,JPEG Format,for complete information on the JPEG file format.
The amazing PNG
There is a third graphic format vying for substantial usage on the Web—PNG
(Portable Network Graphic), which, despite some very attractive features has been
more or less lurking in the shadows since 1994. It is only recently that browsers
have begun supporting PNGs as inline graphics, but PNG is poised to become a
very popular web graphic format. For this reason, it is optimistically included here
in the “big three.”
PNGs can support 8-bit indexed color, 16-bit grayscale, or 24-bit true color images
with a “lossless” compression scheme, which means higher image quality, and in
some cases, file sizes even smaller than their GIF counterparts. Not only that, PNG
files have some nifty features such as built-in gamma control and variable transpar-
ency levels (which means now you can have a background pattern show through
a soft drop-shadow).
See Chapter 16,PNG Format, for complete information on the PNG file format.
Image Resolution
Simply put, all graphics on the Web need to be low-resolution—72ppi (pixels per
inch). Since web graphics are always displayed on low-resolution computer
screens, higher resolution files are unnecessary.
Working at such a low resolution can be quite an adjustment for a designer accus-
tomed to handling the 300ppi images appropriate for print. Most notably, the
image quality is lower because there is not as much image information in a given
space. This tends to make the image look more grainy or pixelated, and unfortu-
nately, that’s just the nature of images on the Web.
Measuring Resolution
Because web graphics exist solely on the screen, it is technically correct to
measure their resolution in pixels per inch (ppi). Another resolution
measurement, dpi (dots per inch), refers to the resolution of a printed
image, dependent on the resolution of the printing device.
In practice, the terms dpi and ppi are used interchangeably. It is generally
accepted practice to refer to web graphic resolution in terms of dpi.