Guide to Image Processing

From DPWiki
Jump to: navigation, search

You may be looking for information on image preparation for projects. See Page scans.

This tutorial explains how to deal with images when making HTML versions of DP texts. It provides both step-by-step instructions for processing images, and a broader discussion of issues in image processing, such as image processing software, file size and image formats. The purpose of the tutorial is to help new post-processors generate HTML e-texts, and to collect up all the bits of wisdom the DP image mavens have posted in the forums.

The examples in this tutorial use The Gimp and Photoshop Elements. All full-featured image editing programs have tools similar to the ones described in the examples. If you're looking for a quick and easy "Getting Started" guide, see below Quickstart with IrfanView. IrfanView is a free, simple image-processing program.

Contents

Before you start

  • Clean your screen. Otherwise you'll waste time using your image software's correction tools trying to correct image flaws that are, in fact, gunk on the monitor surface.
  • Check your monitor calibration. This ensures that your monitor displays "true" representations of black, white and color. [1] [2]
  • For information on cover preparation, please read PP_guide_to_cover_pages.


The Image Life-Cycle

Scanning

When a book is scanned, each page is scanned at a low resolution that is sufficient for proofreading. ("Resolution" refers to the density of pixels within an image. It is measured in dots per inch (DPI).) In addition to the low-resolution scans, high resolution scans are made of the pages containing images (illustrations, maps, photographs, etc). When you download a PP package, there's a separate link for downloading the book's images. Because the images are scanned at a high resolution, the image files are large; consequently, the zip file containing all the images can be very large (50 MBs and more) if the book has a lot of images.

Scanning is beyond the scope of this tutorial; however, these threads are useful: How much to compress in-line and linked images? and Picture scanning FAQ. Content Providers may also refer to Wiki article Image cleanup.

Post-Processing

When the HTML version of a book is created, the scanned images from the book are altered to make them suitable for display within an HTML page. These alterations include:

  • Fixing damage and scanning artifacts: removing the page texture, fixing page creases and stains, straightening the image layout, etc.
  • Optimizing for display on a computer: sharpening the image, enhancing image contrast, cropping erroneous areas from the image, etc.
  • Resizing and saving: reducing the image size, compressing and saving the image in a format suitable for the image type.


Distribution

Project Gutenberg imposes file size limitations on images that accompany books. This ensures:

  • that the page does not take too long to load when the book is read on-line (which is largely determined by the size of the images)
  • that the image is of an appropriate size for the page (determined by the image dimensions)
  • that the size of the archive file that contains the book is of a reasonable size for downloading (which is largely determined by the image file size)

Because of these size limitations, the biggest challenge of image processing is reducing image file size without sacrificing image quality. This is discussed in detail in "Exporting to the Final Output Format". File size recommendations are described in "Exporting to the Final Output Format".

Image Processing Software

Any image editing software with a reasonable set of features can be used for processing images. Popular editors include:

  • IrfanView: free; crops, scales, and converts but has only limited enhancement tools. Useful for batch processing, for example converting a batch of images to .jpg format or creating thumbnails from a batch of images.
  • XnView: free; crops, scales, converts, etc. - the same feature set as IrfanView, and appropriate for the same uses.
  • The GIMP [3]: free, open-source, full-featured image editor with scripting capabilities; Windows, Mac OS/X, Unix. (If you tried an earlier version of The Gimp and were disappointed, give it another try - 2.x is really good.)
  • Adobe Photoshop Elements: mini-Photoshop, $100, Windows and Mac.
  • Jasc Paintshop Pro: full-featured image editor, $100, Windows.
  • Adobe Photoshop: the industry-standard behemoth; $500+. Windows and Mac.
  • GraphicConverter: a very capable image editor, strong batch processing functions; $39.95. Mac.

Quickstart with IrfanView

