"Digital" is one of the most versatile mediums an artist can use to create art. However, this versatility comes with a cost...Complexity. In digital, there are many ways to manipulate images; some ways alter the way the data is stored, some ways alter the data, and some ways lose data. It is the artist's job to understand where each of these ways is necessary and appropriate. Artists who don't take the time to understand technical details can damage their image data without even knowing it. This multi-issue article will explain some of the fundamentals as they relate to CG (Computer Graphics). This article in particular, discusses file formats and compression. There are two basic types of images: bitmap and vector. We will concentrate on bitmapped images since they can suffer the most from 'inadvertent digital processing'. What's a bitmap? What is a bit for that matter? And, how do bits relate to graphics? A bit is the most-basic entity of data. For our purposes it's either a "1" or a "0," data is either there or it's not. To help handle large numbers of bits, programmers group bits into bytes, which are eight (8) bits of data, or something like "10101101." Bytes are standard computer units. When you look at the file sizes of your images on the hard drive, size is given to you in bytes. HOW DOES A BYTE OF BITS RELATE TO GRAPHICS? In a black and white image, the correlation is quite clear - "1" is white, and "0" is black (or vise versa). By creating a grid of bits, each either a 1 or a 0, black and white images can be represented directly. At this level, a graphic file is simply a one-to-one correlation of bits and image color at each 'point' in the graphic. For this simple analogy, a bit and a pixel are synonymous. WHAT IS A PIXEL? According to msn's on-line dictionary, a pixel is the "basic unit of video screen image: an individual tiny dot of light that is the basic unit from which the images on a computer or television screen are made." We can expand that to include, graphics file. A pixel is also the most basic visual unit of a graphics image, stored in digital form. WHAT IF YOU WANT MORE THAN JUST BLACK AND WHITE IMAGES? For more colors, you need more bits. A logical progression in digital theory is to use bytes instead of bits: One byte of data for every pixel in your image - one byte of data to represent the color of every pixel. With a byte, you can identify 2⁸ colors (because there are 8 bits in a byte), or 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2, which is 256 colors. (And in fact, this is what a file format commonly used in web graphics does; the GIF file format is capable of displaying 256 colors. All the colors don't have to be different hues, you can have 256 shades of gray as well.) {How is it possible for a GIF of 256 colors to diplay not-too-horrible-looking photographs? A sneaky way that GIF formatted images appear to display more than 256 colors is a method called "dithering." Dithering is when you take two colors that are next to each other in solid blocks and create a transition between them that 'checkerboards' the two colors together more gradually. From a distance, this looks like a smooth transition,and 'continuous tone.'} What if you want more than 256 colors? The next huge step comes when programmers clump a few bytes together to get words. Depending on who you talk to, a word is either 2 or 4 bytes (or more for some weirdo applications). For us, it's 4 bytes to a word, or 32 bits. You will probably recognize the phrase "32 bit color" when people talk about high-end computer graphics. Unfortunately, it's not a straight escalation of colors or even a one-to-one correlation with the number of bits at the high-end. It would be nice if you could continue the logical progression of bits-to-colors and assume that because 1 bit represented 2 colors, 8 bits gets you 256 colors, with 32 bits of color data per pixel you therefore have 2³², or 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 (which is 4,294,967,296) colors. But, like many things in life, it's not that straight forward. Once you know how it does work, it isn't that bad though. Really *grin*. {What are those last 8 bits of data is used for? Some formats allow image transparency as well as color. This is called the "alpha" channel, or Alpha Layer. But let's save that for future articles.} To maximize how graphic data is stored and manipulated, each pixel's color is first broken down into its Red, Green, and Blue components. This coincides with the fact that your monitor uses these three 'beams' to make up the color of each of the pixels in your monitor's picture tube. This is also where the term "RGB" fits in. In RGB, 3 sets of numbers define the color of each pixel. Conveniently, 1 byte (8 bits) is used for Red, 1 byte for Green, 1 byte for Blue, and 1 byte for other information. With 32-bit color, using the RGB color model, there are 256 unique values each of Red, Green and Blue; this yields 256 x 256 x 256, or 16,777,216 discrete colors. If you look at any modern video card, it probably says it will do 16 Million colors, using 24 or 32-bit graphics. See? Once you know where things come from, the numbers start making perfect sense! Uh-uh. Some of the more straightforward graphics file formats simply assign an RGB value to each pixel of your image. These true color formats dedicate either 24 or 32 bits (or 48 bits even!)to each pixel and lay down the image data in a one-to-one relationship; one binary 'word' per image pixel. These types of file formats are in a family called "lossless" graphic file formats. No matter how many times you open and re-save in this format, you never lose even a pixel's worth of image data. Lossless is wonderful! But saving large, lossless graphics files can take up a huge amount of real estate on your hard drive. In an effort to use less space, programmers came up with the idea of compressing the image data. The easiest type of compression to understand is 'lossless' compression. This is where no image data is lost during compression. A simple, lossless, compression algorithm is when you have more than 2 pixels in a row using the same color; you use shorthand to represent those pixels. Say your image data looks like: "1,0,0,0,0,1,1,1,1,0,1,1,0," the compressed version would be "1,40,41,0,1,1,0," which reads...put a 1 down, then 4 0's, then 4 1's, a 0, 1, 1, and then a 0. You can see that while you do manage to shave off some space, you really don't gain much 'compression' unless there are huge areas of a single color. A more complex type of lossless compression commonly used is LZW compression, named after Lempel Ziv, who introduced it 1977. LZW compression looks at strings of data and replaces it with a more simple "code." It keeps a list of these codes in a table. As it reads through the data it replaces known stings with its shorthand code from the table. As it finds strings of data that it hasn't replaced, it creates another shorthand code for the new string and replaces it. The process can be repeated as many times as necessary until it has replaced several generations of data with its shorthand, some of which can represent strings of its own shorthand generated from previous 'runs.' It works remarkably well. Examples of lossless formats are: TIF, BMP, GIF, TGA, PSD, and PNG. GIF, by it's very nature, is very lossy if you consider that it can only represent 256 colors in the first place. If you have an image that started with 256 many colors or less, it is lossless from that point onward. PNG (Portable Network Graphics)is a new format, and is intended to replace GIF. PNG is not limited to 256 colors, and can actually handle images using up to 48 bits per color. Whenever you wish to keep an image intact, or plan on modifying it anytime in the future, store it in a lossless format. This decision may cost you more disk space, but it won't cost you any image data. If the image has less than 256 colors, GIF is good. If it is continuous tone, try TIF or TGA, PNG, or PSD. Let's say that you don't really care that the image undergoes a manageable amount degradation, as long as you can save hard drive space, and/or download time, and the image looks pretty much the same as what you started with...In this case, you would be smart to consider one of the "lossy" formats. For general CG purposes, there really is only one major format here: JPG.(Or JPEG it's sometimes called - JPEG is short for the 'Joint Photographic Experts Group', though most folks and file name extensions drop the "E.") JPG is an excellent format for certain cases. It allows for a variable compression setting, and even at extremely high compression rates, its does a marvelous job with continuous-tone images. "JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness. Thus, JPEG is intended for compressing images that will be looked at by humans."¹ SO HOW DOES JPG WORK? "The JPEG algorithm first divides the image into small blocks which are then converted into a frequency spectrum. The spectrum is then quantized and encoded. The quality (or the loss of precision) can usually be controlled at the time of compression of the original image."¹ What this means is that this compression algorithm runs through your image data and looks at blocks of the image, decides what the 'average' color of those blocks taken as a whole is based on the frequency of the color those combined pixels have, and then replaces the entire sampled block with that single, derived color. This sampling can be very fine, or very coarse, and is directly related to the quality of your saved, compressed image data. What does all this mean to you, the CG artist? It means that every time you save an image in JPG format, you are LOSING DATA. The image you save is not the image you are looking at, even if you use the BEST JPG sampling rate Except under specific circumstances, if you open and re-save a JPG numerous times you will be continuously degrading or 'averaging' the pixel data of your graphic. "Does loss accumulate with repeated compression/decompression?" "It would be nice if, having compressed an image with JPEG, you could decompress it, manipulate it (crop off a border, say), and recompress it without any further image degradation beyond what you lost initially. Unfortunately THIS IS NOT THE CASE. In general, recompressing an altered image loses more information. Hence it's important to minimize the number of generations of JPEG compression between initial and final versions of an image. "It turns out that if you decompress and recompress an image at the same quality setting first used, little or no further degradation occurs. This means that you can make local modifications to a JPEG image without material degradation of other areas of the image. The areas you change will degrade, however. Counter intuitively, this works better the lower the quality setting. But you must use *exactly* the same setting, or all bets are off. Also, the decompressed image must be saved in a full-color format; if you do JPEG=>GIF=>JPEG, the color quantization step loses lots of information. "Unfortunately, cropping doesn't count as a local change! JPEG processes the image in small blocks, and cropping usually moves the block boundaries, so that the image looks completely different to JPEG. "The bottom line is that JPEG is a useful format for archival storage and transmission of images, but you don't want to use it as an intermediate format for sequences of image manipulation steps. Use a lossless 24-bit format while working on the image, then JPEG it when you are ready to file it away."¹ Gif - Indexed (Adaptive), 255 clrs, diffusion dither 75%, no transparency, 880 kb JPG - Best Quality Setting in Photoshop (12/12), progressive, 3 scans, 1,410 kb JPG - Median Quality Setting in Photoshop (6/12), progressive, 3 scans, 219 kb JPG - Lowest Quality Setting in Photoshop (0/12), progressive, 3 scans, 73 kb Original Image (1500x1500 pixels), RGB, 300 dpi, psd format, 5,174 kb Close-up - JPG, Medium (6/12 in Photoshop), opened & saved, total of 5 times. For more about file formats, lossy and lossless compression, and other fundamental concepts, check computer graphic newsgroups and websites which provide technical specifications and examples. I found a wonderful link which provides excellent summaries of the most common graphics file formats: www.dcs.ed.ac.uk/home/mxr/gfx/2d-hi.html. Do your own experiments. Take a high resolution TIF and save it using different formats. Compare the file sizes. Examine several areas of the image under very high magnification to see what has happened to your image. Study the results and make your own, educated choices as to which formats best suit the way you work. Save your pixels! ¹This taken, with the author's permission, directly from the newsgroup "comp.graphics", from tgl@netcom.com (Tom Lane), Subject: "JPEG image compression FAQ, part Message-ID: jpeg-faq-p1_806455215@netcom.com." Let's do some math here - You create an image that is 1000 pixels wide and 1000 pixels tall, that is 1,000,000 pixels total in your image. Each pixel uses 32 bits, or 4 bytes of data (each file format may use more or less data, depending on the format but we'll stick with 32 bits for our rough calculations), which will make your file roughly 4,000,000 bytes large. That is 4 MEGS for one image! And this is for a simple file, without layers or any fancy stuff going on. That's why compression is a great thing! To view the original images in their pure TIF format glory, download the zip file here.

