Optimizing Art for the Internet

Why should you optimize your art for the internet? Find the answer below, as well as tips on how to streamline your scanned and/or digitized images for use on your web site. A few of these tips are geared towards Adobe Photoshop users, and these have been marked with "PS only".

Contents:

• Why optimize your art for the internet?
• Important basics to keep in mind when you are starting.
• Design images to scale.
• All web images should be 72 dpi (dots per inch).
• Setting preferences properly in Photoshop (PS only).
• Getting an accurate measurement of image file size (for estimating total web page size).
• Accurate measurement of image file size and Photoshop (PS only).
• Don't use drop shadows and gradations on your artwork.
• The general rule regarding JPEG vs. GIF.
• The web-safe color palette.
• Getting the smallest GIF file size (PS only).
• Transparent GIF's (PS only, some others similar).
• Getting the smallest JPEG file size.

Why optimize your art for the internet?
If you optimize your art, your pages will download much faster, and your visitors will be happy.

One of the chronic complaints of web site visitors is that web pages sometimes download very slowly. Artwork and photographs probably contribute the most to this particular problem. Studies have shown that a page must load in 20 seconds or less, or the visitor gets bored and goes elsewhere, probably never to return. This issue is especially critical for visitors with low end modems - and unfortunately there are plenty of such modems still in use.
[back to contents]

Optimizing Artwork, Important Basics:

1. Always save the original image separately for the inevitable later modification.
2. Start your images in the RGB format (Red Green Blue, as opposed to CMYK). [RGB is the default setting of many image programs.]
3. Convert images at the last minute to JPEG (JPG) or GIF.
4. JPEG - best file type for photographs.
5. GIF - best file type for flat color art.
   [back to contents]

All web images should be 72 dpi, period.
(The ONLY exception is when you need to put images up deliberately for download by your users, and your users must have high resolution pictures accessible through the web. This is a rare instance, and it involves making your users wait obnoxious amounts of time just to view the image, and further obscene amounts of time to download the image. Bottom line: Find another way to provide high-res images to your users.)
[back to contents]

Setting preferences properly in Photoshop (PS only): When designing web images in Photoshop 4(+), change the following setting in your preferences...

1. Under File: Preferences: Saving Files, set Image Previews to "Never Save", or at least to "Ask When Saving."
2. Then when saving your web image, DO NOT save an Icon, Thumbnail, or Full Size Image Preview.
3. In Photoshop 5(+), Under File: Color Settings: RGB Setup, select anything but "sRGB" - whatever else is appropriate (I chose "monitor").

The RGB setting of "sRGB" is an advanced color setting. Using it when creating web graphics will shift the color of your images - something you want to avoid! Additionally, saving an image preview merely adds "weight" to the file size, which inflates the image file size estimate. This information is stripped off when a web page accesses the file anyway, and it's more important to get an accurate file size than it is to see a preview of the image. And speaking of file size estimates...
[back to contents]

Getting an accurate measurement of image file size (for estimating total web page size):
You want to know the image file sizes because you want to know how long your web page will take to download.

On a PC: Right click ONCE on the file. Select "Properties" from the menu that appears. The size is listed in the window that appears.

On a Macintosh: Select the file (click on it ONCE) and under the "File" menu, select "Get Info". In the window that appears is "Size:" and two numbers. The number in the parentheses is the accurate file size (which can vary widely from the "on disk" number). If you ever want to bother me about the reason for the difference, go ahead, but it won't be pretty.
[back to contents]

Accurate measurement of image file size and Photoshop (PS only): The file size will be accurate for a Photoshop created image IF you've set the Photoshop preferences the way I suggested earlier. Otherwise, the file size includes preview data, and is inaccurate for web file size estimation.
[back to contents]

Don't use drop shadows and gradations on your artwork.
Both tend to look ugly on low-end monitors at 256 colors, the standard settings of most computers out of the box.

1. Try to avoid drop shadows, especially ones with large shadow diffusions. When they are necessary, keep the drop shadows small (1 or 2 pixels out), and either don't blur the edge or blur just a tiny bit.
   
   Creating text or images with drop shadows that will be floating over a colored webpage background are another special case altogether. Have you ever seen an image with an unattractive white "halo" around it? That's because the image was made on a white background, then the background was made transparent, and finally placed on a colored page. In the process the "edge" of the image picked up some "white influenced" pixels around it, hence the halo.
   
   If you've got shadows you intend to float over a color, make the image with the target color in the background. You can then make the background transparent as you produce the gif, and the shadow will look more natural.

2. Gradations are a big no-no on the web, particularly subtle ones. They band like crazy on low-res screens and look REALLY ugly. Avoid them if at all possible.
   [back to contents]

The general rule regarding JPEG vs. GIF is this:

1. Use JPEGs for photo-like images with lots of colors and subtle color shifts (like gradations).
2. Use GIFs for flat color images and line art. In most cases this will result in better looking images with smaller file sizes (but for really small photo-like images, use GIF instead of JPEG).
   [back to contents]

The web-safe color palette: When designing flat color art, start with the web palette! This palette contains the web safe 216 colors which work on both PC's and Mac's. You'll want to use it because if you're designing flat color art and don't choose a web-safe color, the art may "dither" (get a spotty blend of colors) and look very different from what you intended. Very important, and useful for avoiding headaches later.

If you need the web safe palette (some programs have it already), you can get it various places (try "bclut2.aco" at www.lynda.com). Another good palette resource is here. It gives you the RGB and Hex values for any web safe color you choose.
[back to contents]

Getting the smallest GIF file size (PS only): If you're using photoshop, this is an important quick trick to get the smallest GIF file size (reducing it to the smallest palette):

1. Start with RGB.
2. Under Image:Mode change the mode to Indexed Color.
3. In the window that appears, select the Web palette (216 colors).
4. Under Image:Mode change the mode back to RGB.
5. Again, under Image:Mode change the mode to Indexed Color.
6. In the window that appears, select the Exact palette.
7. Under File: Export choose GIF89a.
8. Choose Save (or Okay, or whatever it says).
   [back to contents]

Transparent GIF's (PS only, but other software may be similar): If you want to create a transparent color in the GIF, use the eyedropper tool in the GIF89a window to select ONE target transparent color before saving. Also, if you want to batch process a bunch of GIFs with the same colors, create an "action" to do most of it for you. I won't get into actions here (look at Photoshop help or your manual), but this can be a tremendous time saver when processing a large number (or even a small number) of images from RGB to GIF.
[back to contents]

Getting the smallest JPEG file size: When saving JPEGs, choose 1, 2 or 3 (or "low") as your compression quality. Keeping the compression low slightly erodes the quality of your images, but also greatly saves in file size. Two or three "k" (kilobytes) can make a big difference! Start saving your images at the lowest quality and work up from there, until something looks good enough for you.

If you're given either of the following options, follow the recommended instruction: turn off "save paths" and choose "baseline standard." "Baseline Progressive" creates JPEGs that are interlaced like GIFs, but not all major browsers support progressive JPEGs.
[back to contents]

Well, that's it for now. If you think of something else about optimizing graphics you want to know, let us know.