Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 333

(for example, IE6 had a buggy support for alpha-channel transparency). There were color inconsistencies between
various browsers, partly because of the different handling of gamma correction (for example, colors of PNG images
were displayed incorrectly on Safari for Windows). Fortunately, modern browsers overcame these issues.
To choose the right file format for a given image, the main features of file types and compression algorithms
should be considered (Table 9-2 ).

Table 9-2. Quick Comparison of JPEG, GIF, and PNG

JPEG GIF PNG

Maximum color depth 24-bit 8-bit 48-bit

Palette Full Restricted Optional

Compression Lossy (in most cases) Lossless Lossless

Transparency - + +

Interlaced mode + (progressive JPEG) + +

Animation - + - 9

Optimal usage Photographs Icons, logos, diagrams

(geometric shapes),
clipart, cartoon-style images,
and small animations

Photographs, partially
transparent photographs,
icons, and logos

For example, a simple image such as a solid circle can be stored with two colors in GIF with a very small file size
compared to other formats such as JPEG. For images that have no complex content, the color depth can be reduced
with color palettes (selected/indexed colors) in file formats such as GIF, TIF, and PNG. Anti-aliased images need a
larger color depth resulting in a larger file size. Although GIF and PNG formats are usually better than JPEG for storing
icons and logos, the SVG vector format should be preferred for such content (see the section “Vector Graphics”).
Although it is very efficient on photographs, the JPEG compression algorithm adds additional pixels to the whole
image, including solid areas. As a result, simple images become more complex than they were originally. This is the
main reason why a solid circle stored in JPEG has several times larger file size than a GIF file with the same content
even if the compression is high. Moreover, if the compression ratio is high, JPEG artifacts become noticeable, resulting
in lower image quality. On the other hand, JPEG works perfectly on complex images. If the compression is set
properly, the image quality to file size ratio is excellent.

File Size Optimization
Pixel density, resolution, dimensions, color depth, compression ratio, image complexity, and file format all have a
large impact on file size.
The width and height should be optimized by cropping irrelevant parts of the image especially for scanned and
high-resolution images where image parts can often be removed without losing information.
The required color depth must be used; 24-bit color depth is the default setting in many software tools, which
can be reduced in many cases without affecting image quality. For example, black-and-white drawings should not be
stored with 16 million colors.
The proper compression ratio must be used for all images.
The size-quality ratio can be effectively optimized with the File ➤ Save For Web & Devices... function of
Photoshop (Figure 9-9 ).

9 There is an extension called Animated Portable Network Graphics (APNG) that supports animation. APNG is natively supported
by Firefox 3+ and Safari 8+.