"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
8 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
32, 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."
1 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."
1 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."
1
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! 1This 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
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.