Page 34 of 169
It is about as fast as the image map example: 342 milliseconds versus 354 millisec-
onds, respectively, but this difference is too small to be significant. More impor-
tantly, it is 57% faster than the alternative of using separate images.
CSS Sprites
http://stevesouders.com/hpws/sprites.php
Whereas the images in an image map must be contiguous, CSS sprites don't have
that limitation. The many pros (and some cons) of CSS sprites are explained well in
Dave Shea's authoritative web article, "CSS Sprites: Image Slicing's Kiss of Death." I
touched on some of the benefits of CSS sprites already: they reduce HTTP requests
by combining images and are more flexible than image maps. One surprising benefit
is reduced download size. Most people would expect the combined image to be
larger than the sum of the separate images because the combined image has addi-
tional area used for spacing. In fact, the combined image tends to be smaller than the
sum of the separate images as a result of reducing the amount of image overhead
(color tables, formatting information, etc.).
If you use a lot of images in your pages for backgrounds, buttons, navbars, links, etc.,
CSS sprites are an elegant solution that results in clean markup, fewer images to deal
with, and faster response times.
Inline Images
It's possible to include images in your web page without any additional HTTP
requests by using the
data: URL scheme. Although this approach is not currently
supported in Internet Explorer, the savings it can bring to other browsers makes it
worth mentioning.
We're all familiar with URLs that include the
http: scheme. Other schemes include
the familiar
ftp:, file:, and mailto: schemes. But there are many more schemes,
such as
smtp:, pop:, dns:, whois:, finger:, daytime:, news:, and urn:. Some of these
are officially registered; others are accepted because of their common usage.
The
data: URL scheme was first proposed in 1995. The specification (http://tools.ietf.
org/html/rfc2397) says it "allows inclusion of small data items as 'immediate' data."
The data is in the URL itself following this format:
data:[
][;base64],
