Internet Graphics File Types

...or, "Why TrainGIFs are GIFs"

When train gif artists draw their creations, the end medium is the World Wide Web -- part of the Internet. Graphics artists preparing magazine layouts or video presentations use quite different media, and understandably use quite different file formats than those used on the Web. For the purposes of this discussion, we're only concerned with the formats common to the Web. A lot of the material in this discussion is from the excellent Wikipedia organization, which can be accessed at http://www.wikipedia.org. To quote from Wikipedia, the "Original text of Wikipedia articles is licensed to the public under the GNU Free Documentation License (GFDL)", and we use them here with gratitude.

Raster Graphics

There are basically 2 kinds of images:  Raster and Vector.  According to Wikipedia:

"A raster graphics image, or bitmap, is a data file or structure that consists of a generally rectangular array of pixels, or points of color, on a computer monitor, paper, or other display device. Each pixel has a corresponding red, green, and blue value that combine to determine the color displayed by that pixel. In this sense, typical raster graphics are said to operate in the RGB color space. This is both the raw format that computer graphics hardware uses to project an image on your monitor, and the basis for many graphics file formats." 

Raster graphics really are maps, with each pixel in the graphic having a specific location, and each also has a specific RGB value.  The higher the resolution, the greater the color precision, but this leads to a major problem with bitmapped images:  They tend to be very large.  A screen capture of a typical 800x600 screen saved as a bitmapped image will probably be about 1MG, as opposed to more modern image formats, such as .jpg and .gif (both of which are lineal descendents of the .bmp format), which would have been no more than one-third the size of the .bmp.

The original file format definition for a classic bitmapped image is the .bmp.  This format dates back to 1970, fully 20 years before there was a WWW on an Internet.

.bmp file format

Because of the relative ancientness of this format, it is not efficient.  Note that a zipped .bmp image will compress up to 90% of its original size.  Further, the format will not support layering an image on top of a transparent background, something essential for train gif artists.  A 96x21 pixel ATSF SD40-2 in .gif format will be about 1,000 bytes in file size.  The same image in .bmp format will weigh in at about 6,000 bytes.  If you've got a scene with, say, 100 train gifs in moving trains, the difference is 500,000 bytes, or 500KB.  This not only puts a load on your server, it frustrates the dickens out of some poor soul waiting to download your scene over a dial-up connection.  

.jpg file format

As the need to reduce the large file size of bitmapped images moving over networks became painfully apparent, the Joint Photographic Experts Group was created, and developed a method of compressing bitmapped images.  In reality, .jpg images are really .bmp images that are saved and manipulated using the compression algorithm that the JPEG developed (and has refined over the years).  As the name implies, the format is excellent for images where the colors flow together, such as a typical photograph.  The subtle changes from light to somewhat light, to somewhat a little less light, etc, etc, are what .jpg does best.  Because it's a relatively modern file format, using a compression algorithm, the file size of .jpg's is much smaller than those of .bmp images, but because of the complexity of the image itself, they are generally larger than .gif's.

There are, however, two very major drawbacks to .jpg's, at least in the eyes of a train gifs artist.

First, to use a rather awkward term, .jpg's are "lossy".  What-in-the-heck does that mean?  Well, when you work with a .jpg and save it, open it, manipulate it, save it, etc., you "lose" some of the pixilation or quality of the image.  When working in a graphics editor like Paint Shop Pro or Photoshop, you can have a very unpleasant experience as you see a previously brilliant graphic become more and more murky.  The real world, unpleasant aspect to all this is that nothing you can do to the .jpg image will restore it's brilliance.  The loss of pixilation ruins the image.

Second, the other fatal flaw in the .jpg format for train giffers is the inability to place such an image on a transparent background. This need will be discussed in the .gif format section.

.gif file format

