Animations and Presentations - HTML5 Advertising - page 116

CSS and/or JavaScript, to the specific region to show a specific frame of animation at any given point in time. This is
extremely powerful in animation but should also be best practice when delivering ads with imagery to a publisher's
page. A sprite sheet provides huge image optimization benefits, as all images in it can share pixel data. That is, the
JPEG, GIF, or PNG image codec doesn't need to write that information multiple times for different images; once
written, its shared by all other images on the sheet that share the same values. If you notice you're often compressing
images to get under k-weight limitations, try bundling all your images in one file, as closely as possible (with enough
whole pixel padding), and compress it. Chances are you'll save much more k-weight than by compressing individual
files, plus you'll eliminate multiple HTTP request overhead.
So how do you work with sprite sheets? CSS can offset the top and left properties of a background element
or elements at given points in time to create seamless transitions from one region to another. Figure 5-11 shows
a mashup of six popular web icons that, individually tallied, amount to 84 kilobytes. However, using the sprite sheet
method gets it down to 66 kilobytes. (It can even be squashed, using a great free tool called ImageOptim
( http://imageoptim.com ) , all the way down to 55 kilobytes.)
Figure 5-11. An example of a sprite sheet saved as a PNG file at 55 kilobytes
Now that you have the final image asset, just adjust the CSS of this sprite sheet by using the CSS code shown in
Listing 5-12.
Listing 5-12. Sprite Sheet CSS
.linkedin, .twitter, .yahoo, .yelp, .youtube, .rss{
background: url(sprites.png) no-repeat;
}
.linkedin{
background-position: -7px 0;
width: 256px;
height: 256px;
}