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]

Design your images TO SCALE if at all possible, so

you don't get any surprises when you later reduce the image's dimensions. This

is especially important when you're incorporating text in your images. Reducing

image dimensions after-the-fact may yield unreadable text. In the very least,

the final images should be to scale. Having to stretch or shrink them when creating

web pages can result in ugly images or unnecessarily large file sizes (and longer

download times).

[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.