• Overview
• The Basics
• Rules
• Tips And Techniques
• Exercises

The Basics

File Types

When referring to Web graphics, there two file types. They're not GIF and JPEG, as one might imagine, but they do have a fairly straightforward connection to those two file formats. The first file type is a "graphic" and the second is an "image." The distinction between the two is important in preparing files for the Web, because each file type should be treated differently.

A graphic is a file that does not have continuous tone or full-color. It usually consists of a few flat colors (and maybe some shading) that make up a logo or a cartoon type representation of something. They are usually hands-on or computer generated. Graphics are primarily created in vector-based programs, such as Adobe Illustrator or Macromedia FreeHand. However they can be created in Adobe Photoshop and many other raster-based applications.

An "image" is a photograph, or the like, that has continuous tones. It usually contains numerous colors, or shades, and is an actual record of "real life" -- i.e. not hands-on or computer generated. Images are usually created with a camera, digital or traditional, and then imported into an application like Adobe Photoshop or another raster-based image editing program.

In general graphics are converted into GIF files and images are saved as JPEG's. However, some graphics have gradients and are more like continuous tone images. Therefore saving them as JPEG's might result in a better image. Conversely, if an image contains very few colors, it might ultimately look better saved in GIF format. It is important to recognize what is in the image, and save the file accordingly.

So, what should you take away from this section on file types? The type of file is determined by what is in it. If a file includes lots of color and continuous tones, you probably want to save it as a JPEG. Or if there are very few colors and large flat areas of color you probably want to save it as a GIF.

File size

File "size" can be used to refer to a number of things. Here, the words file size refer to the size in BYTE's (or kilobytes KB) of the file. The physical size and the resolution, which are often referred to as file size, do play significant roles in determining the size in KB, but they are separate entities. Plus they need to be noted in most cases to get an overall picture of the file. But the file size is just the "K" of the file. File size is important, because it affects how much time the file will take to download and how much space it will take up on a server.

Resolution

Resolution, like most of these terms, can mean a lot of things to a lot of people. To some it actually means the file size. To others it means the DPI (dots per inch). While others think it's the pixel dimensions of the file, and still others don't know what it is. But here's the truth: Resolution, by definition, states the number of pixels displayed in a particular unit of measure (usually an inch). This is where the "PI" in DPI comes from, however DPI stands for dots per inch, and "dots" usually refers to printing. The proper term is PPI which stands for pixels per inch.

But if we were only to state the PPI we would not really convey how big the file is (in terms of how much space it takes up on the screen). This is why pixel dimensions are needed. To say something is 640 by 480 tells most people how big the file is - but that's because they know, or assume that they know, the "target resolution" (in this case the monitor). But if someone tells you 640 by 480 you should always ask them what the "target resolution is." This is because all devices (printers, monitors, etc.) have resolutions associated with them, and they are all different .

