Sprites on the Web

> While this technique is seldomly used on the web, it’s used all the time in video games

Seldomly used now, perhaps. Is the author unfamiliar with the history of the technique? This was everywhere on the web. It’s how Facebook served almost every icon and UI asset.

Back in the day we used 'background-position' to slice up the sprite map. There are articles on A List Apart describing this that are over 20 years old now. It was also the underpinning of the site’s legendary “sliding windows” technique, which was dominant on the web for some time.

E: I should add that one reason for its popularity was that we didn’t have HTTP multiplexing yet and so you wanted a small count of images/resources on the page

Love Josh's work and usually always learn something new from his tutorials.

However, this time, I was really hoping the example implementations would use CSS transforms instead of properties that require repaints, especially since the rationale given here for using sprites is performance.

Maybe layer compositing warrants its own article and is beyond the scope here, but you can really tell when whoever built a frontend knows their stuff because all animations are hitting a consistent 60fps.

I think animation was the less common use case. Sprites were a nice way to get multiple images in a single HTTP request. Latency on dialup was murder and getting more in a single round trip was better. If you have a bunch of similarly-sized elements stick them all in a single file and use CSS to make multiple references to the same file display different images.

Josh, I was reading, and then a little man slid in from the left side, blocking the text I was reading, and said "Hey, friend! Would you like to subscribe to the newsletter?" I believe the site used CSS animation-timing-function:ease-in-out. My intuition told me that the slide was completely wrong for the situation.

First, the most important signal that any animation provides is this: the computer is doing this for you. This goes in the negative too: if you click and drag a file icon, the drag sprite may be translucent or highlighted somehow, but it should not 'animate' to your mouse cursor. The file icon should be attached to the cursor location with no delay.

However, suppose you drop it somewhere it can't go. The interface should then animate the file back to where it belongs; that's the computer 'putting it back'. Now, the timing function; how should the file go back? Slowly back away from the cursor? Accelerate to the return location, then slow back down again? No, it should very quickly snap away from the cursor, then settle where it belongs. You'll notice things like this as part of fit and finish; they are communication.

The man coming from the left eased in and then slowly stopped. This is profoundly wrong, like a person sneaking out of a dark place, then slowly coming to rest in front of you staring into your eyes, it is very much threat behavior. You want the person to come in a friendly way, so he can sell you something or convince you to smash the subscribe button. The correct animation is to simply appear halfway in, far enough you can see his smile; stop for 0.5s, indicating he is occupying the space; then slowly ease-in-ease-out the rest of the way.

Then the speech bubble should fade in, indicating that the computer is talking, and you as the user must act, like when a dialog says "Save your work now. I take your laptop away in 30 seconds. Look in my eyes, I am the user now."

I remember Microsoft Front Page had a feature about doing buttons with image sprites and it spitted a ton of JS gibberish.

I don't think the example of the trophy in the article is a good use case this days, you could draw that trophy as a SVG and animate the flames with GSAP or something, or draw each flame frame as a <symbol> and animate that with CSS.

I built 8bitsmith.com as a tool to make controlled sprite sheets. It was an experiment in vibe-coding and controlled asset creation, so pricing is basically a pass-through cost of using Gemini.

I love Josh's blog and writing. I have to wonder what place this kind of content has in an age where agents are writing all the CSS. It sort of feels like hand tool woodworking now - there are people that will still get a kick out of designing things themselves, but it's going to be much less common. Maybe it already was like that anyway.