creating graphical content
Goals: The web is a graphic-rich environment. Graphics are used to create a look and feel, deliver content, and provide navigation for web pages. Whether a logo, imagemap, animated gif, button, or simple background image, it is important to understand a few basic concepts about graphics to ensure their success. In the hands-on section, we will be using the following features: optimize, preview, ALT tags, slice names, export options, and exporting images and HTML.
resolution
Resolution refers to the amount of space available to represent an image. The terms DPI (dots per inch) and PPI (pixels per inch) are used to describe the resolution of an image. The higher the resolution, the more space that is available to describe the content of the image. The more data, the larger the file size and the longer the download time for a user.
In the picture below, let's say that the image on the left is a 72 ppi image and the image on the right is a 300 ppi image. The grid contains a series of squares. Each square can only be one color. The 300 ppi image is going to have more detail than the 72 ppi image because there are more squares to describe the content.
Figure 1. Resolution
How does one determine what resolution to use when creating images for the web? When working with graphics, the rule of thumb is to create/scan images at the same resolution of the device to which they will be output.
- If these images were going to be output to a laser printer, they would be created at 600 ppi -- the resolution of most laser printers.
- If images were going to be output to a quality color printer, they would be created at 300 ppi.
- If images are going on a web page, they would be created at 72 ppi -- the resolution of computer monitors.
The most common error people make when they first start working with graphics for the web is to save images at larger resolutions. Their thinking is that if there is more data, the picture will look better. Their logic isn't completely off -- a 72 ppi image printed on a 600 ppi printer will look worse than a 600 ppi image printed on the same printer. However, a 72 ppi image displayed on a computer monitor will look the same as a 300 ppi image displayed on a computer monitor -- only bigger. Why?
The table below is displaying two images. The first image was scanned at 72 ppi. The second image was scanned at 300 ppi. Why is the second image so much larger?
| 72 ppi - 36K - (128 pixels - 98 pixels) |
 |
| 300 ppi - 88K (535 pixels - 407 pixels) |
 |
Answer: The computer monitor can only display 72 pixels per inch. A one inch wide 72 ppi takes up 1" on a computer monitor. A one inch 300 ppi image takes up about 4" to display on a computer monitor because it has more pixels to display than the monitor can fit in the same amount of space.
If higher resolution images need to be delivered to users, place a low-resolution image on the page and provide a link to the higher resolution image for downloading.
Download High Resolution Image
Rule #1: Scan images at 72 ppi when delivering them over the web.
dimension
Thinking about images in terms of inches doesn't really work for the web. Instead, people talk about images using a measurement called "pixels."
While working with graphics, define the image size in terms of the number of pixels. To make the jump from inches-based measurement to pixel-based measurement, look at the table below (based on 72 ppi images).
| Inches | Pixels |
| 1 inch | 72 pixels |
| 2 inches | 144 pixels |
| 3 inches | 216 pixels |
| 4 inches | 288 pixels |
| 5 inches | 360 pixels |
Remember that the default web page is around 600 pixels wide. Create graphics that fit inside that space. Users don't want to have to scroll to see the rest of an image. Also, remember that an image 600 pixels wide is probably pretty HUGE and will take a long time to download. Think about the need for such a large file carefully.
Rule #2: Try to keep images under 600 pixels wide.
bit depth
Bit depth is a term which essentially describes the amount of colors in a picture. (Note: The ability to control bit depth is only possible when exporting images to .gif and .png formats.) There is a close relationship between the amount of colors in an image and the size of the file. In the table below, the relationship between the number of colors and size of the file is spelled out. Even though each picture has the same number of pixels, each additional color increases the amount of memory required to display the image. Why? To display the 1 bit image, the computer needs to remember two things: black and white. To display the 5 bit image, the computer has to remember 32 different things. It just takes more memory.
1 bit |
2 bit |
3 bit |
4 bit |
5 bit |
 |
 |
 |
 |
 |
