Image formats

From Vassal

Which image format is best for my maps and counters, JPEG (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 and text, as opposed to the blended colors and continuous tone of photographs that work best with JPEG. 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 color graphic bitmap images for web use. It is ideally suited to storing Map, Text, Line drawings 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 can work with 'indexed' color images, which means it supports a limited palette of colors (from 2 to 256, typically 256) within an image. Each color may be any color from the full 24 bit color space, but you are limited to the number of different colors in the palette. It can also work with full 24 or 32 bit color images (full color plus 8-bit alpha channel). This gives 16 million colors but results in a larger image.

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. This means using an indexed color option rather than the full 24 or 32 bit color image. Most image software can create an optimized palette for the particular image and number of colors.
  • 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 area of the nearly the same color to be converted to exactly the same color in the final image.
  • Never save your intermediate work as a JPG.

GIF

The general 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, you are stuck with jaggies.

The one feature of GIF that is not available in PNG is animation. But since GIF animation isn't supported by the standard Java image display, this isn't available in Vassal. So there isn't any reason to prefer GIFs to PNGs.

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.

JPEG'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 JPEG 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)

JPEG files will typically end in either ".JPEG" or ".JPG".

Examples

To Come

More Information

The following links give more information about the formats. The Wikipedia links are the most easily read. The other link is more technical.

PNG
http://en.wikipedia.org/wiki/Portable_Network_Graphics
http://www.libpng.org/pub/png/
GIF
http://en.wikipedia.org/wiki/Graphics_Interchange_Format
http://www.w3.org/Graphics/GIF/spec-gif89a.txt
JPEG
http://en.wikipedia.org/wiki/Jpeg
http://www.jpeg.org/