Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 130

FAQ

Why does my text image look jagged?

If your image looks jagged, your graphic designer did not use antialiasing (sometimes called
smoothing). Antialiasing is the process of creating a slight blur to smooth the jagged (stair-step)
edges found in digital images. In Figure 4.9, the top image was created using antialiasing and
the bottom was not. Note the jagged edges in the bottom image. The only letters not affected
are the “l” and “i” because the shapes of these letters are perfectly horizontal and vertical.

Figure 4.9
Notice the smoother
look of the top line
of text

JPEG Images

Joint Photographic Experts Group (JPEG) images are best used for photographic
images. In contrast to a GIF image, a JPEG image can contain 16.7 million colors.
However, JPEG images cannot be made transparent and they cannot be animated. JPEG
images usually have a .jpg or .jpeg file extension.

Compression. Another difference between GIF and JPEG images is that when JPEG
images are saved lossy compression is used. This means that some pixels in the original
image are lost or removed from the compressed file. When a browser renders the com-
pressed image, the display is similar but not exactly the same as the original image.

Optimization. There are trade-offs between the quality of the image and the amount
of compression. An image with less compression will have higher quality and result in a
larger file size. An image with more compression will have lower quality and result in a
smaller file size. Most graphics applications allow you to preview the quality/compres-
sion trade-off and choose the image that best suits your needs.

When you take a photo with a digital camera, the file size is too large for optimal
display on a Web page. Figure 4.10 shows a JPEG image that is stored in a 205KB file.
The same image was saved using a graphics application at various quality levels:
Figure 4.11 was saved with 80 percent quality and is 55KB; Figure 4.12 was saved
with 20 percent quality and is 19KB, but its quality is unacceptable. View these images
to gain a perspective on the quality/size trade-off. You should notice that the quality of
the image degrades as the file size decreases. The square blockiness you see in Figure 4.12
is called pixelation .

Another method to optimize JPEG images is to use a graphics application to reduce the
dimensions of the images. Figure 4.13 shows a small version, or thumbnail, image of
acceptable quality.