| 2 colors |
4 colors |
8 colors |
16 colors |
32 colors |
| 396 bytes | 525 bytes | 589 bytes | 738 bytes | 992 bytes |
Figure 3a. Bit Depth
Bit depth is also important because it can effect the quality of an image. An image which originally has 128 colors may look bad if reduced to 16 colors. When working with bit depth, try to reduce the number of colors while maintaining the original quality.
GIF - 8 Bit - 256 Colors -- 29K |
PNG - 8 Bit - 256 Colors - 26K  |
GIF - 6 Bit - 64 Colors -- 21K |
PNG - 6 Bit - 64 Colors - 18K |
GIF - 4 Bit - 16 Colors -- 13K |
PNG - 4 BIT - 16 Colors - 11K  |
GIF - 2 Bit - 4 Colors -- 6K |
PNG - 2 Bit - 4 Colors - 5K  |
GIF - User Locked 9 Colors - 8K |
PNG - User Locked 9 Colors - 6K  |
Figure 3b. Bit Depth
Rule #3: Reduce images to include the smallest amount of colors possible.
palettes
After determining the number of colors necessary for an image, determine which colors should be used. Palettes are sets of colors the computer uses when saving an image to a GIF format. There are several different types:
- Adaptive: created by sampling colors from more commonly used areas of the image's color spectrum.
- WebSnap Adaptive - an adaptive palette in which colors are converted to the closest browser safe color.
- Web 216: created using a standard 216 palette to ensure common appearance between platforms.
For the most part, try to stay with the Web palette. This will ensure that images will look the same on both Mac and PC platforms.
Rule #4: Try to use the Web palette when saving images for the web.
file formats
Determining which format to use when saving an image is not as simple a task as it may seem. An understanding of the differences between the formats is needed in order to choose the one that will provide the best results. There are three web-ready formats to discuss.
gif
GIF format is used primarily with logos, banners, buttons and icons. GIF formats are limited to 8 bit colors (256 colors) or less. GIF supports indexed-color graphics only. GIF format supports transparency and animation. GIF format uses a lossless compression technique which compresses without removing detail and is most useful in compressing images that contain large areas of the same color. GIF controls compression by setting the bit depth of an image and color palette to be used.
jpeg
JPEG format is used primarily with photographs and images which require 24 bit color (millions of colors). JPEG files do not support transparency or animation. JPEG uses a lossy compression technique which compresses by removing detail and is most useful with continuous-tone images. JPEG controls compression using a quality setting. The lower the quality, the more data is thrown away.
png
PNG (Portable Network Graphics) is a losslessly compressed bitmap image format. PNG was created to both improve upon and replace the GIF format with an image file format that does not require a patent license to use. PNG supports 24 bit truecolor and supports transparency - both normal and alpha channel.
compression
PNG uses a non-patented lossless compression method known as deflation. This method predicts the color of each pixel based on the colors of previous pixels and subtracts the predicted color of the pixel from the actual color.
png v. jpeg
- JPEG will produce a smaller file than PNG for photographic since it uses a lossy compression designed for photographs. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5-10 times) with negligible gain in quality.
- PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions that do not transform well into the frequency domain. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions.
- JPEG is a poor choice for storing images that may need to be edited further as it suffers from generation loss issues, whereas PNG is a lossless file format and is therefore better suited to storage and recovery of images that are likely to be further edited.
png v. gif
- PNG can achieve greater compression than GIF, particularly when using PNG 8 export. Using PNG 24 and PNG 36 settings will result in much large file size than GIF images becasue they include larger number of colors.
- PNG allows for multicolor (PNG 8) , single color and alpha-channel transparency (PNG 36), although such transparency is not supported across all browsers at this time.
- PNG gives a much wider range of color depths than GIF - 24 bit truecolor.
- PNG does not support animations, while GIF does.
- PNG images are not as widely supported as GIF images.
selection a format
While it is helpful to understand the basic differences between formats, technology has steped in to help with the decision. Application like Fireworks and ImageReady allow an image to be previewed with the multiple export setting applied. Choose the format that provides the more accetable quality with the lowest file size.
format comparison
| Format | GIF | JPEG | PNG |
| Color Depth | 8 bit maximum | 24 bit color | 24 bit truecolor |
| Compression | lossless; compresses solid areas of color | lossy; compresses subtle color transitions | lossless: deflation method |
| Transparency | Yes | No | Yes - normal and alpha channel |
| Advantages | lossless compression transparency support |
quality control
in compression good compression on photograph |
lossless, supports more colors, creates smaller files, and supports transparency |
| Disadvantages | only 256 colors bad gradient support |
no transparency loss of quality in compression |
not supported as widely |
Rule 5: Choose the file format which maintains the most acceptable quality for the image with the smallest file size.
slicing graphics
In the exercises, we are introduced to a technique called "slicing". Slicing is a technique in which areas of one graphic are defined and upon exporting, multiple files are created.
slicing and buttons
We are first introduced to slicing when a button is created and placed on the canvas. Because a button has two states (up and over), two graphics are created upon export. When a button is added to the canvas, a slice is created to define the size of that graphic. The size of the slice for a button is defined by the active area of the button. If a button has an active area of 20 pixels high and 150 pixels wide, the slice area is 20 X 150 pixels. Each button added to the page will have a sliced area defined. When the file is exported, only the sliced areas are exported. This is why the remaining graphical elements need to have sliced areas defined.
The graphic below shows how the file site.png will be exported based on the defined sliced regions.
slicing and optimizing
Another use for slicing is when an image has various types of graphical content. In the example below, this is a graphic with solid colors, gradient fills, and photographs. If one were to export as one graphic, the results would be:
The file size of this one graphic is 44k.
If this graphic were exported using slicing, the results would be:
 |
||||||
|
This file is actually exported into 5 graphics and the total size is 26K.
These pictures are held together using an table. To demonstrate the use of tables, borders have been increased. Ordinarily, no table borders would appear, as shown below:
|
||||||
|