n order to present images online in the best possible way, it’s essential to choose the best
file format when exporting and saving them. Although the save dialogs in most graphics
editors present a bewildering list of possible formats, the Web typically uses just two: JPEG
and GIF (along with the GIF89, or transparent GIF, variant), although a third, PNG, is finally
gaining popularity, largely due to Internet Explorer 7 finally offering full support for it.
file format when exporting and saving them. Although the save dialogs in most graphics
editors present a bewildering list of possible formats, the Web typically uses just two: JPEG
and GIF (along with the GIF89, or transparent GIF, variant), although a third, PNG, is finally
gaining popularity, largely due to Internet Explorer 7 finally offering full support for it.
JPEG
The JPEG (Joint Photographic Experts Group) format is used primarily for images that
require smooth color transitions and continuous tones, such as photographs. JPEG supports
millions of colors, and relatively little image detail is lost—at least when compression
settings aren’t too high. This is because the format uses lossy compression, which removes
information that the eye doesn’t need. As the compression level increases, this information
loss becomes increasingly obvious, as shown in the following images. As you can see
from the image on the right, which is much more compressed than the one on the left,
nasty artifacts become increasingly dominant as the compression level increases. At
extreme levels of compression, an image will appear to be composed of linked blocks (see
the following two images, the originals of which are in the chapter 4 folder as tree.jpg
and tree-compressed.jpg).
Although it’s tricky to define a cutoff point, it’s safe to say that for photographic work
where it’s important to retain quality and detail, 50 to 60% compression (40 to 50% quality)
is the highest you should go for. Higher compression is sometimes OK in specific circumstances,
such as for very small image thumbnails, but even then, it’s best not to go over
70% compression.
If the download time for an image is unacceptably high, you could always try reducing the
dimensions rather than the quality—a small, detailed image usually looks better than a
large, heavily compressed image. Also, bear in mind that common elements—that is,
images that appear on every page of a website, perhaps as part of the interface—will be
cached and therefore only need to be downloaded once. Because of this, you can get away
with less compression and higher file sizes.
Some applications have the option to save progressive JPEGs. Typically, this format results
in larger file sizes, but it’s useful because it enables your image to download in multiple
passes. This means that a low-resolution version will display rapidly and gradually progress
to the quality you saved it at, allowing viewers to get a look at a simplified version of the
image without having to wait for it to load completely.
where it’s important to retain quality and detail, 50 to 60% compression (40 to 50% quality)
is the highest you should go for. Higher compression is sometimes OK in specific circumstances,
such as for very small image thumbnails, but even then, it’s best not to go over
70% compression.
If the download time for an image is unacceptably high, you could always try reducing the
dimensions rather than the quality—a small, detailed image usually looks better than a
large, heavily compressed image. Also, bear in mind that common elements—that is,
images that appear on every page of a website, perhaps as part of the interface—will be
cached and therefore only need to be downloaded once. Because of this, you can get away
with less compression and higher file sizes.
Some applications have the option to save progressive JPEGs. Typically, this format results
in larger file sizes, but it’s useful because it enables your image to download in multiple
passes. This means that a low-resolution version will display rapidly and gradually progress
to the quality you saved it at, allowing viewers to get a look at a simplified version of the
image without having to wait for it to load completely.
GIF
GIF (Graphics Interchange Format) is in many ways the polar opposite of JPEG—it’s lossless,
meaning that there’s no color degradation when images are compressed. However,
the format is restricted to a maximum of 256 colors, thereby rendering it ineffective for
color photographic images. Using GIF for such images tends to produce banding, in which
colors are reduced to the nearest equivalent. A fairly extreme example of this is shown in
the following illustration.
GIF is useful for displaying images with large areas of flat color, such as logos, line art, and
type. As I mentioned in the previous chapter, you should generally avoid using graphics for
text on your web pages, but if you do, GIF is the best choice of format.
Although GIF is restricted to 256 colors, it’s worth noting that you don’t have to use the
same 256 colors every time. Most graphics applications provide a number of palette
options, such as perceptual, selective, and Web. The first of those, perceptual, tends to prioritize
colors that the human eye is most sensitive to, thereby providing the best color
integrity. Selective works in a similar fashion, but balances its color choices with web-safe
colors, thereby creating results more likely to be safe across platforms. Web refers to the
216-color web-safe palette discussed earlier. Additionally, you often have the option to
lock colors, which forces your graphics application to use only the colors within the
palette you choose.
Images can also be dithered, which prevents continuous tones from becoming bands of
color. Dithering simulates continuous tones, using the available (restricted) palette. Most
graphics editors allow for three different types of dithering: diffusion, pattern, and noise—
all of which have markedly different effects on an image. Diffusion applies a random pattern
across adjacent pixels, whereas pattern applies a half-tone pattern rather like that
seen in low-quality print publications. Noise works rather like diffusion, but without diffusing
the pattern across adjacent pixels. Following are four examples of the effects of
dithering on an image that began life as a smooth gradient. The first image (1) has no
dither, and the gradient has been turned into a series of solid, vertical stripes. The second
image (2) shows the effects of diffusion dithering; the third (3), pattern; and the fourth (4),
type. As I mentioned in the previous chapter, you should generally avoid using graphics for
text on your web pages, but if you do, GIF is the best choice of format.
Although GIF is restricted to 256 colors, it’s worth noting that you don’t have to use the
same 256 colors every time. Most graphics applications provide a number of palette
options, such as perceptual, selective, and Web. The first of those, perceptual, tends to prioritize
colors that the human eye is most sensitive to, thereby providing the best color
integrity. Selective works in a similar fashion, but balances its color choices with web-safe
colors, thereby creating results more likely to be safe across platforms. Web refers to the
216-color web-safe palette discussed earlier. Additionally, you often have the option to
lock colors, which forces your graphics application to use only the colors within the
palette you choose.
Images can also be dithered, which prevents continuous tones from becoming bands of
color. Dithering simulates continuous tones, using the available (restricted) palette. Most
graphics editors allow for three different types of dithering: diffusion, pattern, and noise—
all of which have markedly different effects on an image. Diffusion applies a random pattern
across adjacent pixels, whereas pattern applies a half-tone pattern rather like that
seen in low-quality print publications. Noise works rather like diffusion, but without diffusing
the pattern across adjacent pixels. Following are four examples of the effects of
dithering on an image that began life as a smooth gradient. The first image (1) has no
dither, and the gradient has been turned into a series of solid, vertical stripes. The second
image (2) shows the effects of diffusion dithering; the third (3), pattern; and the fourth (4),
GIF89: The transparent GIF
The GIF89 file format is identical to GIF, with one important exception: you can remove
colors, which provides a very basic means of transparency and enables the background to
show through. Because this is not alpha transparency (a type of transparency that enables
a smooth transition from solid to transparent, allowing for many levels of opacity), it doesn’t
work in the way many graphic designers expect. You cannot, for instance, fade an
image’s background from color to transparent and expect the web page’s background to
show through—instead, GIF89’s transparency is akin to cutting a hole with a pair of scissors:
the background shows through the removed colors only. This is fine when the “hole”
has flat horizontal or vertical edges. But if you try this with irregular shapes—such as in the
following image of the cloud with drop shadow—you’ll end up with ragged edges. In the
example, the idea was to have the cloud casting a shadow onto the gray background.
However, because GIFs can’t deal with alpha transparency, we instead end up with an
unwanted white outline. (One way around this is to export the image with the same background
color as that of the web page, but this is only possible if the web page’s
background is a plain, flat color.)
Because of these restrictions, GIF89s are not used all that much these days. They do cling
on in one area of web design, though: as spacers for stretching table cells, in order to lay
out a page. However, in these enlightened times, that type of technique should be
avoided, since you can lay out precisely spaced pages much more easily using CSS.
The GIF89 file format is identical to GIF, with one important exception: you can remove
colors, which provides a very basic means of transparency and enables the background to
show through. Because this is not alpha transparency (a type of transparency that enables
a smooth transition from solid to transparent, allowing for many levels of opacity), it doesn’t
work in the way many graphic designers expect. You cannot, for instance, fade an
image’s background from color to transparent and expect the web page’s background to
show through—instead, GIF89’s transparency is akin to cutting a hole with a pair of scissors:
the background shows through the removed colors only. This is fine when the “hole”
has flat horizontal or vertical edges. But if you try this with irregular shapes—such as in the
following image of the cloud with drop shadow—you’ll end up with ragged edges. In the
example, the idea was to have the cloud casting a shadow onto the gray background.
However, because GIFs can’t deal with alpha transparency, we instead end up with an
unwanted white outline. (One way around this is to export the image with the same background
color as that of the web page, but this is only possible if the web page’s
background is a plain, flat color.)
Because of these restrictions, GIF89s are not used all that much these days. They do cling
on in one area of web design, though: as spacers for stretching table cells, in order to lay
out a page. However, in these enlightened times, that type of technique should be
avoided, since you can lay out precisely spaced pages much more easily using CSS.
PNG
For years, PNG (pronounced ping, and short for Portable Network Graphics) lurked in the
wilderness as a capable yet unloved and unused format for web design. Designed primarily
as a replacement for GIF, the format has plenty to offer, including a far more flexible
palette than GIF and true alpha transparency. Some have mooted PNG as a JPEG replacement,
too, but this isn’t recommended—PNGs tend to be much larger than JPEGs for photographic
images. For imagery with sharp lines, areas of flat color, or where alpha
transparency is required, it is, however, a good choice.
For years, PNG (pronounced ping, and short for Portable Network Graphics) lurked in the
wilderness as a capable yet unloved and unused format for web design. Designed primarily
as a replacement for GIF, the format has plenty to offer, including a far more flexible
palette than GIF and true alpha transparency. Some have mooted PNG as a JPEG replacement,
too, but this isn’t recommended—PNGs tend to be much larger than JPEGs for photographic
images. For imagery with sharp lines, areas of flat color, or where alpha
transparency is required, it is, however, a good choice.
The reason PNG is still less common than GIF or JPEG primarily has to do with Internet
Explorer. Prior to version 7, Microsoft’s browser didn’t offer support for PNG alpha transparency,
instead replacing transparent areas with white or gray. Although a proprietary
workaround exists (see Chapter 9’s “Dealing with Internet Explorer bugs” section), it isn’t
intuitive, and it requires extra code. With post–version 6 releases of Internet Explorer
finally supporting alpha transparency (and Internet Explorer’s share of the market decreasing
somewhat, primarily due to competition from Firefox), it’s worth looking into PNG
when creating layouts.
The three adjacent images highlight the benefit of
PNG over GIF, as shown in a web browser. The first
illustration shows two PNGs on a white background.
The second illustration shows this background replaced
by a grid. Note how the button’s drop shadow is partially
see-through, while the circle’s center is revealed
as being partially transparent, increasing in opacity
toward its edge. The third illustration shows the closest
equivalent when using GIFs—the drop shadow is
surrounded by an ugly cutout, and the circle’s central
area loses its transparency. Upon closer inspection,
the circle is also surrounded by a jagged edge, and the
colors are far less smooth than those of the PNG.
Other image formats
You may have worked on pages in the past and added the odd BMP or TIFF file, or seen
another site do the same. These are not standard formats for the Web, though, and while
they may work fine in some cases, they require additional software in order to render in
some browsers (in many cases, they won’t render at all, or they’ll render inconsistently
across browsers). Furthermore
noise.
No comments:
Post a Comment