HTML, XHTML & CSS

Chapter 7: Finding and Using Images
✓ Joint Photographic Experts Group (JPEG): The JPEG file format supports
24-bit color (millions of colors) and complex images, such as photographs.
JPEG is cross-platform and application-independent. A good
image editing tool can help you tweak the compression so you can strike
an optimum balance between the image’s quality and its file size.
✓ Portable Network Graphics (PNG): PNG is the latest cross-platform and
application-independent image file format. It was developed to bring
together the best aspects of GIF and JPEG. PNG has the same compression
as GIF but supports 24-bit color (and even 32-bit color) like JPEG.
Any good graphics editing tool, such as those mentioned in Chapter 23, allows
you to save images in any of these formats. Experiment with them to see how
converting a graphic from one format to another changes its appearance and
file size, and then choose whichever format produces the best results.
Table 7-1 shows guidelines for choosing a file format for images by type.
Table 7-1 Choosing the Right File Format for an Image
File
Format
GIF Line art and other images with
few colors and less detail
JPEG Photos and other images with
millions of colors and lots of
detail
PNG Photos and other images with
millions of colors and lots of
detail
Best Used For Watch Out
Optimizing images
Don’t use this format if you have a
complex image or photo.
Don’t use with line art. This format
compromises too much quality when
you compress the file.
Don’t use with line art. PNG offers
the best balance between quality
and file size.
As you build graphics for your Web page, maintain a healthy balance between file quality and file
size. If you poke around with your favorite search engine, you can find good tutorials on trimming
image file sizes and optimizing entire sites for fast download. For tips and tricks to help you build
pages that download quickly, review these handy resources:
✓ Optimizing images: www.yourhtmlsource.com/optimisation/image
optimisation.html
✓ Optimizing Web graphics: www.websiteoptimization.com/speed/12
107