It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I don’t see image sprites used that much anymore, but it’s still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then shifting around the size and background-position to reveal one at a time.
Say you’re site needs dozens or hundreds of country flags — that’s a perfect opportunity for a sprite. Michael P. Cohen has built a generator site to help … Read article “Freak Flags”
I think of an SVG sprite as this:
<svg display="none">
<symbol id="icon-one"> ... </symbol><symbol>
</symbol><symbol id="icon-two"> ... </symbol><symbol>
</symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>I was long a fan of that approach for icon systems (<use></use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.
What if you have a sprite, and you wanna see what’s in it?… Read article “A Snippet to See all SVGs in a Sprite”
HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion:
If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts.
I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion … Read article “Musings on HTTP/2 and Bundling”
a {
background: url(sprite.png) no-repeat;
display: block;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.
See the Pen KBjZwg by Geoff Graham (@geoffgraham) on CodePen.… Read article “Basic Link Rollover as CSS Sprite”