[Comp
Lab Start Page]
Scanning, Saving and Using
Digital Images
(much of this also applies to photos from digital cameras)
(click here for the
shorter version of this information)
jump down to:
-
Pixels--basics of digital images, terminology, "what's '640x480'?"
-
Color, Grey Scale, etc.--storage required depends on this
-
Choose the resolution--more is not better: choose by purpose
-
Images already in digital form--optimize 'em with software
-
-
Formats for Saving--best choice depends on purpose and image type
-
Insert your image in Word--the entire image is stored in your file
-
Insert your image in a web page--only the definition is stored in your file
-
Moiré patterns--avoid the blotches from newspaper and magazine images
1) Introduction--The choice of scanning resolution and color storage mode determine the space needed to store your digital image. And (discussed later) the choice of a file format (when you save the file) further controls the final file size and even the quality of the resulting image.
a) Pixels--Digital images are composed of "pixels" (picture-elements) arranged in rows and columns [Examples]. The size of an image is expressed as number of rows by number of columns (i.e. 640 x 480 means 640 rows with 480 columns). There is no physical size (such as inches) equivalent to these dimensions, because the physical size depends on the "output device"-- i.e. will you see it displayed on a monitor screen, printed on paper, or what?
i) Computer monitors used to be 640 x 480 displays. Many are now 800 x 600 (the computer lab monitors are set at 800 x 600), and some are more. An image that's 640 x 480 would fill the screen of a 640 x 480 monitor, but only fill about two thirds of an 800 x 600 monitor, etc.
ii) Printers have "resolution" expressed as "300 dots per inch (dpi)" or whatever. This determines the physical size of an image printed "one-to-one"-- an image that is 300 x 150 would print 1 inch wide and half an inch tall--but you can usually tell the printer to scale the image to fit any size on the paper.
iii) Multiply the pixel dimensions to get the total number of pixels in the image. You can see that a 400 x 200 image has four times as many pixels as a 200 x 100 image, SO all else being equal it will take up four times as much storage space.
b) Color, Grey Scale, etc.--Each pixel is stored as digital (binary) numbers, according to whether it is full color, gray scale, or line-art.
i) Full color images are coded as RGB (Red-Green-Blue). Each pixel is represented as three bytes, each having values from zero through 255, storing the brightness of the three "additive primary colors", red, green, and blue. Black is 0,0,0 while white is 255,255,255. Pure blue would be 0,0,255, etc. A computer video monitor reconstructs the image by lighting up one dot-cluster on the screen for each pixel, the brightness of each color being determined by the number from 0 to 255 that codes for that color for that pixel. (Sometimes you may encounter these number written in hexadecimal format 00 to AA, instead of decimal, and an entire color, like pure blue, might look like #0000AA. [more info])
(1) Printers use inks that "subtract" rather than add wavelengths to produce color. The computer converts its RGB data to the correct amount of ink in each of the "subtractive primary colors" (Cyan, Magenta, Yellow) and blacK (CMYK) to deposit to produce each pixel.
ii) Grey scale images are coded with one byte (value 0 to 255) for each pixel, representing its brightness only, without regard for the actual color.
iii) Line-art images are coded with eight pixels in each byte, a 0 or 1 in each binary bit representing black or white, respectively.
iv) SO, all other things being equal, an image in full color format uses three times as much storage space as it would as grey scale. As line-art, it would use one eighth as much as is would as grey scale.
2)
Choose the resolution--Scan for a particular output device: screen or printer, etc. Choose
only as much resolution as you need--more is not better. (Exception: if this
is your last chance at scanning a particular photo and you think you may
want to do greater things with it at a later time.)
[Images already in digital form
(digital camera image, image sent to you, etc): You can use photo-editing
software to reduce the resolution or color depth of an image to make it best
suited ("optimize" it) for a particular use, such as web pages.
Always get the pixel dimensions of your image down to only what is needed
before you insert an image into a webpage in final form--download times
depend drastically on image filesize.]
a) Sloppy rule of thumb:
i) Scan at 72 dpi for web pages, e-mail images, etc.
ii) Scan at 200 dpi for most printers
iii) Scan at 300 dpi (Line Art) for OCR--Optical Character Resolution--(only don't bother...)
iv) Scan at 200 dpi (Line Art) for FAX
v) Pre-Press: your file is to be used in a magazine or newspaper.
(1) Scan at 200 to 300 dpi for magazines
(2) Scan at 85 to 100 dpi for newspapers
(3) Or, find out from the people who will use it what resolution to use.
(4) Or, calculate (scanner lines per inch) = (lines per inch in the final magazine or newspaper process) times (1.5 to 2.0) times (final printed image width) divided by (original photo width)
i) For video monitor display, figure what fraction of the display you want to span and take that fraction of the display width in pixels--that tells you how many pixels wide your image should be. (e.g. to span one fourth of an 800 x 600 display, make your image 200 pixels wide.)
ii) For printer output, learn the effective dots per inch for your printer. For a "300 dpi" printer that is probably about 200 dots per inch, but some may actually come closer to 300--hp's REtechnology claims to. To use the full quality of the printer, make your image have that many pixels for each inch of printed picture. (e.g. if your printer does 200 effective dots per inch and you want to print your picture 3 inches wide, make your image 600 pixels wide.)
iii) When you know how many pixels wide you want your image, divide that by the width in inches of the picture you are about to scan. This gives you the needed scanning resolution. (e.g. if you need an image 600 pixels wide and your photo is 4 inches wide, scan at 150 dots per inch--600 divided by 4, right?)
3) Formats for Saving--Save the image in an appropriate format: choose a format that fits your intended use. Balance the need for accurate reproduction against the need to reduce file size for a certain application. Consider saving it as more than one format--maybe one for archive purposes so you can always come back to full accurate detail and another for small file size to send by e-mail or place on a web page.
a) Consider saving an archival file, in case you may want to come back later and do other things with the image. The native format of your image software is a possibility here, or maybe .tif format.
b) Probably, avoid formats that are limited to only one computer "platform", like .bmp for Windows only but not MACs, etc.
c) For web pages, consider .jpg and .gif ("Jay-peg" and "Jiff" or "Giff")
i) .gif files are good for small "constructed" images: logos, icons, etc. with few colors and it allows transparency.
(1) reduces all colors to a "palette" of 255 colors
(2) one color (a surrounding background, for example) can be defined as "transparent". This lets the rest of your image (a head, maybe?) float over some other background on your web page, instead of showing its true rectangular shape.
(3) compression by horizontal rows results in smaller file size if long stretches horizontally are the exact same color
ii) .jpg files are good for natural images (i.e. photos of the real world). They result in very compressed files, and can reproduce the full range of color, but they do create "artifacts"--little scars that are visible when the image is magnified, especially visible in areas of nearly uniform color adjacent to sharp boundaries: blue sky around power lines will show strange extra patches of blotches near the wires. Also, if you re-open it to do anything else to it and save it again, that introduces some more artifacts every time you do so. So .jpg should not be used for archival storage of images you may want to use later in a different way.
4) Insert your image in Word--You can insert an image into a Word document, adjust its size, control how the text wraps around it, etc.
a) It's best to save the file first and then, when you are in your Word document, do Insert | Picture | From file. (Although it may be possible to "copy" the image while in the image processing software and then "paste" it in Word, this sometimes leads to bad results at printing time, like text but no picture!
b) In Word, if you click on the image, it "selects" it (shown by little squares at the corners and the mid-points of each edge). While it is selected:
i) If you drag one of the corner squares, it will adjust the size of the picture without changing its shape.
ii) If you drag one of the mid-side squares, it will change the width or height only.
iii) If you drag any point out in the middle of the picture, it will move it around the page.
iv) If you click Format | Picture you get a dialog that allows you to change how text is "wrapped" around the image. The best way to see exactly what the different choices mean is to just try them out. You can fix it so the text will skip entirely past the picture (the default setting), wrap all around it on both sides, or left side only, or right side only, or float over the picture, etc.
c) When you save the Word document, the image is saved as a part of the Word document file. You do not need to have the original image file you inserted to open the Word document with the picture in it.
i) This means, however, that a Word document with several images can make a really big file, sometimes too large to fit on a floppy disk.
ii) When you resize the image by dragging corners, it changes only the size it displays and prints, not the actual data that is stored. So if you insert a really big image and then shrink it down quite small, you still have the extra file size of the original big image--several of these in a document make the Word file huge. But if you start by inserting an image that is smaller, the final Word document size will be smaller.
5) Insert your image in a web page--Some special considerations apply if you are inserting your image into a web page.
a) When you insert in image into a web page (html document), the .htm file you save does not actually contain the image file, but only the filename of the image file (and maybe the path to find it). So if you are putting your webpage on a floppy disk, or copying it to a web server, or sending it to someone else, you must be sure that all the image files are copied or sent along with the html file.
b) If in the html, only the image filename is specified, then the image should be in the same folder with the html file itself. (That is the simplest way to go.) Webpage editing software may sometime put in more detail, like a path to the file. If it puts in a path to the local hard drive, the image will not be displayed if the html file is opened from anywhere else, so pay attention to what it writes, and fix it if necessary.
c) It is possible (but not required) to specify (in the html file) the size that the image should be displayed. If you specify at all, it's best to specify the actual pixel dimensions of the image itself. That will not change how it looks, but it will let the browser leave the required space for the image as the page first loads--otherwise, the page will load first and then have to be re-drawn on the screen after the image file has downloaded and its size determined. You could specify a display size different from the actual file size. That's not terrible as a quick way to make minor adjustments, but be aware that:
i) If you display it much larger than its actual size it will start to look blurry, or
ii) If you display it much smaller than its actual size it will look OK but it still has to download the entire file, so it will take just as long to download the image as it would at the original size. You can save download time by going back to the original file, re-sampling it to the smaller size, and inserting that image file in your webpage.
6) Moiré patterns are an unwanted and geometrically regular pattern that sometimes appears over an image scanned from a picture printed using a half-tone screen (newspaper and magazine photos).
a) They result when the grid pattern formed by the dots of the half-tone and the grid pattern of the scanned pixels are nearly, but not quite, the same size. The grids match in one area, get "out of step" in an adjacent area, and so on, resulting in a regular pattern of distortion.
b) Several ideas can be worked together to eliminate (or at least minimize) the effect:
i) Some scanner TWAIN interfaces have a setting you can choose to "De-Screen" during the scan. They will usually let you set the value of the screen spacing in the original, and then "fix" things for you automatically. This is great, when it is available.
ii) Without this option available, try scanning at about half again or twice the resolution that's causing the problem, then Resample (this is an option in the image processing software) down to the desired pixel dimension.
(1) Applying an image filter to "smooth" or "blur" the image before you resample may help, by softening the dots of the original half-tone screen.
(2) The process of sampling to reduce the size will be creating each pixel derived from its nearby neighbors, which sort of averages out the underlying dot structure that lead the problem in the first place.
(3) Choosing different options for how the re-sampling is performed will influence the effectiveness at removing the Moiré patterns, because it governs the type of averaging being done.
Hexadecimal representation
of colors:
|