Image formats

wiki > faq > Modules > Image Formats

=Which image format is best for my maps and counters, JPG, GIF or PNG?=

PNG is the recommended format of the three image formats supported by VASSAL, because VASSAL images tend to consist of blocks of solid color with sharp divisions, as opposed to the blended colors of photographs that work best with JPG. Also, PNG supports transparency, which is frequently useful when defining game pieces in VASSAL.

PNG
The PNG format is specifically designed to compress and store low color graphic images for web use. It is ideally suited to storing Maps and Images for VASSAL.

PNG uses a 'lossless' compression mechanism so that when you save and reload an image, you get exactly the same as you started with.

PNG works with 'indexed' color images, which means it supports a limited palette of colors (typically 256) within an image. Each color may be any color from the full 24 bit color space, but you are limited to 256 different colors.

PNG supports the use of an Alpha Channel which specifies the transparency of each pixel of your image. By setting the Alpha value for the background of your image to 0, you will render the background completely transparent. PNG provides a full 8 bit Alpha Channel allowing you to create semi-transparent overlays, and to antialias the edges of the image to smooth out the jagged edges you get when using transparent GIF images. This allows you to overlay the image over a pre-existing background, adding to to the possibilities of re-using the same image on different counters.

There are a number of key points to keeping your images small:
 * Keep the size of the color palette as small as possible. For counters, a 32 (5 bit) color palette is often sufficient. Each counter can have it's own color palette, but that palette should be as small as possible.
 * Any large areas of color should be the same color. When coverting a full color image to indexed color, you get the option to specify the maximum number of colors (i.e. palette size), but you also get the option to specify the Dithering method. Dithering attempts to duplicate the colors in your full color image by mixing the available colors from your palette. When converting, make sure you have Dithering turned off! This will force any large are of the same color to be converted all to the same color in the final image.
 * Never save your intermediate work as a JPG.

GIF
The comments in the PNG section also apply to GIF.

GIF is an older, proprietory format that is basically equivalent to PNG. PNG will generally compress an image smaller than GIF. There is no real reason to use GIF's any more.

GIF's only provide 1 bit for the Alpha channel, so pixels are either transaparent, or opaque, there is no in between. This makes it impossible to antialias transparent images, yuo are stuck with jaggies.

JPEG
The JPEG format was specifically designed to compress photographs and Movie frames. The JPEG format uses a 'lossy' compression mechanism that throws away information when compressing and recreates it when expanding. This works fine for photographs that in general contain many colors that smoothly blend from one to another. For boardgame maps and counters that tend to contain few colors with sharp divisions, it ends up looking like total crap. You get a general loss of definition and sharpness and what are called 'ringing artifacts' along borders between dark and light areas.

Once you have saved an image as a JPEG, it is basically stuffed and becomes extremely difficult to clean up.

JPG's will often seem to offer a better compression ratio, but the loss of quality is not worth it. You will get an equivalent size reduction at top quality by using PNG or GIF and reducing the numbers of colors and removing any color dithering.

In general DO NOT USE JPG format for VASSAL images! EVER! (Unless you actually have the need to include a photographic quality image in your game, or are not concerned about image quality)