Published May 1. 2002

Digitizing flies, saving

GFF's Guide to Saving Pictures for the Web

By Martin Joergensen (supported by Steve Schweitzer)

Final compression and using the right format can be as important as taking good photos and scanning them correctly.

Rough - click to see the whole fly
Rough - click to see the whole fly
Fine - click to see the whole fly
Rough - click to see the whole fly
Scale with care. Use an anti alias scheme if available followed by a gentle sharpening. The two above might seem alike, but a magnification will show that there is a difference. The top picture was scaled with no anti alias function. Move the cursor over the pictures to see the difference.


Sizing process
You are now getting closer to the final product. It is about time you scale the picture to its final size. Scaling is also a process that can ruin a lot. No matter how you attack it, it will remove details from your picture and potentially blur it into obscurity.
You want to make sure that your scaling process uses some kind of anti aliasing, interpolation or resampling scheme. This means that clusters of pixels will not only be joined to one average pixel, but there will also be some adjustment of surrounding pixels to make the transitions smoother. This will fight the tendency to form jagged edges, but will also introduce some additional blur to the picture.
After scaling you will want to use a sharpening filter again to remove the blur introduced by the scaling. This time the sharpening can be a little more aggressive, and running the process twice can sometimes be an advantage.
At this point you should have a picture, which is as good as it can be for your purpose. You're ready to save your work.

Final files
These pictures are meant to be used on the web or as attachments to e-mails. This means special demands on file size. You want the files as small as possible to save bandwidth and transmission time, but on the other hand you certainly don't want to loose all the quality you just put in there. No matter what compression method you use and which file format you choose, you will loose quality when compressing.
The solution to this schism is to use the best possible tools and individually tune every single picture. You will also want to monitor every step and preview your pictures in a browser.
You can choose separate programs for the job or you can use plug in filters. But notice that most standard functions in the photo-editing programs are not adequate for the maximum quality and compression. They do the job and generate the files, but don't exploit the formats and techniques to their full extent.

Fine - click to see the whole fly
This is the 1 mb original. Try clicking and increase the compression.
file size

320 kb
130 kb
73 kb
34 kb
21 kb
15 kb
Notice how the first visual change in quality is between 73 and 34 kilobytes.
The file formats
There are basically two formats, which are useful for the web: GIF and JPEG. A rule of thumb is JPEG for photos, GIF for graphics and logos. None of these are particularly good for storing the originals, as they both manipulate the picture with a potential loss of quality, but each has advantages in making small files, which load fast and work in a manner suitable for web use.
JPEG is the one that can make the smallest files, but also the one that can do most damage. The JPEG format can be compressed in different degrees, and if you use too high a compression factor, you will wind up with a very poor picture. JPEG alters the picture and will leave obvious, visible traces in the picture. On the other hand JPEG-compression can do wonders to file size with almost no trace of compression.
The danger of JPEG lies in large areas of almost uniform colors, which can get a strange box-like structure when compressed too hard. A discrete blue background is a good example of such a fragile element. Pictures with more details, hackles, feathers, dubbing, mixed colors will render well with JPEG-compression.
GIF works in a different manner. GIF does not alter the picture as such, only the colors. The maximum number of colors in a GIF picture is 256 - in some cases 216 as we will see later. These colors can be selected from an almost endless scale, but you can only use a limited number. GIF works its magic by this limitation and compressing the picture in a way that does not deteriorate it.

As mentioned GIF works partly by limiting the colors. The color collection used is called a palette. The palette is limited to 256 colors, but by further reducing the number of colors you can compress the picture significantly. Naturally a picture with 64 or even 32 hues has a less chance of representing the content properly, but it is absolutely worth looking into the GIF as an alternative to JPEG.
If you want to make GIF's which come out as good as possible on all systems, you have to fall back to the so called browser safe palette of 216 specific colors. By doing this you severely lessen your chances of showing a perfect picture, but you do enhance your chances of having the picture shown on the user's screen the same way as it is shown on yours. JPEG will do the same, though.
GIF is undoubtedly the best format for logos and graphics, which contain areas of uniform colors, but for fly pictures it is not the greatest file format.

Fine - click to see the whole fly
This is the full color range original. Try clicking and decrease the GIF-format color range. Notice how less colors make the picture more speckled. Perceptual pakettes adjust each color to the optimum while the web palette has 216 fixed colors. Perceptual yeilds better quality, but the web palette guarantees the same results on almost any screen. If you insiste on using GIF, we still recommend the perceptual pallettes.
256 color perceptual (30 kb)
128 color perceptual (25 kb)
64 color perceptual (21 kb)
128 color web (26 kb)

Both GIF and JPEG can be interlaced. Interlacing is a technique by which the picture can be shown in stages - typically three or four - with increasing quality.
When the picture loads, it is shown in a rough version at first, and through a few iterations, it is completed to its full quality.
The purpose of this is to give the user a chance of judging the picture before it is fully loaded. This is no longer as needed as it was in the prehistoric Internet age, but for large pictures it can still be convenient. When you interlace a picture it can sometimes grow a bit.

Save your work
When you are satisfied with the result it is time to save your work. This stage is the refined stage, where the picture is in its optimal quality regarding web use. It is not suitable for anything else than putting on a web site. If you want to store it for future use, work on it again or print it, return to the last saved TIFF-file, where the optimum quality can be found, or work from the original, where all the picture's original details are present.

Log in or register to post comments