Optimizing Your Graphics
Optimizing your graphics reduces the time it takes your page to load into your reader's browser. There are a number of ways you can use an image, maintain its quality, and trim your bandwidthall at the same time.
Tip #1: 72-dpi Is Plenty
If you come from the print world, you probably save your image files at 300 dpi resolutionat the bare minimum. But the web isn't print and the computer screen isn't a printed page, so toss away those habits. The first way to trim file size is to save the file at 72 or 100 dpi. This is more than ample for web viewing.
Tip #2: File to Size
To get the fastest display results, you'll want the image file you insert into your Web page to be the exact height and width you are using in the web page. Don't let your reader's computer have to do the painful resizing calculations.
Oh, and don't go into overkill mode when it comes to display sizeuse images at a height and width that works on your page, not the hugest size you can cram onto a computer monitor. Larger display sizes make larger file sizesand longer download times.
Tip #3: Select the Best Graphic File Format
Different types of graphics work best with different file formats. Here are a few rules of thumb to make your graphics more web-friendly:
- If the image is photo-realistic, use a .jpeg format.
- If it has large areas of solid color, .gif format is best.
- If it's a combination, try both alternatives and see which gives you the best fit in terms of size vs. quality.
JPEG format was created for photorealistic images, images that have a great many variations of color. Its compression technology analyzes the pixels and drops out some of them in order to simplify and reduce the file size. JPEG images are 24-bit color; you won't need to select a palette type for them.
The Quality Setting option in Photoshop gives you several ways to save a .jpg formatted file. You can select "poor", "medium", or "highest". The highest setting gives you the most quality, but also the largest file size. We've found that medium is usually fine for most images destined to be viewed on a computer screen. However, avoid the poor setting. It does produces the smallest file, but the final images loses too much quality.
GIF format was uses something called the LZW compression algorithm. This process looks at the pixels in a row and counts how many are the same color. Instead of mapping each individual pixel, it converts the pixel information into a mathematical notation, dramatically reducing file sizes for graphics that contain large amounts of the same color.
The GIF format saves color in a maximum of 8-bit mode, which means a GIF file can contain only 256 different colors. When you save a GIF file, you are asked to select the palette to use when mapping and displaying the colors.
When creating a .gif file, your final image size and quality are determined by how intelligently you make your indexed conversion choices. Indexed conversion is the process of changing the image from 24-bit color into a indexed palette, which is the table of colors used by GIF images.
With indexed conversion, the first thing to worry about is the image's bit depth. This determines how many colors are used in your final image as well as how much storage and display space the file's color index uses. Play with this setting using the undo feature of Photoshop to determine the lowest number of colors you can use with without sacrificing image quality. We find that most images can be easily brought down to six or seven bits.
The next important factor is the type of palette you use. Ok, we'll admit that we're image snobs. We are looking at the web on truecolor displays and therefore want as accurate a color representation as possible. An adaptive color palette seems to work best for us. This give the greatest possible final image across the widest range of platforms. Other palette choices are not are flexible across platforms. Other people advocate using the web palette, which is the set of colors all platforms can display.
Your next decision is whether or not to use dithering. Dithering is a way of simulating a color by using alternating pixels of different colors. For example, dithering might simulate purple by putting a blue and red pixel next to each other. Dithering makes a smoother image, with fewer color bands. Experiment with either diffusion dithering or none to determine which works best with your particular image. Remember, though, that dithering increases file size.
There is no single solution for all images. The best way to learn how to balance file size and image quality is to play with your images in PhotoShop (or in whichever image editing program you use); try saving them in different ways and compare the results. By doing this, you'll start to get a feel for which combinations work for your set of images.
Here are some sample images showing different file types and final sizes.
Tip #4: Reality Check
One more important factor for designers, especially, to remember is that your eye is much more critical of your final product than your reader's is. Sometimes you can spend too much time trying to make things absolutely perfect. Try to find the best compromise of quality versus file size.