«
»

Generate CSS sprite for all world’s flags

Recently i worked on a project, which had to use flag icons for all flags in the world. The implementation looked like this:

css file:

.

 

 

In order to reduce the number of HTTP requests, I wanted to change it to using CSS sprites instead.

 

CSS file now has changed to lines like this:

.er_16{ background-position: -20px 0; }
.es_16{ background-position: -20px -20px; }
.et_16{ background-position: -20px -40px; }
.fi_16{ background-position: -20px -60px; }

 

> Generation of sprite: http://spritegen.website-performance.org/

> * Upload zip file with flags (in my case all the 16×16 px flags)
> * ignore duplicate images
> * build direction vertical
> * offset 4px (since the images are 16×14, this will make a 20-20 grid)
> * background/transparency colour: #ffffff
> * output format: PNG
> * Compress Image with OptiPNG: YES
> * Number of colours: True colour
> * css suffix: _16 (to indicate 16px icons)

 

Oh, before creatign the zip file, I removed all countries not matching a two-letter code.

cd 16/

find . -type f -name ‘???????*’ |xargs -I{} rm {}

This would remove countries named “_African Union.png”, “_United Nations.png”, “Olimpic Movement.png”  and similar.

 

 

For the following sizes of flags, I used these offset values:

16px, offset 4px will make a 20px grid

24px, offset 6px will make a 30px grid

32px, offset 8px will make a 40pxgrid

48px, offset 2px will make a 50px grid

64px, offset 6px will make a 70px grid

128px, offset 2px will make a 130px grid

 

 

 

This entry was posted by Jesper Rønn-Jensen on Wednesday, June 19th, 2013 at 13:46 (GMT-1) and is filed under justaddwater.dk. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

3 Responses to “Generate CSS sprite for all world’s flags”

  1. HKGE Says:
    July 11th, 2013 at 22:38 (GMT-1)

    Two questions. First, how many flags were used? In e-commerce sites, where they use flags of the world, it seems like a couple of dozen flag, of the most populous countries, since they don’t try to add a flag for every single nation. How many flags were you targeting? Second, reducing the number of HTTP requests is certainly good, but wouldn’t the browser most likely cache the images anyway?

  2. Mitch Says:
    July 16th, 2013 at 06:37 (GMT-1)

    This is great, and exactly what i am looking for,
    could you please share the source files, the pngs of the flags and a html sample or something, that would be great.
    Many thanks.

  3. James Says:
    July 16th, 2013 at 15:13 (GMT-1)

    Good article … The CSS sprite Generator is good, I should give it try for my project too, I’m using a flags for a Game website… Thanks man