GFF logo









Article Intro
Photo
Digital
Scan
Edit
Save








More
Summary
Calibrate
Programs
Formats
Background








Links
Gallery
Fly pics
Classics




  
First published before January 1st 2001 - More than 7 years ago


From Feathers to Bits

GFF's Guide to Saving Pictures for the Web
From Feathers to Bits

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

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

 

Scaling
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
Compression
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.

Click on the picture to see the whole fly
This is the 1 mb original. Try clicking and increase the compression.
JPEG
file size

320 kb
130 kb
73 kb
34 kb
21 kb
15 kb
Original
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.

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

Click on the picture 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)
Original

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

 

Want to comment this page? Fill out the form below.
Comment
Only comments
in English
are accepted!
Your name Your email

All comments will be screened by the GFF staff before publication.
No HTML, images or links, please - we do not publish such comments...
And only English language comments will be published.
Name and email is optional but recommended.
The email will be shown in a disguised form in the final comment to protect you against spam
You can see other public comments on this page

If you want to submit a private comment, not for publication, use this form

 
Did you find the above interesting?
This other story related to "pictures" might also interest you:

GFF e-cards

You've got mail: A long time ago we had a very popular eCard service on GFF, but due to technical changes we had to shut it down. Now we have a new and better service up and running with plenty beautiful pictures for you to mail off to friends and loved ones on the Internet. Send one yourself from the eCards page.

Click to see other stories with the keyword "pictures"

A few random articles for your entertainment

A Global Fly Fisher Publication
Copyright © 1994 - 2008, Joergensen/Petti/Schweitzer/Skehan
Portions of this site copyright © the contributors. All rights reserved.
This material is for personal use only. Do not distribute without prior written consent from each copyright holder.
Comments and suggestions are welcome