Freak Flags

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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 build just what you need.

My first thoughts was… why not SVG? Michael says:

Why not use SVG? Many flags adapt very well to this format. I’m a fan of SVG but it wasn’t the right tool for this. The problem is too many flags have a lot of detail in crests and icons and imagery, and those details quickly increase svg file sizes far more than they do for index color files.

Direct Link →