So what should you take away from all of this? Two things, first that resolution is a catchall term that, more or less, people use to mean how much space the file takes up, either on-screen or on a piece of paper. This "resolution" is determined by the target resolution of the output device, and the pixel dimensions of the file. For example if you have a file with the pixel dimensions equal to 144 by 216 and you're displaying an on-screen (which has a default resolution of 72 PPI) then you can deduce that your image will be two inches by three inches (144/72 = 2; 216/72 = 3). So, again, when someone uses the word resolution they may use it to mean many different things. As long as you keep it clear in your head that you need to know the pixel dimensions and the "target resolution" you'll do just fine. (And, of course don't forget that when creating graphics for the Web 72 PPI is your target resolution.)

Note: Mac monitors have a resolution of 72 PPI while PC monitors have a resolution of 96 PPI. On the Web "standards" usually come from the lowest common denominator. Therefore 72 PPI is your target resolution. However this means that on PC monitors graphics will look smaller. Text, on the other hand, generally gets bigger on PC. This has to do with font mapping and point size. In other classes (such as advanced web page construction) you can learn about cascading style sheets which allow you to specify pixel sizes for fonts which minimize this problem.

Color

Photoshop, and many other image editing programs, recognize a number of different "color modes." There are two that are relevant to on-screen Web work. The first, which is for most on-screen work, is RGB (red, green, blue). If you are familiar with color photography, you know that RGB is the additive color method where all colors add up to be white. This is the way our eyes work, and the way color monitors work. The second is indexed color, which is used for GIF files. Indexed color is, essentially, a small subset of RGB colors listed in a specific index, or palette.

It is important to understand these color modes to properly calculate (or duplicate) the the colors that are in our graphics and manipulate them accordingly. We also need to understand these numbers so we can convert the RGB values into hexadecimal numbers to specify the same colors in our graphics and our Web pages. Actually HEX numbers and RGB numbers are the same thing, they just express themselves in different ways. A number in HEX code or an RGB values is similar to a word in Spanish or French. Neither is my native language but both can be translated so that you, and I, can understand them.

Basically both HEX and RGB numbers specify the percentage of red, green and blue that make up any color. Hex numbers are six characters long such as FFFFFF. The first two characters are for the red content, the second two are for the green content, and the last two are for the blue content. The RGB numbers are usually given in the sequence of three numbers separated by a commas. RGB numbers are also given in the red-green-blue format, such as to 255, 255, 255. The chart below shows what each number means: (note these for the Web safe colors, which are described in the next paragraph)

Percentage of color	Hexadecimal code	RGB (decimal)
0	00	0
20	33	51
40	66	102
60	99	153
80	CC	204
100	FF	255

So with this chart above (and the information about additive color) we can deduce that the color described above (FFFFFF in HEX, and 255, 255, 255 in RGB) is white, since both numbers call for 100 percent of red, green and blue.

Color palettes are another thing we need to at least think about when we are talking about color relative to Web graphics. It's possible to use any color available to you through the computer (which is all the colors the human eye can see). However, for a number of reasons, it's a good idea not to use them all. The first reason is because using too many colors just makes ugly graphics and doesn't give your site a unified look and feel. The second reason is that, generally speaking, the more colors you have in your graphic the larger your file size is going to be, which will slow down your graphics. The third reason is because you can't guarantee your colors will look the same on every computer. Older machines sometimes can't display the color; newer machines sometimes are calibrated differently (which, usually, makes the color lighter or darker). To be truthful, you can't always avoid some of these things. But if you decide on the palette ahead of time, and stick to those colors, chances are good that even if your Web site doesn't look exactly like you wanted it to, it will still look a lot better, and load mre quickly.

But sometimes color palettes take a lot of getting used to, and sometimes there to restricting to start out. So your best bet is to start out with the color safe palette. This color safe palette, sometimes referred to as the netsafe palette, is a calculation of colors that will display on any computer without dithering on a machine that meets the minimum display requirements for the Web.

Just like 72 DPI is the standard target resolution of monitors (being the lowest common denominator) 8-bit color is also a standard. 8-bit color means only being able to use a subset of all available colors, and frankly it's not as necessary as it used to be, but it's still a very good idea, and the netsafe palette is a great idea. You can view these colors via the EdTech color picker (or in many WYSIWYG HTML Editors). The URL for the EdTech color picker is is http://www.edtech.neu.edu/colors/

Bit depth is another area that we need to look at when talking about color. Bit depth can be thought of as away to refer to the amount of color in a file. There's a really technical definition which talks about layers and levels of color and how that relates to file size but I'll spare you all that in favor of this simple explanation: the higher the bit depth, the more color in your file and the bigger your file size. This is how GIF files compressed themselves. They reduce the bit depth, and the smaller the bit depth, the fewer the colors and the smaller the file size. JPEG files do not use this method of compression. Their bit depth remains at 32 which is why they're generally better for images with lots of color.

Usually monitors also have a maximum bit depth (similar to a target resolution) which cannot be exceeded. So again your file and your output device work together to show the complete image, and you should keep this in mind. Today most monitors have a high bit depth (such as 32-bit or 24-bit). So the biggest reason to play with bit depth is to get smaller file sizes by using less color.

File formats