HTML and CSS Reference
h e dif erences between the two photos with the dif erent settings is minimal, but the
dif erence in the kilobytes is quite large — 8K versus 115K. On a video monitor, the image in
Figure 9-8 on the let has poorer dei nition around the edges, but if the primary audience has
very low bandwidth available, cutting down the size of JPEG i les won't signii cantly cut down
on the quality of the image.
h e image in Figure 9-8 was photographed with a Webcam, and digital photographs taken
with higher-quality cameras show far more detail that may be lost with the loss of information
taken out when a i le size is reduced. However, very high-quality digital photos have to be
reduced signii cantly in size to be practical for the Web.
Good lighting saves bandwidth
Regardless of the kind of camera you're using, a well-lighted image is going to look better than
a poorly lighted one. Everything we see (and your camera sees) is the rel ection of light of
objects. If you pay just a little attention to the lighting of your subject, your digital images will
You don't need a lighting studio to take good photographs, but by adding light correctly, your
digital photo is going to look better, and you'll be able to remove more information from the
i le and still have it look good enough to put on the Web. Here are some tips:
Use dif used light. If you take a picture on a cloudy day, the pictures generally turn out
better. h at's because the clouds dif use the light. (If you've ever seen those photos where
the unfortunate subjects have to line up and squint into the sun, they not only look
squinty, the photos are overexposed.) For indoors, aim a light at white paper and let it
bounce the light onto the subject. A crumpled up piece of aluminum foil l attened out
does a good job of dif using light.
Use natural light where possible. If you're taking indoor photos, open the curtains and
blinds and let in the natural light.
Changing PNG and GIF fi le sizes
Turning now to changing i le sizes with PNG and GIF i les, the dif erences tend to be more
signii cant with the reduction of i le size and the accompanying information that is removed.
Take a look at Figure 9-9, and you can immediately see that the dif erent settings have
dif erent quality levels.
In Figure 9-9, the top two images are GIF i les and the bottom two are PNG. When GIF i les
are reduced, they lose colors. h e top-let image has only 32 colors and the one on the right
has 256 (which isn't a whole lot either). In comparing the sizes of the two GIF i les, the one on
the top-let is only half the one on the right. Compare that with the dif erent quality levels
using JPEG i les in Figure 9-5.
h e two PNG i les are labeled PNG-24 (let ) and PNG-8 (right). h e PNG-8 format has only
128 colors, while PNG-24 can handle millions of colors. h e 8 and 24 refer to 8-bit and 24-bit
color processing. In a nutshell, PNG-24 is of a higher quality.