(If you’re from the United Kingdom, just pretend that “z” is an “s”. It will be our little secret.)
No commentaries this post. Instead I shall introduce a new series I alliteratively call “Sprite Strategies”, where I will provide tips for those who want to create sprite comics that don’t cause blindness.
This post’s subject is image optimization, a process it seems most sprite comic creators know little about. Basically, image optimization is deleting data from an image to lower its file size (and thus the server space you lose from the image, the time it takes for your reader to load the image, and the bandwidth it costs to process the image for all of your readers), with as little quality loss as possible. It is a delicate balance, as the lower the quality, the lower the file size, and vice versa. That said, it is possible to lose some file size without any noticeable difference.
First, I will explain what this means for different file types. For GIFs and PNGs, lower quality means less colors. For GIFs and 8-bit PNGs, you can have a maximum of 256 colors (for 24-bit PNGs you can have all 16,777,216 colors available, but try to stay away from these, as they generally have huge file sizes), but can have less. Obviously, if your image does not have 256 colors in it, you would want to decrease the number of colors your image has, data-wise.
This all may sound complicated, probably because I explained a lot of insignificant bullshit, but it’s simple to do. First, I’ll explain how to do this for GIFs or PNGs in GIMP, which is a freeware (or GNU—I’m not sure if there’s a difference) program that works in Windows, Macintosh, and Linux:
From the menu, select “Image”, then “Mode”, then “Indexed…”
You will get a menu with a couple of options. The most important, however, is the checked circle that says “Generate Optimum Pallete”, which will basically only keep whichever colors your image actually uses. This is the recommended choice, so you can just click “Convert”.
Then, just “Save As…” as a GIF or PNG. (I prefer PNGs, because they usually have smaller file sizes. Some claim that they have less browser support, but only the most ancient of browsers don’t use PNGs, so you shouldn’t worry about that.) Make sure that “Compression” is set at nine. You can also uncheck some of the options above, such as “Creation Date” and “Resolution”, which might lower the file size (I’m not sure if they do).
If your image has few colors, then this should work out perfectly. However, if your image has many colors (has gradients, or uses photographs, for example) then you may have to fiddle around with the dithering options a little. (dithering is the mixture of multiple colors to create the illusion of another color). Unfortuately, GIMP does not have as many options as Photoshop. Of course, you could also try JPEGs.
Skip the “Image -> Mode -> Indexed…” bit; it won’t do you any good. Instead, go straight to “Save As…” and save as a JPEG.
Now, JPEG optimization is a little more complicated than for GIFs or PNGs. First, there’s the quality control which goes from 0 to 100, 100 being perfect quality, 0 looking like it’s covered with somebody’s vomit. You will have to find a delicate balance.
There’s also the “smoothing” option down there. The higher the smoothing, the smaller the file size, but it also makes the image more blurry. Personally, I find that 19-23 is the best settings, with about no apparent distortion while the file size is a little smaller. Hey, every little bit counts.
I would also suggest you check “Optimize” and “Progressive” (I don’t care how much you hate those “government-control-loving Liberals ruining America”; that has nothing to do with this option), as both lower the file size at practically no cost. I have no idea what “Optimize” does other than just lower the file size, and “Progressive” just makes the image load gradually instead of all at once in your browser (which is preferable, anyway).
I have no fucking clue what “Subsampling” and “DCT method” do; you can fiddle with these options if you desire.
If you use Photoshop, there isn’t much of a difference, except that it has a few more options. For instance, for GIFs and PNGs you can skip the Image Indexing if you like, because Photoshop’s “Save for Web…” option already has options for color number, as well as giving you options on which colors to keep and get rid of, such as “Perceptual/Selective/Adaptive” (I have no idea which does which with what; just use your eyes to judge which one does the better job) and even has a color map for manual color manipulation. (Note that this is all based on Photoshop 7; newer versions may have more options, although my little experience with Photoshop CS4 indicates that nothing much has changed). As for JPEGs, there’s not much difference other than simply doing a better job at image optimization (lower file size with higher quality).
Of course, Photoshop also costs hundreds of dollars. If you do decide to buy it, though, I would recommend finding a deal on an earlier one; believe it or not, Photoshop hasn’t changed all that much since its early versions, or at least I haven’t seen much of a difference, other than a myriad of complicated processes you probably won’t need for a sprite comic.
Finally, there’s also stand-alone optimization programs out there, although I cannot vouch for all of their abilities. I have one by a company called “xat”, although I can tell you that it does not seem to do as good a job as Photoshop and GIMP.
GIFs/PNGs vs. JPEGs
In case you didn’t already know this, or learn this from this article, use JPEGs for detailed images (such as photographs or other realistic images) and GIFs and PNGs for simple images (cartoons, pixelated video game graphics). Mix these two up and the results won’t look so great:
These two images are the same file size as what a good-looking alternate file type would have.
So what if your comic uses both of these elements, like a mixture of photos and sprites? Well, you’re in trouble. You could try either GIFs/PNGs or JPGs, but you won’t be able to optimize them very much. You won’t be able to decrease the number of colors very low with photos requiring a lot of colors, and only the highest of quality settings for JPGs will avoid blurry solids.
That’s My Sonic! looks like shit in either format. Then again, That’s My Sonic! just plain looks like shit, anyway.
Other Optimization Ideas
There are alternative ways to lower file size, however. For one, you could lower the physical size of the image. Another reason why That’s My Sonic!’s file sizes go up into the megabytes (no, I am not exaggerating) is because they are the size of the sun. This is difficult, thanks in part to the constantly increasing resolutions of computers. What used to be perfectly normal size in a 800 x 600 resolution looks dinky in a 1600 x 1200 resolution. And just doubling the size of the images in HTML or CSS would probably be a bad idea, as you cannot trust any browsers not to blur the hell out of them.
If you have both detailed and simple parts in the same comic, as mentioned earlier, but they are in separate panels, you could consider separating them into different images, allowing you to make the detailed parts JPGs and the simple parts GIFs.
Here are the same two That’s My Sonic! panels after I made them 1/6 smaller, physically, and separated the simple (mostly) and photographic panels. The total file size is about 17 kb, even less than the shitty-looking blurry JPEG from above, and much less than 1/4 of the file’s original file size of over 100 kb (this is about 1/4 the panels of the original comic).
If you have any more questions about image optimization or any more ideas for “Sprite Strategies”, then just leave a comment, or e-mail me at email@example.com.
(Revised: June 23, 2011)
(Originally Published: September 8, 2010)