For most purposes, PNG is the recommended format to use.
- It is easy to work with and supported by all common image processing programs.
- It supports transparency.
- It is a ‘lossless’ format, you do not lose any image quality.
- Ideal for small images and any images that consist of blocks of solid color with sharp divisions and text.
- Compresses image size reasonably well.
GIF is generally not recommended, use PNG instead
JPEG is only recommended for larger, photo-like images and with minimum compression specified.Keep a master copy of the image as PNG before converting to JPEG.
SVG is ideal for use in Vassal, but is not as widely support by image editing software and SVG images cannot be created from existing PNG or JPEG images.
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 anti-alias 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. PNG compression looks for horizontal lines of pixels of the same color to combine. Images that change color a lot across the image will not
- When converting 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.
- Run your final PNG images through an optimizer such as optipng. These programs will analyze your image and minimize the color depth for you. They also remove unwanted information stored in the file to minimize the final file size without losing any quality.
GIF
The general comments in the PNG section also apply to GIF.
GIF is an older, proprietary 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 transparent, or opaque, there is no in between. This makes it impossible to anti-alias 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 board game maps and counters that tend to contain fewer colors and with sharp divisions and lines, it causes 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 impossible to reverse the process and return to the original crisp image. Intermediate and master copies of your artwork should ALWAYS be saved in a lossless format like PNG, and converted to JPEG for use in the module if you choose to use it.
JPEG files have the advantage of compressing smaller than PNG images, but at a direct cost in the quality of the image.When compression JPEG files, you are presented with a slider to select the 'amount; of compression. It is not recommended to reduce this below about ‘90’.
In general, JPEG images are not suitable for use smaller images, or images that have fine detail such as lines, text and sharp divisions between different areas of color like low-color count maps. JPEG images are suitable for larger, photo-like images used as a map background, or for natural terrain-like maps. JPEG images also do not support transparency.
JPEG files will typically end in either “.JPEG” or “.JPG”.
SVG
SVG is a ‘vector’ graphics format. Rather than being a description of the pixels that make up the image, it is a description of the lines, shapes and colors that make up the image in a text XML format. This allows SVG images to be scaled to different sizes without loss of definition.
SVG images work well for pieces in Vassal, but are more complex to create. Currently (Version 3.7), there are performance issues using SVG for maps. In general, existing PNG or JPEG images cannot easily be converted to SVG images, they need to be created from scratch.
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.