IrfanView is a simple, free image-editing program. While it lacks the sophisticated image filtering and manipulation capabilities of full-featured image editors, many PPers find it sufficient for most image-processing tasks. To process images using IrfanView:

  1. Open a copy of the original image. If necessary, use the "-" key until you can see the entire image.
  2. Is the image "square" (i.e., parallel with the sides of the workspace)? If not, use Image | Custom Rotation to adjust the angle.
  3. Crop the image. Select Edit | Create custom selection, specify some dimensions (don't worry if they're incorrect), click ok, then drag the edges of the box to the desired position. Select Edit | Crop Selection.
  4. Display image at full size. (View | Display options | Fit window to image)
  5. Is the image "pixelated" (i.e., do areas of the image appear as visible dots)? If so, Image | Effects | Blur. Repeat the blur operation until the pixelation is smoothed out.
  6. Is the image dark and dingy? To brighten, use Image | Enhance Colors and adjust the Brightness and Contrast. Use these with care; it is very easy to overdo contrast enhancement.
  7. Scale the image. Use Image | Resize/Resample and specify the new display dimensions. (See "Scaling the Image Display Dimensions" for more information.)
  8. Save the image to a format appropriate to the image type: .png for black-and-white line drawings, .jpg for photographs and grayscale images. If you're saving as .jpg, set "Save as grayscale", and experiment with the "Save quality". A higher quality results in a bigger file size but a better display quality (and vice versa). Experiment to find the lowest quality setting before the image quality starts degrading. If you're saving as .png, set the compression level to "9".
  9. Is the image file size too big? (See "Image Display Dimensions: General Guidelines" for information about file size.) If so, try reducing the number of colors (Image | Decrease Color Depth). Experiment with different settings; the goal is to get the fewest number of colors before the image starts degrading.

Processing Images

Every image filtering operation loses information. Therefore:

  • Always work on a copy of the image, not the original, so that you can revert to the high-quality original at any time.
  • Use the least number of filters that will do the job. For example, don't sharpen twice (unless you really know what you're doing and each application is meant to do something different). Play with the filter until you can get it right the first time. Undo is your friend.
  • Be conservative. Unless you're sure you're making an improvement with an effect, back off a little on the filter or consider doing without.

Open and Prep the Image

  • Open an image in the image editing program. Because the original images are large, the image will probably be opened at a reduced magnification, and may therefore look weird. Don't worry about that now.
  • Adobe PhotoShop and Photoshop Elements: Convert grayscale images from "Indexed Color" to "Grayscale"; select Image | Mode | Grayscale.
  • Save the image in your image editing program's "working" format. (For example, The Gimp's format is ".xcf".) This will enable some additional functionality in the image editor, and will ensure that the original image is preserved as a back-up.

Rotate and Crop

First, if the image is sideways or upside-down, rotate it until it's right-side up. In The Gimp, select Image | Transform, then specify the degree and direction. In Photoshop Elements, use Image | Rotate.

Scanned images are very seldom perfectly "square" (that is, parallel to the top and bottom and left and right borders of, say, a web browser). Fine rotations are usually required. Additionally, the superfluous whitespace around the image should be cropped. If the required rotation is very slight, you may be able to skip the rotation and just crop the image (because the crop is always perfectly "square").

The captions should usually be cropped out and supplied via HTML. However, if the captions stylistically contribute to the image, keep them. The caption should be available in text form even then.

Rotate and Crop with The Gimp

Fine Rotation Adjustments

To rotate an image, first turn on the grid (View | Show Grid). (To adjust the grid display characteristics, use Image | Configure Grid.) Then, on the main Gimp tool palette, click Rotate the layer or selection, set the direction to Backward, the Interpolation to Cubic, and click Supersampling.

When you click on the image, the Rotate dialog will be displayed. Enter the degree and direction of rotation. Usually only small rotational values, such as ".5" or ".75" are required. Positive values will rotate the grid clockwise; negative values will rotate the grid counter-clockwise.

After rotating, select Image | Flatten Image.

Adjusting the Perspective / Keystone

