Freak Flags! The High Resolution Flag Sprite

Choose a File Size:

Freak Flags have 2 high resolution file options.

Available in 42 or 60 pixel width, either file can be displayed in small, medium, large and extra large formats using css. If you don't need your flags to display any larger than 42 pixels, Small works best for the smaller file size. For the utmost in size and detail choose the Large. Try both if you're not sure.

Small File

Large File

CSS Options:

The Border color is important if your flags will be displayed against a black or white background.

Adding a border prevents some flags from blending into the background. Select which border style should be included in your css. Unlike special effects this is not included as a css constructor.

Dark Border

Light Border

No Border Include both border treatments as css constructors: ff-lt and ff-dk

Special effects can be applied to your flags by adding a css constuctor. Check which effects should be included in your style sheet. Some effects look better on some flags than others.

Round displays the flag in a circular shape. Add ff-round to your flag elements class property.

Round

App Style changes the flags to display in a square shape with rounded corners and a gloss sheen effect. Add ff-app to your flag elements class property.

App

Sphere changes the flags to display in a round shape with a gloss surface and specular highlight with shadowing. Add ff-sphere to your flag elements class property.

Sphere

Wave adds a ripple effect to the flag. Add ff-wave to your flag elements class property.

Wave

Usage:

Your .zip file contains the flag sprite graphic, a matching, un-minified css file, and a proof sheet confirming your selections, add the image and css to your file system and be sure to edit the .fflag selectors background-image: url() rule to match your file structure so it locates the image sprite.

The 2 sprite sizes correspond to the ff-lg and ff-xl css classes. ff-lg is the native size for the small sprite, and ff-xl is the native size for the large sprite. The large sprite yields no visual beneit at the ff-sm size, and the small sprite shows less detail at the ff-xl size since that's larger than its native pixel size.
Freak Flags uses css constructor classes to choose a display size: ff-sm, ff-md, ff-lg, ff-xl. It's recommended you use these classes instead of winging it. Special effects rely on these classes being in use: ff-sphere ff-lg
If you chose a special effect to be included in your stylesheet it still needs to be included in your markup with its constructor class: ff-round, ff-app, ff-sphere, ff-wave.
Using the flags as a background for an img element is not recomended if app, sphere, or wave special effects are used. Since img elements can't have pseudo elements, the effect will not work properly.
The markup structure used to display a flag is: <div class="fflag fflag-US ff-lg ff-wave"></div>
If you see an Alert Flag:
instead of your expected flag this indicates something is wrong with the country code used for identifying each flag. Make sure your css constructor is using the 2 letter country code in capital letters prefixed with fflag- like so: fflag-US
If you must use an image for your flag, use a small transparent png for the src value, and add the css constructors as described above. Remember: app, sphere, and wave special effects will not work on an image element.

Updates:

11/27/22: Adds running flag counts and other small updates.

10/20/22: Adds Åland flag, fixes JS error, improves sprite performance.

9/17/22: Adds Guernsey and Antartica Flags.

3/7/22: Fixes Monaco Flag.

5/9/21: Adds Abkhazia (AB) flag. Fixes Firefox text overrun issue.

12/28/20: Adds Replay function.

10/8/20: Fixes selection display.

9/8/20: Adds Updates: section to documentation.

8/26/20: Fixes incorrect Panama flag star colors.

8/8/20: Adjusts Swiss flag cross proportions.

7/30/20: Adjusts US flag star field.

License:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

What's the big deal?

A few years ago I had to make one of those pages that has a giant list of countries with their flag icons. So I set out looking for how this is being done in practice on the web. Underwhelmed by the results, I found something I could live with for the task but came away with the idea that this could be done much better.

The flag sprites I had come across were grossly inefficient in their color compression. Most flags are simply blocks of color which should compress well in a format like svg or png. What I saw was the opposite: colors were muddied with shadow or gloss effects baked in, lines and edges were not clearly defined, no attempt at color control, all compressed as full color 24 bit images, destroying any hope of good compression. This coupled with the need to include a global assortment of flags, made the file sizes way larger than necessary. And not high resolution by any stretch.

Thinking I could do better, I started looking at using an index color file with a limited number of colors in the palatte. The file dimensions needed to account for 3 evenly divided rows and 3 evenly divided columns for the many flags designed as 3 even color bands. Since I didn't know how much improved the compression would be, I decided to create 2 sprite sizes from the begining. Finally, I wanted both files to use the same CSS.

The initial tests were very promising with over 50% reduction in file sizes. Even though the files were higher resolution. Pixel level graphic precision, and rigorous color management allowed room to spare for the increased number of pixels.

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. As most of that detail dosen't show well at icon sizes it would have been very dumbed down imagery which is not a good usage of SVG.

Welcome to Freak Flags!

Choose a File Size:

CSS Options:

Choose Your Flags: 0 Flags

Africa

Americas

Asia

Europe

Middle East

Oceania

Extranational

Usage:

Updates:

License:

What's the big deal?