Flags for Web Sites!
In addition to our vector flags for printing, we now have a variety of sets of World Flags designed & licensed (Royalty Free) especially for use on web sites and multimedia.
Each set has over 270 flags including all of the countries participating in the 2010 Winter Games!
The following explains some of the general basics of these two computer based graphics file formats. At the end of the article is information about what formats the Cliptures World Flags are available in and suggestions as to which format you should consider.
There are two basic types of 2D computer graphic file formats: Bitmap and Vector. Within each of these general graphic types, there are many unique variations.
There are a number of different types of bitmap graphics. Some common types are JPG (or JPEG), PNG, TIF (or TIFF) and GIF. Each of these has its own unique type of properties but they all share the commonality that they are made up of at least one and up to possibly many millions of pixels. JPG or JPEG (same thing) are (currently) probably the most widely used types of bitmap graphics. Practically every digital camera made uses the JPG format as one, if not the only format, the camera saves digital photographs in.
Bitmap graphics are made up of individual pixels. Each pixel is of a specific color. A digital photograph or a scanned image are both good examples bitmap graphics. Bitmap graphics are also referred to as "raster graphics" or "pixel based" graphics.
Bitmap graphics have their own strengths and weaknesses when compared to vector graphics.
On the plus side, because each pixel has its own color assigned to it, a bitmap image can contain a great deal of very fine detail that would be challenging if not practically impossible to replicate in a vector graphic. (That very same fact also means that bitmap images can become very large in their file size even, to the point of taxing a modest computer system.)
Another big plus for bitmap graphics is that they enjoy a much larger degree of compatibility with a broader range of software programs. There are many more software programs that support bitmap graphics with than there are software programs that support vector graphics.
Any time you enlarge or reduce the size of a bitmap image, the software program you are working with has to make some calculations to the image; either adding pixels to make a larger image or removing pixels to make an image smaller.
Reducing the size of an image is generally not harmful to the sharpness of the reduced image as it is less of a guess for a software program to determine which pixels to remove.
Although there are programs that do a very good job of increasing the size of a bitmap graphic, the software program will always have to determine where within the image to add extra colored pixels in order to create a larger version. By the very nature of that process, there will be some loss of sharpness in the larger version of the image. It's unavoidable.
Bitmap graphics tend to be a little more confusing to most people because there are two base factors that apply to most types of bitmap graphics: the image size, and the image resolution. Image size generally refers to the total number of pixels wide and the total number of pixels tall that a bitmap image is. Did that sound confusing? For most of us it does.
Most bitmap formats require that a color (white is also a color) be assigned to every pixel in the image. There are a few bitmap formats though that do support transparency within the image. GIF format graphics have had this optional feature for a long time. PNG format graphics, a more recent format, also supports transparency and has the advantage over GIF graphics in being able to display a much larger number of colors within the image. We use the PNG format for the Media versions of our flags so that they can be used on top of colored or textured backgrounds on web pages.
You could refer to the size of a bitmap image as 300 pixels wide by 600 pixels tall which means that if you counted the number of pixels across 1 horizontal row in the graphic, there would be 300 pixels. And if you counted the number of pixels down 1 column in the graphic, there would be 600 pixels. That image: 300 pixels wide by 600 pixels tall contains 180,000 pixels (300 x 600). Within that file for that bitmap image, each of those 180,000 pixels must have its location within the image and its color specified. That's why bitmap graphic files can quickly become so large.
Adding this second factor to a bitmap image is probably what makes understanding bitmap graphics so challenging. First, the resolution is usually referred to as dpi or ppi. Regardless of which term is used, they are both basically referring to a specification within any given bitmap graphic that says the image should be printed or displayed with a certain number of pixels wide and that same number tall making up 1 inch of the printed or displayed image. Sound confusing?
Let's take the 300 pixels wide by 600 pixels tall image from above. At a setting of 72 dpi, the image would be specified to print each pixel at 1/72 of an inch meaning that after it was printed, and assuming you could count them individually, you could count 72 pixels across in a 1 inch wide row of the image and 72 pixels down in a 1 inch column of the image. That 1 by 1 inch area of the image would contain a total of 5,184 pixels. The printed size of the entire 300 pixel by 600 pixel image would be 4.17 inches wide (300 / 72) and 8.33 inches tall (600 / 72).
Now lets take that same bitmap image and change the resolution from 72 dpi to 300 dpi. Has the actual size of the image been changed? No. It has now just been specified to print each pixel at a smaller size: 1/300 of an inch instead of the 1/72.
Note (And this is really important): Changing the resolution of a bitmap graphic does not change the size of the image. It only changes the size that the image is to be printed or displayed at.
Our second image with the resolution set to 300 dpi is going to print at a smaller size than the 72 dpi image because the file has been specified to print each pixel at 1/300 inch instead of 1/72 inch. The second image will have a print size of 1 inch wide (300 pixels wide divided by a resolution of 300 dpi) by 2 inches tall (600 pixels tall divided by a resolution of 300 dpi).
There's quite a bit of difference in the appearance of these images. The first image is going to print 4.17 inches wide by 8.33 inches tall. Unfortunately it's probably going to look somewhat blurry because although 1/72 of an inch may seem small, it's too big to provide really fine detail (sharpness) in a printed image. On the other hand, the second image with the 300 dpi resolution is much smaller in its printed size: only 1 inch by 2 inches. But, it's going to appear much sharper because each pixel is printed at only 1/300 inch in size allowing much finer (smaller) detail in a 1 inch area.
As a final note, the whole resolution and sharpness is really important anytime you are actually printing a bitmap graphic. If simply displaying bitmap graphics on a computer monitor (like a web page) the graphics are usually only displayed at 72 or 96 dpi. The difference between printing bitmap graphics as compared to viewing bitmap graphics on a computer monitor is another long and detailed chapter in and of itself and will have to be left for another time.
If you read the earlier part about bitmap graphics, take note of this: A pure vector graphic does not require any resolution information in the graphic. It doesn't need it.
Vector graphics are basically made up of mathematical instructions that define the shape and size of each individual object within the graphic.
An example would be the instructions that define a rectangle within a graphic. Those instructions would specify the relative height and width of the rectangle and its relative position within the graphic. Another object might be a line that starts at one point and continues to a second point with each of those points having a relative position to each other and to any other objects within the complete graphic like the rectangle mentioned earlier. The instructions (definitions) for each of those objects would also contain information specifying the colors of the objects.
Because these are instructions that are defining the objects and their relative positions to one another, a vector graphic can be printed or displayed at many different sizes while still maintaining its highest possible printing resolution and display qualities. (There are no pixels to deal with.) The resolution of the image is going to depend on the device (printer) that it is output to. If the printer prints at 1200 dpi, then that is the resolution the image will be printed at. Making the vector image 8 inches tall or 2 inches tall doesn't matter. Both will print at the highest resolution of the printer, unless of course you change the printer's settings.
A vector graphic could be initially created at a size that is 5 inches wide with a 1 by 2 inch rectangle starting 1 inch in from the left side of the graphic and 1 inch down from the top. That same graphic could be printed as a 10 inch wide graphic (twice the size of the first example). In the 10 inch graphic though, the rectangle would start 2 inches in from the left and 2 inches down from the top. And, the rectangle would be 2 by 4 inches instead of 1 by 2.
Even though in the second example the rectangle is twice as big, there are no pixels in the graphic that have to be enlarged in order to make the bigger version. Enlarging a bitmap image will reduce the sharpness in the image whereas in an vector image, it is just recreated or printed at a larger size without anything to loose its sharpness.
Although talented artists can create extremely realistic looking vectored images, it is difficult to impossible to replicate a detailed photograph as a vector image. Extremely detailed vector graphics can also be more difficult to print. And, as mentioned earlier, there are fewer software programs that support vector graphics than there are programs that support bitmap graphics.
Detailed vector graphics are more difficult and time consuming to create. So why would anyone create them? The biggest reason would probably be their resolution independence. Use the image big today, small tomorrow and way big the day after that. Print them on a desktop printer and get the best output it can provide. Take the same image and output it on extremely high resolution printing device and the image will use that device's best output.
There are a number of different types of vector graphics. Some common types of vector graphics are EPS, WMF, AI, CDR, and SVG.
Just like bitmap graphics, vector graphics have their strengths and weaknesses. On the plus side, vector graphics are "resolution independent" which means you can print a vector image 5 inches tall or 5 feet tall without loss of sharpness. This is no small deal. In fact it's a really big deal.
Except for some super complex vector graphics, vector format graphics are generally smaller in file size than their bitmap pals. Properly constructed vector graphics can have transparent areas within the graphic making it easier to put an irregular shaped image on top of a background or another image.
The "Print" editions of Cliptures Flags of the World are available as EPS vector graphics, WMF vector graphics and also as JPG bitmap graphics. Your first choice in which format you should use will depend on what software program you are going to use them in.
EPS Vector Graphics
The EPS vector format should be the first choice whenever possible as long as your software program supports EPS format graphics. These will produce the absolute smoothest curved lines that are a part of any of the flags, irregardless of how large you print the flag. The EPS format also maintains the most precise rendering of even the smallest objects within a flag design. The Cliptures flags are available in EPS vector formats for both Macintosh and Windows computers.
WMF Vector Graphics
An alternative format for Windows users is the WMF vector format of the flags. This format is an excellent alternative if you are using a Windows computer with a software program that doesn't support EPS format graphics. The WMF format is a very common graphics format for software programs that support graphics that are running on Windows computers. The reason this is not our first suggestion is because of the way WMF graphics are constructed:
WMF graphics do not actually support a true curved line. You can look at a line that looks like it is curved even upon close inspection. But, if you enlarge that image to a big enough, you can see that the curved lines are actually created by lots of very very tiny straight lines. At smaller sizes (like a full page) you would probably not notice the small straight segments. But if you blow it up to a 3 foot by 5 foot flag, they will become more apparent.
Since we are such sticklers for the quality of our flag illustrations, we think it is important to point out this difference between the EPS and WMF versions. Both are high quality vector versions of the same flags. It just that at very large sizes, the EPS versions will make a slightly better quality reproduction.
JPG Bitmap Graphics
The Cliptures Flags of the World CD includes a complete additional set of all the flags in JPG format. We only include the flags in this format on the CD as a last resort format. JPG format graphics are compatible with just about any software program (Windows or Macintosh) that supports using graphics within a document.
These are high quality JPG images. Each flag is 3 inches tall by whatever the particular flag's length with a resolution of 300 dpi (dots per inch). These will produce excellent printed flags at a size of 3 inches tall or less.
The JPG versions of the flags are not available for download.
The "Media" editions of Cliptures Flags of the World are available as PNG format graphics and include transparent backgrounds and areas where appropriate in the particular design.