5.2.3 Optimizing Images

Some General Remarks

Images - in the form of pictures (photographs, "paintings"), graphics (drawings and text) and mixtures (e.g. a newspaperarticle containing text and pictures) are the life blood of HTML documents. They should be inserted with the outmost clarity - and little memory space
Where do images come from? There are some typical sources
They were generated in a digital format - with a graphic program (vector - or pixel based), by a digital camera, from an electron microscope, or just downloaded from the Net.
They exist as analog document - newspaper articles, photographs, print-outs, paper copies. Then you must first convert them to a digital format by running them through a scanner.
In any case, what you now have is an image that is usually not ready to be incorporated in your HTML or Word document. You must now optimize it, and that often means doing three different things:
1. You must change the size. If it is too large, you must make it smaller without loss of essentials which, after all, are there. This also includes just taking parts of the original. The other case, making an image bigger, is rare and hopeless because there is no way to produce resolution that is not there in the original.
2. You might improve its appearance - make it darker or brighter, black-and-and.white instead of color (again, the other way around is not possible), enhance the contrast, and so on.
3. You might add something or take out something. Some lettering, or an insert from another picture - you may even want to make a composite consisting of several images with some additional lettering and graphics.
This is not easy and there is not a single unique way of doing it - it is, after all, a matter of taste if you like pictures to be a bit bright or rather darkish. There are, however, some tricks and some good advice which we will now explore.
 

Clearing up Graphics

The following image shows parts of a typical scan from a newspaper:
 
Typical scan from a newspaper
 
There is text and a color picture (in newspaper quality), and you can see (faintly) what is written on the backside. What you can do quickly produces a quality like this:
 
Otpimized scan from newspaper
 
Certainly better, but still not extremely good - and the whole thing would still be far too large. Well, the best I can do quickly in total looks like this
 
Complete newspaper scan

Now lets go step by step.
First we clear up the image. In this case it is sufficient just to use the "Farben", "Justieren" and "Highlights - Mitteltöne,..." function. Set "Highlights" to something like 90% and the background is now white with the faint stuff from the newspaper backside gone.
Now reduce the size - always in steps of integers if possible, If you reduce the size linearly by a factor of 2, four pixels of the original will be converted to 1 pixel, and the program simply sets the color and brightness values of this pixel to the average of the four original ones. You can help the program by first selecting "Bild", Normalfilter" and "Weichzeichnen". Then you reduce the size and try "Bild", Normalfilter" and "Schärfen". This way you keep hard contrast better, in particular embedded text.
What is better: First clearing up the image, and than reducing its size, or the other way around.
Well - try it. Here is what you get (always with identical settings)
 
First cleared, then reduced Reduced first, than cleared
Cleared first, then reduced Reduced first, than cleared
 
While the result is unambiguous, there remains some doubt: Maybe, with different settings, the second way would be better than the first?
Who knows! Still, if you think about it, the size reduction always reduces information by averaging what is found in four pixels. If there is a lot of garbage in the four pixels, the average will be noisier, too, and clearing the image should be somewhat harder. So don't worry - always first process you original and then reduce the size.
So accept as a general rule:
Always do the operation that reduces the information content of an image last!
Changing contrast etc. does not reduce the information content, it just changes it. Reducing the size, or storing it in a .gif, .jpg, and so on format, does!
 

Background Options for Gif Formats

Some image formats, especially "gif", allow to manipulate the background color.
This is essentially a consequence of the data compression technique, where only a limited number of colors - the palette - is used.
The palette, however, is not fixed, but calculated for each image for optimum color fidelity. A picture of a landscape, e.g. may contain several shades of green in the palette, while portraits will expand the red and yellow hues.
The colors used for a palette are numbered internally and you can find the color number in the following way:
Load a Gif image in Paint Shop Pro and click on the "pipette" symbol ("Farbauswahl") Pipette icon. Move it on any color in your image and watch the color menu on the right hand side. Below the listing for Red, Green and Blue, an "I" with a number will appear - this is the internal number for the color you picked.
You now can manipulate one of the colors contained in the image - usually the background color - when you save the picture, e.g., by making this color transparent. This means that the chosen color will not appear in the context of the setting for the picture, but that the background color of the master document into which the picture may be embedded will be seen instead.
This applies directly to .gif pictures embedded in a HTML document. Paint Shop Pro offers four choices how this can be done:
When you click on "save" (Sichern als"), you have can open a menu "options" ("Options"). Click on it (and don't forget to save it as ".gif"). There are four choices:
"Beibehalten der Transparenz-Information der Datei" ("Keep the transparency information of the file"). This means that if the picture already has some setting for the transparency of one color, this setting will be kept.
"Keine Transparenz-Information speichern" (Do not safe any transparency information). This means that nothing will be transparent after you safe the picture.
"Setzen des Transparenzwertes für die Hintergrundfarbe" (Make the background color transparent). If you chose this option, the background color (as determined by Paint Shop Pro) will be the color that becomes transparent.
"Setzen des Transparenzwertes im Paletteneintrag" (Make the chosen color transparent) - with a choice of a number via a menu. To use this, you first have to find the number of the color you want to be transparent with the "pipette" (Farbauswahl). Then you indicate that number in the menu; it will be transparent after saving the picture.
Try it with some pictures. Use a photography and a drawing and see how Paint Shop pro will determine the background color
 

With frame Back Forward as PDF

© H. Föll (Matwis Seminar)