How to create one large css sprite image with flags of all world countries, and the set of corresponding css styles for each country?

2 Bitcoin bounty has been announced by author.
0 has been already awarded by author.
2 remains available.

We have a website where we need to use country flag images when displaying things like "list of countries", "country in the user profile", etc. At this moment, we use independent images for each country. So when we need to show a list of 200+ countries, the delay caused by loading images is very noticeable.

I think the page performance / response time could be improved if we would use just one large css sprite image with all the country flags combined into that one image. Also, for each country, there should be a corresponding CSS class that would "position" the sprite image to only make visible one particular flag at the time. For example

<div class="country-ca">Canada</div>

So we would need to have like 200+ CSS classes generated, one for each of 200+ countries. I am aware of online sprite editors, so we could just use some sort of sprite editor and construct that sprite and CSS manually through editor. However, if anyone could suggest some existing available sprite image with all country flags, that would be awesome!

I am putting an $2 bitcoin bounty for a good suggestion! Thank You!

1 Answer

1 tip with total amount of 1 mBTC($0.3 USD) have been sent by lampego

Here is the Nuget package because it looks like you use Visual Studio:

Country flags in single CSS sprite 1.0.0 CSS Sprites - a method to optimize page loads by combining a large number of small images into one. The method of extremely relevant with the active use of country flags - with all the flags on one page, then load it, the browser will need to make only two server requests instead of 247.

To install Country flags in a single CSS sprite, run the following command in the Package Manager Console

PM> Install-Package FlagSprites


Hope this helps!

User rating:

Good answer. This is my bitcoins


Too many commands? Learning new syntax? is a free tool to save your favorite scripts and commands, then quickly find and copy-paste your commands with just few clicks.

Boost your productivity with!

Post Answer