---

A few years back audre quit her geeky day-job as a System Integrator/Computer Consultant and took the plunge to become an official Starving Artist! This decision was possible mostly through her involvement with Renderosity, which provided the basis and support-structure to help her evaluate and make this life-changing decision. This whole new phase of her life and career came about most because she is pretty much a computer dweeb with an addiction to eyecandy -- It's her fascination with 3D software as well as fractals, bright colors, shiny objects, loud noises, and very weird images that insures her continued attachment to the 'magic box' which is her computer. Her forte is definitely in the bizarre and offbeat. She spends most of her 'work day' glued to her pleasure machine, pumping out illustrations for a computer hardware marketing company and also miscellaneous book covers, CDs, web sites, and RPGs whenever possible. In her spare time, she is the editor-in-chief of Renderosity magazine (and is extremely proud to be part of the wonderful team that brings you the best CG magazine in the business!!), the manager for the digital art section at Dragon*Con, and also an inmate at TheAttic - A peculiar online community. She is also currently co-editing a scrumptious coffee table book of digital art -- "Digital Art for the 21st Century: Renderosity" -- with regularly contributing Renderosity magazine article author Paul Barnett, who writes under the nom de plume of John Grant, and is himself the editor and author of numerous fantasy art books and winner of the Hugo, World Fantasy Award and Chesley Awards. Stay tuned for more on this exciting project later! She vaguely remembers something about having a very patient and loving husband, her dogs, and other miscellaneous rescued creatures scampering around the house, but may be mistaken

Meet the amazing Renderosity magazine Team

---

---

The Magazine Interact Forum's Back Room is the place to go for editorials, magazine excerpts, discussions, and plenty of surprises. Also, if you haven't done so yet, you can subscribe to the magazine or buy single issues. To find your way there, go to the Magazine Interact Forum, and click on the link to the Back Room at the top. Every couple of weeks, we'll be highlighting an article, review, or editorial from past issues of the magazine. Our final feature from Issue #1 is audre's "Digital Minutiae." You can view this article as an original pdf by going to the Magazine Interact Forum Back Room and going to Special Features.