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!