Often in scanning an image will be distorted so that one side is smaller than the other (usually the side towards the spine). This is corrected with the Gimp's Perspective tool.

  • Open the Perspective tool (Tools | Transform Tools | Perspective) and configure as follows:
  • Transform Direction: Backward
  • Interpolation: Cubic (Best)
  • Supersampling: enabled
  • Click on the image. A grid should appear over the entire image. Carefully manipulate the corners of the grid to match the overall shape of the image. Click "Reset" if your hand slips. When you're satisfied, click "Transform."
  • Is it definitely an improvement? Click undo (CTRL-Z) and compare to the original. Then redo (CTRL-Y) and compare. If you're not satisfied, undo, and try again.
gp_persp_before.jpg   gp_persp_after.jpg 

Sometimes just one part of an image will need perspective correction. It's best to apply this after overall correction.

  • Use the Rectangle Select tool to select the problem area. Generally this will be something like "the entire height of the image, from slightly in from the left to the left edge". This works best to be correcting towards one edge rather than, say, a corner.
  • Select the Perspective tool as above. You'll notice the grid is only in the selected area.
  • Play very, very carefully with the grid to match the image. You probably want to zoom in very close as you do this. Slips of the wrist will make a "seam" where your fixed region meets the rest of the image--this is bad.
  • Click "Transform" when you're satisfied. This creates a "floating selection"--think of it as a piece of paper that you can glue on top of the existing image to fix it.
  • To "glue" down the floating selection, select Layers | Anchor Layer. Does it look right? If not, undo twice--once to undo the anchor, once for the perspective--and try again.
Crop

To crop the image, use the Rectangle Select tool, then click and drag in the image to select the area you want to keep. Select Image | Crop Image to delete the area outside of the rectangle.

Rotate and Crop with Photoshop Elements

In Photoshop Elements, fine rotation and cropping are done in the same step. Select Image | Rotate | Straighten and Crop Image.

Contrast Enhancement

These tools bring out detail in the image that would otherwise be hard to see, and reduce the general effect of darkness and muddiness common to scanned images. There is a temptation to overapply contrast - often an image that looks sharpest at first glance has had the detail destroyed by the process and is actually fatiguing to look at for more than a moment.

In many scanned images, the page tone is slightly off-white, and may show page texture artifacts (a slight "grain"). Bringing the page tone of the raw scan to white almost always gets rid of huge amounts of image information (and thus also reduces the file size) while keeping everything looking nice.

Some methods that can be used with any serious image editing program are described briefly in the Illustration Recipe-book.

Contrast Enhancement with The Gimp

Unsharp Mask

The Unsharp Mask works by blurring the image to find the large-scale structure, and then enhancing everything else (the small-scale structure). Thus the name--it masks out the unsharpness. Once you've found good values for one image in a set, the rest of the images usually respond well to similar values. The Unsharp Mask works well in combination with Gaussian Blur, described in "Blemish Removal".

Select Filter | Enhance | Unsharp Mask and configure as follows:

  • Radius: Radius of the Gaussian blur used. Everything smaller than this will be enhanced, so make this slightly larger than the width of a "sharp line" in the image (values of 5-7 are often good).
  • Amount: Degree of enhancement; .3-.4 is a good range to try.
  • Threshold: Think of this as "what is a real change?" If you find that areas of supposedly solid color start developing structure, increase this value slightly. 0-10 is a good range.

The example below shows a detail from a scanned image, the same detail after Gaussian Blur has been applied, and then the same detail filtered through both Gaussian Blur and the Unsharp Mask.

gp_gausunsharp_orig.jpg   gp_gausunsharp_gaus.jpg    gp_gausunsharp_gaussharp.jpg 
Level Adjustment

Use Layer | Colors | Levels to set the black and white levels of the final image. Be sure you're working with the channel labeled "Value". (If an image is noticeably discolored you can try working with the color channels, but this is easy to mess up). The graph at the top labeled "Input Levels" shows how brightness is distributed through the image. The far left is blackest black; the far right, pure white. The height of the graph at any particular point shows how much of that color is in the image.

