A lesson on image formats

[Wanderer]

All too often, I've noticed people around here posting sprites and comics and whatnot in bad image formats. So I've decided to offer a lesson on which image formats are the best ones to use, and why it's so important to use them.

First thing you should understand is that there are basically two "modes" for image files: RGB mode and Indexed mode. Some formats also allow a Grayscale mode for black and white images, but you probably won't use that much.

RGB mode means that each pixel's color value is recorded individually, and independantly of every other pixel. In this mode there is no limit on the number of colors that may appear in the image. Any pixel can be any color. This mode is sometimes called "truecolor", or "24-bit color", since it takes 24 bits to store each pixel's color value.

Indexed mode means that the image contains a palette of colors, and each pixel contains only an index number that points to a color in the palette. In this mode, only colors in the palette can be used in the image, and the palette can only contain a maximum of 256 colors. This mode is sometimes called "paletted", or "8-bit color", since it only takes 8 bits to store an index number. However, in images that contain only a few colors, lower bit depths can be used. If the palette only has 16 colors or less, you only need 4 bits per pixel. If the palette only has 3 or 4 colors, you only need 2 bits per pixel. With only 2 colors, you only need 1 bit per pixel.

Why would you want to use Indexed mode? Because it makes the file much smaller than it would ever be if it were in RGB mode, especially if you can use low bit depths. RGB mode uses 24 bits per pixel, compared to at most 8 bits in Indexed mode. It's important to think about file sizes when posting things on the internet. The smaller the file size, the less time it takes to download. If your comic takes too long to download, people will get annoyed and won't want to read it. Only use RGB mode when you really need to have more than 256 colors.

That said, let's look at some common image formats.

* BMP. I see this used way too much. BMP files are usually RGB mode, and can be useful while you're working on a file. However, the problem with BMP is that it uses little or no compression, making the file size gigantic, so they take forever to download. This makes them completely unsuitable for posting on the internet. It's okay to use them on images you're still working on, but once you're done with an image and are ready to upload it, change it to a different format.

* JPEG. These are RGB mode and are typically used for photographs. The problem with this format is that it uses lossy compression. That means that when the image is saved, it degenerates. It's never a perfect, pixel-for-pixel reproduction of the original image, some detail is always lost. For photographs, it's usually not very noticable, but for sprites, the degradation becomes very visible. Worse yet, the degradation is cumulative. If you save an image in JPEG, then reopen it and save it again, it looks even worse each time you save it. Some image editors let you control the amount of compression; the higher the compression, the smaller the file size, and the more degraded the image looks. This way you can minimize the degradation, but not eliminate it. For this reason, you should never use JPEG for sprites or sprite comics. If you must use JPEG for anything, it is recommended that you keep a "master copy" of the file in a different format, to keep it free of JPEG degradation, so you can work on it in the future without cumulative degradation.

* GIF. These are always Indexed mode, never RGB. They allow for transparency by designating one color as transparent. GIF images can also be animated. GIF uses decent compression, and it doesn't degrade the image like JPEG does. Thus, GIF is a good format to use for sprites and sprite comics.

* PNG. This is, by far, the best format to use. PNG files can be either RGB or Indexed mode, so you can use RGB when you need lots of colors, and Indexed when you want the smallest possible file sizes. PNG uses better compression than GIF, and doesn't degrade the image. PNGs allow transparency by using a similar method as GIF, but it can also use "alpha channels", which enable semitransparency; in other words, with alpha channels, pixels may have varying amounts of transparency, whereas with the GIF method, every pixel is either completely transparent or not at all. Alpha channels can be used in either RGB or Indexed mode. The only disadvantage of PNG compared to GIF is that PNG images cannot be animated.

So, are we clear? PNG and GIF good, JPEG and BMP bad.

I know some of you out there are saying, "But I can't save in PNG or GIF!" You're using MS Paint, aren't you? Yes, MS Paint can be buggy when it comes to saving in PNG or GIF, so the images come out looking corrupted. It's just a problem with MS Paint, it's not your computer's fault, and it's not the formats' fault.

So what can you do about it? One solution is to not use MS Paint. Personally, I use the GIMP. It's free, very powerful, and capable of saving in PNG and GIF correctly. It takes some time to learn how to use it, but it's worth it.

If you insist on using MS Paint, then save in BMP format, and then use a separate program on the BMP file to convert it to PNG or GIF. There are several free programs that can do this, such as:

* ImageMagick. This has a program that can convert almost any image format into almost any other. But you have to run it from the command prompt.
* IrfanView. This can be used as both an image viewer and a converter. Fairly easy to use.
* BMP2PNG. This is a program specifically designed to convert BMP files to PNG. Again, it has to be run from the command prompt.

Note that you can edit the file type associations in Explorer to run ImageMagick or BMP2PNG from an entry in the popup menu that appears when you right-click a BMP file. This makes things a lot easier.

If you're ready to use PNG format, there are a few more programs you should be aware of.

* OptiPNG. This is a PNG optimizer; it seeks out the best compression settings for a given image and makes the file size as small as it can possibly be. It has to be run from the command prompt or the right-click menu.
* TweakPNG. This lets you view the meta-information contained in a PNG file and remove any data you don't need. Be careful with this, because you can easily ruin the file if you don't know what you're doing.

[Hobo]

Another good program is Paint.NET. It provides a good selection of effects, and if saves very well, it's free and a easy to work with program. I would recommend it to anyone having MS Paint Probs.

[Solarblade]

I assume you meant "is" not "if".
I got a question: What is .TIFF format?
Thanks for posting that. That clears alot of stuff up .

[Wanderer]

TIFF format is usually used in publishing, not for web images. I don't think web browsers typically support it.