This format is no good for photos, as it is limited to a palette of only 256 colors (which might as well have been a million, back in 1987 when the format was first developed.  Today, it's a serious limitation.), so it cannot handle subtle shifts in colors.  On the other hand, the limited color palette and the design of the compression algorithm itself makes it the ideal file format for typical line drawings, cartoons, and grayscale photographs, as 256 colors are more than adequate for these.  Train gifs are "typical line drawings."  Bingo!

Because of it's limited color capabilities, the files themselves are very small.  As mentioned above, the .gif images are at least 6 times smaller than .bmp images, and the larger the image, the greater the ratio of difference.  But wait (as the TV ad pitchman yells at you), there are even more advantages to .gifs.  The major advantage has previously been alluded to:  You can place a .gif image on a transparent background.  We've danced around this issue, but what does it really mean?  Imagine that 96x21 pixel ATSF SD40-2 train image.  Without a transparent background, the blue and yellow locomotive colors would look great.  If you had a pure white background on the Web page displaying the image, everything would be wonderful.  What if, however, your page background was light gray.  What you'd have is the yellow and blue loco in a white 96x21 pixel box sitting on, or moving across, the page.  Not pretty.  Suppose your background was black -- you'd still have the nice blue and yellow loco in a white 96x21 pixel box on a black background.  Really, really ugly.

By using a transparent background, the blue and yellow loco would display just fine, and the background to our 96x21 pixel image would be transparent, which allows the color of the page background to display.  Therefore, the blue and yellow image would appear to be superimposed on the (yuck) purple page background on your page.  The ability to display images on a transparent background is absolutely essential to the train gif artist.  This, more than anything else put together, is the reason "train gif artists" are not "train jpg artists" or "train bitmap artists."  You can't do it in .bmp or .jpg, and most people haven't even heard of .png.

Just what is "transparency", i.e., how does it really work?  Again, Wikipedia comes to the rescue:

One color entry in a single GIF image's palette can be defined as being transparent. This means that when the decoder encounters a pixel with this value, it is rendered completely transparent. The (crude) effect this has is that an image can appear to have a non-rectangular shape.

As if all this good news weren't enough, there is another cool reason for using .gif images rather than any other file format:  Animation.  We've all seen train gifs with the driving rods of a steam locomotive rotating elegantly, or the crossing gate lights flashing on and off.  These are called "animated gifs", and you can't do them in .bmp or .jpg.  Again, score a knockout for the giffers.

.png file format

This is the new kid on the block, but although it's been around for several years now, it is very rarely used.  Tim Berners-Lee, the inventor of the World Wide Web is the head guru at the World Wide Web Consortium (w3c), and he oversees efforts to standardize and improve the protocols and capabilities of the Web.  There are copyright clouds over the basis of the .gif format, and it is reported that similar clouds are gathering over the .jpg format.  As discussed above, there are also structural limitations to the those formats that reduce their potential effectiveness.  Tim established a working group to eliminate/reduce these limitations and copyright issues.  The solution was the Portable Network Graphics file format, the .png.  Universally pronounced "ping", these graphics are supposed to take the best of gif's and jpg's and combine them into a new compression algorithm.

Three lingering issues have dogged the file format:  First, because it was new in 1996, browsers were slow to catch up with the new format, and developers didn't want to include images that browsers couldn't render.  Second, many artists were, and continue to be, unhappy with the transparency feature of the format.  Finally, and today probably the biggest reason the format lags in popularity, it's new and different, and artists are comfortable with their gif's and jpg's and don't see the need to change.

I recommend all train giffers experiment with creating simple graphics in .png format, and testing them in moving train scenes. If the gifs render well, why not move up to the newest and best?  Time will prove the worth of the format.

Vector Graphics

Vector graphics are radically different from raster graphics.  Here's the low-down from Wikipedia:

Vector graphics use pure mathematics to draw shapes and images on a computer monitor, or on an output device such as a printer.

For example, consider a circle of radius r. The only pieces of information a computer needs in order to draw this circle are a) the radius r, b) the location of the center point of the circle, c) the circle color, d) line thickness, e) line style, and f) fill in or just draw an outline of the circle.

There are two major advantages to this style of drawing over raster graphics. First, this minimal amount of information translates to a much smaller file size. Second, the size of items, similar to our circle radius r, above, can be considered relative to the size of the containing rectangle. This means that vector graphics can scale (be resized) without any loss of quality. For example, if we have a bounding box that is 256x256 pixels, and a circle of radius 128 located at x,y coordinates (128, 128) we can scale the whole thing by multiplying all of these numbers by the same factor, say x4, and end up with a bounding box that is 1024x1024 and a circle that has a radius of 512 and a center point of (512,512). The circle drawn at this new size loses no quality over the smaller 128 radius circle.

Why even discuss vector graphics among train gif artists?  Well, as our hobby expands in number of artists, it will also expand in intellectual inquisitiveness.  The next technological generation of train artists won't be giffers, they'll be (just to pick one example) Shockwave artists, displaying trains that come at you, rather than just from left to right.  Linearity will not be a limiting factor, and their trains will expand and contract in size as they get near or recede from the "trackside rail fan."  Digital sound tracks will add a life-like dimension difficult to employ today.  You'll be able to zoom in on an engine, magnify it greatly, and enjoy a precision in detail impossible to achieve in today's tiny gifs.

There are barriers to employing these tools today, and they include the high bandwidth needed to deliver and play a vector graphic animated scene, especially if sound is to be employed.  Such movies are pretty much out of the question for dial-up surfers.  There is also a pretty significant learning curve to be surmounted, but that will happen over time, as a few talented artists will want to migrate to a higher plane.  And finally, the programs that let you develop such movies are complex and are therefore expensive, a barrier to many folks.  Like every other type of program, however, the price is coming down as the capabilities of the software are increasing.

It's an interesting time to be a train gif artist, and I suspect it will become more so in the near future.