Most images, as scanned, live in the grey regime--no pure white, no pure black. So, make the darkest parts black--grab the little black triangle on the left of the graph and slide it right until it's at the point where the graph starts to poke above zero. Then, move the white triangle to the left similarly. See how much better the image is already? You can try adjusting the grey triangle in the middle slightly to set what the mid-level grey is; this changed the "gamma"--the middle value. This value should be near 1 (.9-1.1).

gp_gausunsharp_gaussharp.jpg   gp_levels.jpg   gp_gausunsharp_levels.jpg  
Brightness / Contrast

Layer | Colors | Brightness/Contrast can provide one last tweak-up, especially for color images. For grayscale, it's best to do all your work in the levels dialog.

Contrast Enhancement with Photoshop Elements

Unsharp Mask

Every scanned image can benefit from some sharpening, but too much sharpening leaves obvious artifacts in the picture. Use Filter | Sharpen | Unsharp Mask.

Long articles have been written about the Unsharp Mask dialog (to read some, type "unsharp mask tutorial" into Google). It offers a near-infinite range of twiddles. Start with the values shown. Increasing either Amount or Radius will increase the effect. Click the Preview button on and off to observe the effect. Look at dark edges against light backgrounds; you are sharpening too much when any sort of halo appears there.

pe_sharp.png 
Levels

Scanners rarely produce pictures with a full range of black to white. Use Enhance | Adjust Lighting | Levels to open the Levels dialog.

pe_levels.png 

Slide the left, black triangle rightward until it is just clear of the leftmost value in the histogram (as shown). This makes the darkest values in the picture render as black. If the right, white triangle is not already next to picture values (as above), slide it to the left until it almost touches the histogram. This causes the lightest values in the picture to render as pure white. Click the Preview button on and off to observe the effect on the picture. If the darkest values ought not to be black or the lightest ones, white (e.g., a picture of a gray cat on a gray pillow?) back the triangles out again. When the range of dark to light values is appropriate and pleasing, click OK.

Shadows / Highlights

When the picture has areas of very dark matter, you can probably create the impression of more detail with a shadows adjustment. Use Enhance | Adjust Lighting | Shadows/Highlights.

pe_shads.png 

Set the top slider to a small value, 5% to 15% at most. Set the other sliders to zero. Click the Preview button on and off while observing the effect on the darkest areas of the picture. If more detail is brought out, click OK; otherwise click Cancel.

Blemish Removal

In this step, flaws in the original image (such as stains, creases and page discoloration due to age) are repaired. Grayscale images in books are printed using a "halftone screen" -- a regular array of dots of different sizes. (Yes, just like the pixels on your monitor -- you can see them if you look very closely at a newspaper photo.) The scanner that scans a book also scans a regular array of pixels. What happens if the scanner's grid doesn't align exactly to the halftone grid? Some scanner pixels center on halftone dots and some pixels fall between dots. The result is a moire pattern -- the same effect you get if you hold two pieces of gauzy material up to the light.

The moire pattern is irritating, but sometimes it is almost impossible to remove completely. Gaussian blur may greatly improve the picture. But you have to balance the bad effect of moire against the bad effect of blurring out useful details from the image.

Blemish Removal and The Gimp

The Clone Tool

This tool is useful for fixing page creases, spots, etc, both in areas where there is variable tone and texture and in areas of a solid single color. In the detail below, the crease area on the left has been repaired; the area on the right has not.

gp_paint_from_region.jpg 

The clone brush settings used above were:

  • Opacity = 75, so that the painted dots blend in with the surrounding area.
  • Mode = Normal, to mimic the selected area.
  • Brush = <variable>, set according to the size of the area that is being corrected.
  • Source = Image Source, in order to select the area to be copied from an area of the image.

When the clone tool is first activated, select the area from which to copy by holding down the Ctrl key while clicking the desired area. Then click on the area you want to repair.

Copying an Area from the Image

This technique is useful if there are areas of the image containing similar patterns and colors. In this detail from a map, the blotched section of the wavy lines representing water were corrected by copying another section of water and pasting it over the blotched section.

