he decisions you make about file format, compression, palette, resolution, and bit depth effect both quality and download speeds.
There are a number of technical decisions you’ll need to make as you create and optimize images for the web. Here are some of the decisions you’ll need to make. Click on the option to learn more about it.
- File Format. Make sure the format you select is the best match for each graphic.
- Bitmapped or Vector. Each type of defintion has its strengths.
- Resolution.The Web is not print. The Web is not print. The Web is not print.
- Indexed color. You can set the range of colors (the palette) for your graphic.
- Anti-aliasing. This technique makes bits appear smoother.
- Compression. The tradeoffs in making files even smaller.
- Thumbnails. A way to show large images in a smaller space.
Just as you can save text documents in different file formats, .txt (straight text), .doc (Microsoft Word), .rtf (rich-text format), etc. so too can you save graphic images in different formats. Each format is designed to handle a specific kind of image and applies a different type of compression to the image.
In this section, we’ll show you how to choose the best file format for your Web-page images. With the right format, your images will look great and equally important on the Web your image files will be kept to a minimum.
The two main file formats used for Web images are GIF and JPEG. Both formats were developed long before the advent of the World Wide Web, but they really came into their own when they became the de facto standards for Web images.
- GIF works best with images composed of lines and solid blocks of color, such as text, cartoons, or buttons.
- JPEG works best with photographs and other continuous-tone images.
New image formats have been developed specifically for the Web. The one that has gained the most acceptance is PNG.
- PNG works equally well with either line or continuous tone image data.
|Learn more about the GIF format.
|Learn more about the JPEG format.
|Learn more about the PNG format.
GIF pronounced with either a hard or soft g?jif or gif?stands for Graphics Interchange Format. The GIF file format uses lossless compression to keep file sizes as small as possible.
GIF is the right format for images that are composed primarily of lines and solid blocks of color. Its compression scheme condenses repeated bits of the same color down to a single instruction that says, for example, “82 orange bits.”
A GIF image’s color palette is limited to a maximum of 256 colors. Use the GIF format for indexed images of 256 or fewer colors. The graphic must already be indexed with a color resolution of 8 bits or less to save it as a GIF.
Avoid using the GIF format for images with complex, subtle gradations of color. For these images, use JPEG instead.
|These two images are perfect candidates to be saved as GIF files. They have a limited palette of colors, and the colors are mostly in solid blocks with clear edges.
The GIF file format also provides us with a couple of very useful features — transparency and animation — neither of which are supported by the JPEG format. PNG has transparency features, but does not support animation.Transparency
When saving an image in the GIF file format, you can choose one (and only one!) color to be transparent. A transparent color is like a piece of clear glass; it is invisible and allows whatever is displayed “beneath” it to show through. Thus the GIF transparency feature enables you to create irregularly shaped images with the background showing through.
|The images on the left are all the same transparent GIF, repeated nine times in a table, with each table cell set to a different background color. The transparency allows the color backgrounds to show through.
Here’s the GIF image without any transparency effect. See how the non-transparent white blocks the brown background from showing through?
When you export a file as a GIF from your graphics program, transparency type is one of the options.Animation
Without requiring your viewers to have any special browser plugin, the GIF format enables you to create and display animated images on your web page.
|This animated gif is made of a series of frames. The ability to animate is part of the GIF89a standard.
JPEG?pronounced jay-peg?stands for Joint Photographic Experts Group. The JPEG format uses lossy compression to manage file size.
The JPEG file format is the right choice for photographs and other images with continuous-tone color gradations. The JPEG format was developed to reduce the file size of photographic images while maintaining quality. It doesn’t do a good job on solid blocks of color; its attempt to “smooth out” the colors often results in blotchiness.
JPEGs work with color resolutions of up to millions of colors (also called 24 bit color). When you save an image as a JPEG, it gets compressed, making the file smaller. However, JPEG compression is lossy, so each time you save a JPEG, you lose some data and reduce image quality.
When saving a JPEG, you can choose a compression level from low to high. Low compression give you better quality but a larger file size. High compression gives you a smaller file — but less quality. As always in Web design, you must find a balance this time between quality and file size.
|Here’s a photograph saved as a JPEG file. The JPEG format does a great job with smooth color tones.
Here’s a text image saved as a JPEG. The JPEG format does a poor job with solid blocks of color.
PNG pronounced ping or p-n-g stands for Portable Network Graphics. It is a lossless format, compressing files without losing any quality.
The PNG format was developed a few years ago to replace the older and more limited GIF file format on the Web. PNG is a very flexible format:
- Files can be palette-based, grayscale, or true color images with color resolutions of up to 48 bits.
- In addition, PNG has a number of new features: cross-platform color and gamma correction, and fully variable transparency effects.
Unlike GIF, however, PNG does not support animation.
Although it’s a new format, most image-editing programs can read and save PNG images. Macromedia Fireworks, for example, uses PNG as its native file format. Since it uses lossless compression, PNG files retain all information throughout development.
PNG offers several advantages to Web developers:
- File size?Indexed PNG image files are almost always smaller (generally 5-25%) than identical GIF files.
|This GIF image uses a palette of 155 colors. The file size is 5,125 bytes.
|This PNG image uses an identical palette. Its file size is 4,253 bytes.
- Transparency?Unlike GIF, which only lets you to choose a single color to be transparent, PNG provides full alpha transparency. What this means is that you can have images with graduated transparency. Imagine drop shadows and anti-aliasing against any color. In short, much cooler, professional-looking images.
- Gamma correction?PNG files can carry information to compensate for brightness variations between Macintosh and PC monitors.
Despite these advantages, PNG is not yet fully supported by the major browsers. Versions 4+ of Netscape and MSIE (with the exception of MSIE 4.5 for the Mac) will display PNG images, but there are limitations. In particular, gamma correction and alpha transparency are not consistently implemented. Bitmapped vs. Vector-based and Bitmapped Images
All images display on a computer screen as a grid of pixels of various colors. The image files that contain these images store that image data in one of two fundamentally different ways:
- Bitmapped image files store image data as a map of individual pixels. GIF and JPEG are bitmapped formats.
- Vector-based image files store image data as a set of mathematical formulas that instruct the computer how to draw the image. Macromedia Flash is a vector-based format.
Some file formats, such as PNG, contain both bitmapped and vector-based image data.
|Learn more about bitmaps.
|Learn more about vectors.
By far, most of the images you see on the Web are bitmaps. GIF and JPEG, the most commonly used graphics file formats on the Web, are both bitmapped formats.
Your browser (or any program that can display a bitmapped image) reads the bitmap horizontally, row by row. Each pixel is painted on the screen in the color specified in the image file. In this example, each pixel is white or a shade of green.
Note: Don’t confuse the Windows file format BMP with the graphic category bitmap. Although BMPs are bitmaps, the term bitmap is more inclusive and describes the entire class of graphics that store image information as pixels in a grid.
A bitmapped image can contain a specific maximum number of colors, depending on how much file space is allocated for the color data: 256 colors for an 8-bit image, 65+ thousand for a 16-bit image, 16+ million colors for a 24-bit image. Not surprisingly, the larger the number of colors, the larger the file size.
Bitmaps can be created or edited in image-editing programs or Web graphics programs. These programs typically provide filters and other tools for fine-tuning an image pixel by pixel. The original old photograph below, for example, was severely scratched and discolored, but ended up looking just fine after being retouched. However, once a bitmap has been created, it cannot be altered without sacrificing quality. This is a major drawback of bitmaps.
|When enlarged to 400% (right) the photograph appears blocky and irregular. What were smooth gradations of colors now are clearly visible as different colored pixels. To get more gradations, we would have to rescan the original photograph at a higher resolution.
Vector-based images are composed of key points and paths which define shapes, and coloring instructions, such as line and fill colors. The computer follows these decriptions to display the image.
|On the right, you can see the key points and paths that define the purple blob.
|Vector-based images are edited by moving the key points or paths, as in the animation on the left. As you can see, such images are easy to alter, making them excellent tools for computer-graphic artists.
There are two tremendous advantages of vector-based images:
- File size. Since vector-based image files need only store instructions for drawing an image, not data for each image pixel, a vector-based graphic file is considerably smaller than that of a corresponding bitmap file.
- Reuse. Vector-based images can be easily resized, recolored, and reshaped without lowering their quality (color, detail, sharpness, etc.). This is not true for bitmaps.
|The vector-based image on the left started out as the middle-sized leaf. We enlarged one and shrunk the other, but they all maintained their crisp edges and purity of color.
Here we tried enlarging a small leaf bitmap. The results are obvious: pixelization, rough edges, and areas of blotchy color.
Before a vector-based image appears on a computer screen, it must be rasterized, that is, converted to a bitmap. The display software a browser, image viewer, or graphics program performs this task behind the scenes, calculating the color and location of each image pixel based on the mathematical formulas embedded in the vector-based image file.
Vector-based graphics have been around for a long time. They are used in:
When it comes to the Web, the major disadvantage of vector-based images is that there are no standard vector-based file formats! Contrast this with bitmaps, for which the GIF and JPEG standard formats exist.
This will undoubtedly change over the next few years. Various Web standards organizations are busy right now hammering out vector-based file format standards, but there are many competing formats, and it will take time before a true standard emerges. In the meantime, the only widely used vector-based format is Macromedia Flash, which provides animation and interactivity as well as still images.
So for now, with the exception of Flash, use of vector-based images is limited to graphic design and development, in programs such as Fireworks, Freehand, or Illustrator. Once the design is complete, the image is typically exported as a bitmap: GIF, JPEG, or perhaps PNG.Image Resolution
Each pixel is a single color, but since pixels are very small, an image such as this photograph appears to have smooth gradients of color:
The density of pixels per inch (ppi) is called image resolution. Although there is variation between monitors, the rule of thumb is that screen resolution is 72 ppi. This means that all images used for the Web should have an image resolution of 72 ppi.
Why not use higher resolution? More pixels per inch means a higher quality image, right? Well, only if your are displaying your images on something that can show all those extra pixels. On the Web, your reader’s monitor is the limiting factor. You could send more pixels to display, but they’d just be ignored. Higher resolutions are simply bandwidth wasters, needlessly inflating file size with no visual advantage whatsoever.
However, it’s different if you intend to print the image, rather than display it on a Web page. Printers typically produce from 300 to 600 dots per inch, or dpi. (Dots and pixels are the same concept, different terms.)
By the way, don’t confuse the terms image resolution and color resolution. Color resolution, also know as bit depth, refers to the number of possible colors in a digital image file.Bit Depth, Color Depth
Bit depth is the number of bits in each pixel. Color depth is the maximum number of colors in an image and is based on the bit depth of the image and of the displaying monitor.
A bit is the smallest unit of information a computer understands. It has two possible states: it can be on or it can be off. All computer information is handled in this way.
A computer monitor is made of pixels (short for “picture element”). Depending on the monitor and the computer system, each pixel will have a specific number of bits assigned to it. These bits effect how the pixel will appear.
A black-and-white monitor has one bit per pixel. This bit has two possible states: it can be on or off. When it is on, the pixel looks white. When it is off, it looks black. Each pixel has a bit depth of one and a color depth of two. One bit produces two possible colors.
If there are 2-bits per pixel, the number of colors each pixel can display rises to four. Two-bits per pixel means each pixel has 2 bits and each bit has two states: on and off. In mathematical terms, 2 bits x 2 states = 4 colors.
This relationship continues as the number of bits increases:
- A 4-bit pixel can display 2x2x2x2 or 16 colors.
- A basic color monitor has 8-bit pixels and is capable of displaying 256 colors.
- These days, most color monitors have 16- or 24-bit capabilities, and display thousands or millions of colors.
Here’s a breakdown of bit depth and color depth. Color depth is sometimes called color resolution.
In the same way, bit depth and color depth describe the number of possible colors in a digital image. The number of bits each pixel has is the image’s bit depth, and the number of possible colors increases as bit depth increases.
For example: An 8-bit image can have up to 256 colors (8 bits/pixel x 2 states/bit = 256 possible color combinations). Of course, file size also increases a bit depth increases, so you’ll always be trying to find the tradeoff between quality and size.
Important reminder! No matter what the bit depth of your image, it can only be displayed at the highest number of colors the monitor supports, regardless of the number of colors in the original image. That means someone uses an 8-bit monitor will see only 256 colors in your image, even if you saved it at higher value.
By defintion, a GIF image cannot have more than 256 colors or an 8-bit depth.
Here is the same image saved in four different color-resolution/bit-depth settings. Remember, if your monitor or display card is set to only display 8- or 16-bit color depth, you won’t see a difference in the higher resolution versions of the image in this example. What you see is always limited by your monitor.)
Notes: In a black-and-white image, such as the first GIF above, each pixel is either on (black) or off (white). Thus the image file of the above GIF has a bit depth of 1 bit and a color resolution of 2 colors.
The second GIF image above contains a total of 16 colors, and uses 4 bits to store each pixel’s color data. (Remember: 4 bits can store 16 values = 24 (2x2x2x2).) This obviously results in a much larger image file than that of the black-and-white image, 4,407 bytes vs. 1,329 bytes.
The third GIF image uses the maximum GIF color resolution and bit depth: 256 colors and 8 bits. Its file size is proportionally larger than that of the previous two lower-resolution GIFs. The 256 colors go surprisingly far in rendering image color gradation, particularly with an adaptive palette. However, to render the subtler gradations and hues in more complex images, you will need to save these images at a higher bit depth: 24-bit — a color resolution of millions of colors (16,777,216 colors to be precise). These will have to be JPEGs, since GIFs are limited to 256 colors.
To create a depth greater than 256 colors, we must use a JPEG format. The fourth image, 24-bit JPEG above has a file size smaller than that of the 8-bit GIF. This is due to GIF/JPEG compression differences.Indexed Images, Palettes, and Dithering
RGB formats, also known as true-color, use 8 bits of data for each Red, Green, and Blue value. Together, this forms a 24-bit pixel palette which has 16.7 million colors (224=16,777,216 colors). JPEG images whose bit depth can be 16, 24, or 32 are RGB images.
Indexed formats are mapped to a smaller color palette?256-colors or less. All GIF images whose bit depths can range from 1 to 8 are, by definition, indexed images.
In an indexed image, colors are stored in a palette, which is sometimes referred to as a color lookup table. The indexed image’s palette contains all of the colors that are available for the image.
Palette for image
|This image contains only the 256 colors in the palette to the right.
There are several standard color palettes: The Windows system palette, the Macintosh system palette, the Netscape palette, the Internet Explorer palette, the “Web-safe” palette, etc. All of these palettes are unique, yet all share certain “universal” colors, such as black, white, red, green, and blue.
Fortunately, you are not limited to using the standard palettes. You can create your own adaptive palettes that contain the exact set of colors you need for specific images. You’ll do this with your graphics program.
Here’s an example of how an adaptive palette can help keep your image quality as bit levels decrease.
The bit levels might decrease because you are tipping the scales in favor of file size and using a lower bit level or because the person viewing the image has a monitor that supports a lower bit level.
|Here’s an 8-bit/256-color indexed image.
|And here’s the adaptive palette that contains all of the 256 colors used in the image.
|Here’s the same image reduced to 6-bits/64-colors.
|And here’s its 64-color adaptive palette.
|Here’s the image reduced to 4-bits/16-colors.
|Here’s 16-color adaptive palette.
|And, finally, here’s the image reduced to 2-bits/4-colors. Note how much color detail was lost by reducing from 256 to 4 colors.
|Here’s the 4-color adaptive palette.
Each pixel of a digital image can be one, and only one, color. This fundamental limitation would be no problem if the pixels were infinitesimally small, say 100,000,000 per screen. Unfortunately, they are much larger than that, in the range of 250,000 to 1,500,000 per screen (depending on your screen resolution). At this pixel size, an image’s smooth line edges often appear jagged.
|See how the curves have a case of the “jaggies”?
To get around this limitation, an illusion of “blending” is created by placing similarly colored pixels next to one another. This process of fooling our eyes into seeing smooth line edges is called anti-aliasing.
Here, are aliased and anti-aliased versions of the same image:
|Note: The edges of the anti-aliased image’s curves and lines look much smoother and more professional.
Here’s a zoomed-in detail of the aliased image:
|This close up, you can clearly see the blocky edges of the circle (red) and oval (green) curves and the wedge (blue) line. These artifacts of aliasing are often affectionately referred to as “the jaggies.”
Here’s the same detail of the anti-aliased image:
|You can clearly see how aliasing has blended colors along the curve/line edges to smooth them out. Note that the edge colors are blended with whatever color they happen to be next to. Thus blue is blended with white, red, and dark green; red with blue, white, dark green, and light green.
There are a couple of potential problems associated with anti-aliasing:
- Anti-aliasing increases the file size of GIFs. Why? GIF compression works well with solid color blocks, and anti-aliasing creates non-solid color blends.
- Anti-aliasing can cause the dreaded “fringe” effect. When you anti-alias an image, its edges are blended with their adjacent colors (as explained above). If you change an adjacent color, a fringe will appear around the corresponding edges. Observe, for example, these two transparent GIFs:
Note: The first transparent GIF is not anti-aliased; its edges looks fine (except for the jaggies) against the black background. The second transparent GIF is anti-aliased against a white background. A white fringe appears around its edges when the background is black.
To reduce file size, file storage formats use mathematical formulas to analyze and condense the image data they contain. This process is called compression.
Due to the bandwidth limitations of the Internet, files must be small in order to be viewed by the audience in a reasonable amount of time. Graphic files are notorious for their large sizes — to view them in their original format would require far-too-much time over a standard Internet connection.
In order to display images in a brower in a reasonable amount of time, Web-based graphic file formats use aggressive compression schemes to transform large images to small file sizes. Compression schemes are used to re-encode data into more compact representations of the same information. In other words, fewer words (or bits) are used to say the same thing.
There are two types of image compression: lossy and lossless. Lossy compression creates smaller files by discarding some information from the original image. It removes details that are supposedly too small for the human eye to differentiate. Lossless compression, on the other hand, never removes any information from the original file.
Lossy compression creates smaller files by discarding some information from the original image.
Lossy compression removes image details that are (in theory, at least) too small for the human eye to notice. PEG uses lossy compression. The JPEG compression scheme discards image data to reduce file size.
Hold on just a minute! You’re designing wonderful Web pages and you want the highest-quality images, yes? Well, yes and no … What you want is the best tradeoff between image quality and file size. For photographs and complex colored artwork, JPEG compression provides a great way to achieve that tradeoff.
JPEG compression is based on the fact that our eyes are sensitive to certain kinds of visual details but not others. JPEG analyzes the image and throws out details that it deems unnecessary. How much it throws out is your choice.
Since JPEG compression was designed for photographs with smooth continuous tones, it does an excellent job with these types of images. It does a poor job, however, with images composed largely of solid color blocks and lines; it tries to shade them and smooth them out, resulting in ugly artifacts.
When saving an image as a JPEG, most software allows you to select a quality level. The higher the quality, the less compression and image degradation, but the higher the file size. As always, you must find the right tradeoff between image quality and file size.
|Image at 100%
|Image at 200%
|Note: For most purposes, the 75% quality image would be completely adequate. And it provides a significant file size savings more than half over the 95% version. The 50% quality image is not bad either, although the artifacts are beginning to become noticeable around the edges of the leaf. The 25% quality image is clearly artifact-rich and inferior.
Remember, JPEG compression is lossy. Every time you resave an image in JPEG format, you irretrievably lose image data/quality! Therefore, if you intend to reedit an image, be sure to save your master image in a lossless format, such as the native format of your image editing program.
Lossless compression never removes any information from the original file. It relies instead on representing data in mathematical formulas.
GIF and PNG use lossless compression; these formats reduce the image file size without losing any image data. Magic? Not really …
To understand, we must journey deep into the heart of the GIF file format. As you know, bitmaps store color information pixel by pixel, in rows and columns. GIFs are read horizontally, left to right, row by row. For example:
The pixels in the first row of this bitmap are:
GIF compression, however, sees a golden opportunity to compress the pixel-color data:
The use of thumbnails isn’t really a technical decision, but we include it here because using many large images on a single page is one of the common mistakes people make when first using graphics.
One way to show several images on a page?without drowing your readers in download time?is to use thumbnails instead. For example, if you are creating an online gallery or photo album, consider displaying thumbnails instead of the full-sized images. Rather than waiting forever for all of the large image files to load, the user will only need to wait a short while for the thumbnails to load. Then he/she can click on a specific thumbnail to see its full-sized version. For example:
To create a thumbnail:
Note: Do not create “lazy-thumbnails” by simply reducing the values of an IMG tag’s WIDTH and HEIGHT attributes! This totally defeats the point of using thumbnails, which is to reduce the image file sizes. Reducing WIDTH/HEIGHT to shrink an image doesn’t shrink its file size at all and you won’t save any download time.