Tag Archives: sprites

Animating a CSS Sprite With JavaScript

Jun 4, 2012 by Matt | Posted in Coding, Featured 9 Comments

Take a look at this demo, and guess how the animation is achieved. It’s not an animated GIF. It’s a PNG sprite that is brought to life with a little bit of JavaScript.

The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)

It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)

Continue reading →

Easy CSS Sprites with Sprite Cow

Jul 13, 2011 by Matt | Posted in Design No Comments

CSS sprites are a commonly used technique to decrease page load times. One of the biggest hassles when setting them up, though, is figuring out the coordinates for the images in your sprite. (The other is rebuilding the sprite when you want to add new graphics…)

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.

Learning CSS Sprites

Nov 6, 2009 by Matt | Posted in Design, Featured 9 Comments

What exactly is a sprite? It’s a CSS technique that can make your website load faster. Instead of having a dozen images that are included on every page of the site (one for your logo, one for an RSS button, a few fore social media links, etc.) you combine them all into one big image. You can then use CSS to display just the portion you need in any given spot.

How does this improve loading times? The major bottleneck in the loading of a web page today isn’t download speeds so much as concurrent downloads. A web browser will only download two files at once from a web server. After the HTML is downloaded, the browser has to grab CSS, JavaScripts, and images from your server. You might have a lot of those secondary files, and only two will be loaded at once. If you combine your template’s images into one big file, they all get downloaded at once, instead of two at a time. Also, you may shave off a few kilobytes of file size in some cases, but that’s not as important.

Now how does this trickery work? Let’s use Apple.com as an example. They keep their header navigation in a sprite that looks like this:

Apple navigation header sprite

As you can see, the buttons are laid out in a row, with their alternate states underneath them. A sprite starts out as something just like that: an image full of little images. The real trick is making it spritely.

Continue reading →