Use the Rectangular Region selection tool to select a "good" area of the region. Copy the selected region to the clipboard (Edit | Copy or Ctrl+C), then unselect the region by clicking outside of the image. Select Edit | Paste or Ctrl+V to paste the selected area onto the image, then click and drag it to the desired position.

gp_cpyregion_before.jpg   gp_cpyregion_after.jpg
Gaussian Blur

This filter is useful if you have a lot of small-scale "noise" in the image. Roughly speaking, any detail smaller than a circle of the provided radius will be wiped out. IIR and RLE give the same results, but IIR is usually faster on images that we're interested in. Only small adjustments are used; in the example below, the blur radius was "2". This tool works well in conjunction with the Unsharp Mask, described in the "Contrast Enhancement" section.

gp_gauss_before.jpg   gp_gauss_after.jpg 

When using tools from the Filters menu, set the image zoom to 100%, expand the preview window so that a sizeable section of the image is displayed, and then position the preview window so you can see the same portion of the image in the preview window and in the original window. As you experiment with the values in the Preview window, you can compare the output to the original image. Liberally use undo/redo until you get the settings right.

Blemish Removal and Photoshop Elements

Photoshop Elements has three main tools for this. All are in the toolbar. All use a "brush" or circular cursor that you click on the picture to change it. It is easy to make the brush larger or smaller: hit the "[" key for a smaller brush and the "]" key for a larger one.

The Blur Tool

The simplest repair tool is the Blur tool. It is ideal for getting rid of small black freckles. Here, one click of the blur tool on the black freckle in the bottom center of the left picture reduced it to the gray freckle on the right. Click and hold on the defect to have a greater effect.

pe_blur_a.png   pe_blur_b.png 


The Healing Brush

The most magical tool is the Healing Brush (not the Spot Healing Brush). It is perfect for repairing any defect in an area of uniform texture such as a floor, sky, or fabric. Option-click (PC: alt-click) on a texture similar to the damaged texture. Then click or drag on the defect.

pe_blur_b.png   pe_blur_c.png 

One quick drag of Healing Brush cured the above white defect. The healing brush is amazing; you will constantly find yourself saying "wow!" at how it works.

The Clone Stamp

The Healing Brush does not work well near areas with strong edges and lines (although you can try it). For repairs of detailed areas you use the Clone Stamp. Option-click (PC: alt-click) on a bit of identical image. Then paint over the defect. What you paint is an exact copy of the source pixels. If they align correctly they make a seamless repair.

pe_clone_a.png   pe_clone_b.png 

For this repair, I option-clicked centered on the vertical groove, the width of the defect below the defect. Then I painted upward over the defect. If the result is not perfect, immediately hit cmd-z (PC: ctl-z) to undo it. With a little practice you will make undetectable fixes in detailed areas.

Gaussian Blur

Gaussian Blur (described above) is accessible in Photoshop elements under the Filters menu.

Scaling the Image Display Dimensions

"Scaling" reduces the display dimensions of the image to a size suitable for display in a web browser. High-resolution scans have huge display dimensions: this is because scanning is done at a large number of dots per inch. The relevant monitor values are monitor dimensions (i.e., 800x600 pixels, 1024x768 pixels, etc) and the monitor's "resolution" - the number of dots per inch it displays (90-100 pixels per inch). So, if an image on a page measures 6x6 inches and is scanned at 300 DPI, the image size becomes 1800x1800 pixels. Displayed on a monitor with a dimension of 1024x768 and a resolution of 96 DPI, the relative display size is more math than I want to do on a Saturday morning.

The dimensions of the image also affect the image's file size: the larger the dimensions, the bigger the file.

Generally, two versions of each image are made. The first, a thumbnail, is displayed in-line with the HTML text. It is linked to a larger version, which is displayed as a standalone image. The display dimensions of the thumbnail and the final image are a judgment call; guidelines follow, but, to some degree, these are artistic decisions.

