Off topic/photos to web graphics

[Paul Schliesser <paulsc@eos.net>]

> Save your continuous tone images (photos) as JPEG for your Web pages. 
>JPEGs can look better than GIFs, which are limited to 256 colors. JPEGs 
>will be displayed at the user's monitor's bit depth, up to 24-bit color 
>(millions of colors), while GIFs are only displayed at up to 8-bit color 
>(256 colors). JPEG at "Medium" quality =8B this give a small file size, =
with 
>plenty of quality for viewing on a monitor. GIFs tend to get loaded onto 
>the page a bit faster even though the JPEG'd image can be a smaller file 
>size, but the time is negligible.
> If you'd like to display a large, screen-filling image, consider making 
>it a link from a smaller version of the same image.
>
> Use Unsharp Mask to sharpen your online photos. I use 80%, Radius 1.0, 
>Threshold 0 for the photos on our site. They might even be able to be 
>sharpened further, but this works well for the size image we use.

Jack,

This is a good summary of the way to prepare images for the web.

A couple of notes on unsharp masking:

The threshold setting controls how much contrast there needs to be =
between two values before the software sharpens between them. If you =
want to emphasize the textures in a picture, use a lower setting =
(smaller number). The just plain "Sharpen" filter also seems to work =
well for the same thing. If you want only some sharpening, like if =
you don't want to overemphasize the texture of someone's skin, set =
the threshold to a higher number, so that areas of lower contrast are =
not sharpened. This can help avoid wirey-looking hair and grainy, =
embossed-looking textures, which are common problems with =
over-sharpened images. Sometimes it is better to run the unsharp mask =
filter twice at a lower setting; this can be a more "delicate" way to =
sharpen a file with a lot of detail.

One thing to keep in mind is that sharpening a photo that will be =
turned into a JPEG will make the file size bigger, because of the =
nature of the compression used. Sharpening also tends to emphasize =
some of the uglier artifacts that you get with JPEG compression. =
Whereever there is an edge with high contrast, you tend to see more =
of that ragged JPEG look.

One other thing that's very important, for those of you starting out =
in web graphics:

NEVER open and resave a JPEG file. Each time you do this, you throw =
away information in the file and the file will get uglier and more =
artificial-looking; it's like Xeroxing a Xerox copy instead of the =
original. What happens with JPEG is that certain pixels in the image =
are picked out a reference pixels, and the surrounding pixels are =
given approximate values relative to these pixels. Then all but the =
reference pixels are thrown away. When you read the JPEG up again, =
these pixels are simulated by using the stored values. The higher the =
compression setting you use, the more pixels you throw away, the more =
you round off the values, and the worse the image will look. The =
tradeoff is that you can get spectacularly small files, as much as =
1/100 the size of the original in extreme cases. ALWAYS save a master =
copy as a TIFF or as a regular Photoshop file. Open that and resave =
out a new JPEG if you need to change it.

If you need to save disk space, you can use the compressed TIFF =
format for your originals. This method of compression doesn't throw =
away any data or degrade the image.

If you are using a Mac, I'd strongly recommend the ProJPEG plug in. =
It is more sophisticated than Photoshop's built-in JPEG support. It =
has a preview window which lets you see the image quality and =
approximate file size, so you can intelligently choose between =
quality and size. It's compression methods are more efficient, and =
you can get much better image quality for the same file size than =
Photoshop alone. In my experience, you also get fewer artifacts than =
you do normally. I always turn on the custom sampling and custom =
compression table options, which help make this possible. You also =
can save JPEGs in an interlaced or progressive format, so that they =
come up as a low resolution image and sharpen on screen, instead of =
building from top-to-bottom as normal ones do. Unlike progressive GIF =
files, these actually load faster than non-interlaced JPEGs.

You can download ProJPEG from Software Unboxed:

http://www.unboxed.com

You will need to call and give a credit card number to the publisher =
and they will give you a code number to unlock your copy. It's about =
$100, if I remember correctly.

Just a note about JPEGs versus GIFs: you should never use JPEG for =
flat-color images, like logos, simple illustrations (especially with =
line work) or for text-type graphics. The GIF format is very =
efficient at compressing these kinds of images, and will do so with =
no degradation of the image at all. Ocassionally, you might find that =
a very "graphic" photo (with a lot of flat areas of color) will be =
smaller as a GIF than as a JPEG. If you try this, use an adaptive =
palette rather than trying to use a browser-safe palette. However, =
GIF is usually very inefficient for things like photos, so use the =
format appropriate to the image you're working on.

Just to be pedantic, both JPEG and GIF compression make the file =
smaller by using different methods to avoid recording each pixel =
individually. GIF compression works by lumping together same-color =
pixels in the same horizontal line. Instead of recording, "pixel 1: =
white; pixel 2: white; etc.," it records, "pixels 1 through 817: =
white." It also stores all of the color values in a palette, then =
refers each pixel to a position in the palette instead of defining =
the value each time it's used. So, if you have very few color changes =
per horizontal line, you can get very big images which are very small =
files, and because it can reconstruct exactly what you had in the =
original, you don't loose anything. In most photos, however, there =
are enough small color changes that a GIF ends up recording each =
pixel individually and the file size bloats accordingly. On the other =
hand, if you use JPEG to compress a flat-color image, not only does =
it make a bigger file than a GIF would, it noticably degrades the =
image, and will tend to make flat areas of color look grainy.

Sorry to rave on so long.

- - Paul