Sometimes PPers decide to skip thumbnails altogether, when there are too many and they interrupt the flow of the text. For an example, see Illustrated History of Furniture. (Beware, this beautiful book will suck you in for hours.) Sometimes PPers will skip large images altogether, if the original images are small or of such poor quality that a large image isn't warranted.

Sometimes PPers create only one large image, and then display a thumbnail by linking to the big image but scaling the size (i.e., via "width="40%") in the img tag). This method is not recommended, as the browser must download the large file even though only a small version of the image is displayed. Also, the quality of the scaled thumbnail display varies between browsers.

Image Display Dimensions - Considerations

The display dimensions of an image are a matter of judgment, influenced by these factors:

  • Monitor resolution: 800x600 display resolutions are still common, and handheld ebook readers are becoming more popular. If an image is larger than the reader's display resolution, they may not be able to see the entire image at once. The thumbnail should be scaled to a size appropriate for in-line display on monitors with low display resolutions. (You can emulate a small display resolution by resizing your browser window.)
  • Image Detail: Images containing a lot of detail, such as maps, are often illegible if scaled too small. (The thumbnail dimension doesn't matter; the map probably won't be legible regardless of the size of the thumbnail.) In this case, it's justified to have an image with larger-than-usual dimensions.
  • Image Quality: Images of especially high quality, such as color plates, may warrant larger-than-usual display dimensions.
  • Page Display Time: A page with many large images will take a long time to load, particularly for readers on dial-up connections.

Image Display Dimensions: General Guidelines

  • Inline images: Normal illustrations should be no larger than 256K and up to 5000x5000 pixels in dimension.
  • Linked-to images: Images that are targets of an href can be no larger than 1 MB and up to 5000x5000 pixels.
  • Covers: Covers should be at least 650x1000 pixels (width x height) and up to 5000x5000 pixels. Larger dimensions are recommended. Cover file size should be no larger than 256K.

Scaling with GIMP

  1. Select Image | Scale Image.
  2. In the Width or Height field, enter the desired final value (in pixels).
  3. Ensure that the "chain" icon to the right of the Width and Height fields shows a connected, rather than a broken, link. The connected link indicates that The Gimp will calculate the value of the other field, maintaining the image's "aspect ratio" (the ratio of width to height).
  4. Click in the other field that contains the original value. For example, if you entered "1200" in the Height field, click in the Width field. The contents of the field should display a new number, indicating that the aspect ratio has been calculated. (The Gimp 2.x is buggy regarding calculating proportional width from a height value. You will need to enter the height twice before the width is calculated.)
  5. Click Scale to apply the change.
  6. Save the image.

Scaling with Photoshop Elements

To scale an image, use Image | Resize | Image Size. In the dialog that comes up, turn on the Constrain Proportions and the Resample Image switches. Into either the Width or Height field (whichever is larger) type 500 (or a smaller size) using a quality of 3 or 4 and click OK. The image is scaled.

If you are resizing an indexed file (.png) then I find it improves the quality if you convert the mode to RGB before doing the resize, using Image | Mode | RGB Color and then scaling as above. Once you have resized it you can convert the mode back to indexed on the image or use the save for web option to save it as an indexed format (PNG-8) or .jpg if that is more suited to the type of image.

Exporting to the Final Output Format

The final output format (.jpg or .png) is determined by the type of image (which is not necessarily the format in which the scanned image was originally saved). In general, the .png format is appropriate when an image has clearly demarcated areas of black and white, such as maps and line art. The .jpg format is appropriate for photographs and drawings with a lot of shading.

However, many images fall somewhere in between these two definitions. Therefore, unless it's completely obvious which format should be used, experiment with saving to both formats and compare the output file sizes. Selecting the right output format will result in a dramatic reduction of file size.

See jtinsley's discussion of .jpg versus .png at Images: Rule-of-Thumb #1 -- JPEG vs. PNG

Both .jpg and .png have native compression routines. That is, when saving to either format, you will be offered options to compress the output file. The application will have some form of "preview" function, where you can display the image at different compression levels prior to saving. Compress the image until it starts to visibly degrade.

Image File Size Factors

The biggest challenge of image processing is to preserve an image's quality while reducing the size of the file that contains it. Numerous factors impact image file size:

  • Number of Colors: The greater the number of colors (or shades of grey), the larger the image file.
  • DPI (dots per inch): The greater the resolution, the larger the image file.
  • Image Display Dimensions: An image with the display dimensions of 200x400 has a smaller file size than an image with display dimensions of 400x600, assuming that all other image characteristics are the same (such as the number of colors).
  • Image File Format: Two storage formats are used for images: .png and .jpg. Each is very effective at reducing file size when the right storage format is applied to the appropriate kind of image.
  • Compression Level (.png) or Quality (.jpg) (aka Output Level): The greater the compression, the smaller the size of the .png file. The lower the quality, the smaller the size of the .jpg file. Increased compression or reduced quality affects the visual quality of an image; experiment to find the greatest compression (or lowest quality) that doesn't degrade the display.
  • Algorithm Used to Store the Image: All image editing programs use proprietary algorithms to save image data to a particular file format. These algorithms vary in their efficiency; some image editing programs are more efficient than others, thus producing smaller files.


Tips for Reducing File Size

pngcrush

The "pngcrush" utility can be used to squeeze a few more bytes out of an .png file. See [4]. "pngcrush -cc" will reduce an image to the actual number of colors in the image, if a grayscale picture is stored as a truecolor image with alpha, or if a black & white image is stored as grayscale.

optipng

The "optipng" utility is a new PNG optimiser inspired from pngcrush, but designed to be more flexible and to run faster. See [5].

jpegoptim

The jpegoptim utility can be used to (losslessy) reduce the size of JPEG files by anywhere between 1% and 30% depending on the source of the original files.

Gimp: Indexing

"Indexing" reduces the number of colors stored in the image; the fewer the colors, the smaller the image's size. The minimum number of colors depends on the type of image; a pen-and-ink drawing might need only 10 colors; a grayscale illustration might need 40.

Select Image | Mode | Indexed. Select Generate optimum palette, and specify the Maximum number of colors. The objective is to use the fewest number of colors without changing the image display. If you can see the image change, increase the number of colors. If the image does not change, decrease the number of colors. Continue experimenting until the optimum number of colors is determined. Convert the image back to grayscale by selecting Image | Mode | Grayscale.

Reducing the Color Depth

Saving a PNG with a reduced number of bits per pixel greatly reduces the file size compared to the default of 8 bits (grayscale) or 32 bits (color).

In Photoshop: Select Image | Adjustments | Posterize. Set the number of grayscale shades, e.g. 16. To save, select File | Save for Web & Devices. In the resulting large dialog, check that it shows only 16 shades of gray; then choose the Png-8 format. Photoshop will save a PNG with 4 bits/pixel. (Does Elements have these commands?)

In Gimp: Select Colors | Posterize.

Alternatively, you can save a line drawing or map from Photoshop (or Elements) as PNG, then reopen it in Graphic converter (like IrfanView for the Mac). There use Picture | Colors | Change to 16 Colors (4 bit), and save under a new name. (IrfanView?) XnView has a similar option: Image | Convert to Grey | 16 Grey scale.

Replacing Colors

One of the biggest causes of large file size is the multitudinous variations in color that our eyes tend to perceive as "one."

To reduce the number of colors, select a color in the midrange of the area where you want to reduce color variation in and replace the variations with the selected color. This will reduce the file size without sacrificing detail in the areas of the image which have meaningful detail in them.

Usually for the image work we do, it means replacing "not quite white" with "white" using Your Favorite Image Editor's "fuzzy select" (magic wand) tool.

XHTML Image Layout

To display an image in an HTML page, use markup similar to the following:

<div class="figcenter">
  <a href="images/image1_full.png">
    <img src="images/image1_thumbnail.png" alt="Caption or Image Title" title="Caption or Image Title" />
  </a>
</div>

The "figcenter" class is defined in the Guiguts-default CSS header as a centered object with no text wrapping around it. The class also gets rid of the link highlight around the image, so it looks more natural, but that is purely a visual preference thing. To flush the image to the right or left side with text wrapping around it, use the "figright" or "figleft" class.

Tips for Specific Image Types

Line Drawings

A wonderful Photoshop tip for cleaning up line drawings:

  • Duplicate the background layer.
  • Set the Blend Mode of the new layer to Linear Light.

All the gray "oatmeal" of the page texture disappears; instant cleanup! (The Gimp?)

To get rid of remaining spots and blots non-destructively (so that you can go back and fix your fixes),

  • Create a new layer
  • Set its Blend Mode to Lighten
  • Choose the Clone tool
  • Set it to "Sample All Layers"
  • Clone white texture over dark spots.

All the cloned pixels are on the new layer, not on the original. Click the new layer on/off to see all your fixes blink on/off. Only when completely done, Flatten Image and save.

When saving a line drawing as PNG, don't forget to change the bitdepth to 1, 2 or 4 bits per pixel.

Linear Light in The GIMP

The GIMP does not have a specific 'linear light' blend mode, but the effect is easy to achieve. Photoshop's linear light is a combination of burn and dodge. Both burn and dodge are blend modes in The GIMP. For the linear light effect:

  • Duplicate background layer
  • Set blend mode to burn
  • Do the same thing in a separate copy with dodge.
  • Combine

Photographs

In the "Save As" box, enter a filename ending with .jpg. Select "Optimize" and "Force baseline" (but not "Progressive") under "Advanced Options. Also set "DCT method" to "Floating Point." Leave "Smoothing" at 0.0. "Quality" should be about 85--if you want to play with this, turn on the preview, zoom in on the window, and watch the artifacts appear as you decrease the quality. A file size will also be shown.

Color Plates

  • Relying on your own preferences, you can turn the somewhat yellowish background of printed paper into white, using the "adjust levels" dialog in Photoshop, by clicking the "white" (right most) color picking tool in that dialog on an area that is supposed to become white.
  • You can then adjust colors, using the same sliders for Red Green and Blue in that dialog, to remove any imbalance in colors. You should be very careful to do this on a good, preferably color calibrated monitor (see "Before you start"). Good things to judge colors on are human skin (faces), and the blue sky in photographs. Unfortunately, most colored illustrations in old books are paintings, which don't give you such easy references. Compare with the original, and retain the feel as much as possible.
  • You can then adjust curves to make the image darker or lighter, as needed. Don't overdo it here.
  • Having come this far, you can now reduce bit-depth to 8 bits per color, and save as JPEG.


Acknowledgements

The following people were (unwittingly or not) major contributors to this tutorial:

  • dcortesi (for the contribution of his Photoshop Elements tutorial)
  • jnik (for additions to the first version of this tutorial)
  • jhowse (for helping me with my first PP project)
  • jhellingman (for tips on processing color plates)
  • donovan, debrastorr, rjholder, Renald, jhutch, JulietS, shimmin, Branko, Jim, Pourlean, Ben Courtney, DaveKline and others (and the folks mentioned above) for useful forum posts

Old Changelog

  • 8 Jan 05, gemmaz: first draft of "Image Processing with The Gimp"
  • 9 Jan 05, jnik: added details on filters, levels, perspective tools.
  • 2 Feb 05, gemmaz: added Table of Contents to top; add to TODO list
  • 25 Feb 05, gemmaz: re-write into a general image processing tutorial, rather than Gimp-specific tutorial; incorporate (with permission) dcortesi's Photoshop Elements tutorial; add content mined from the forums; add screenshots and before / after to examples
  • 19 Mar 05, gemmaz: incorporate feedback from dcortesi
  • 11 May 05, gemmaz: more feedback from dcortesi (missed in the previous edit); cross-reference Irfranview and image file size section
  • 21 May 05, gemmaz: use images stored on DP server