Some tips on image processing for
publication and transmission
on the Internet.
This is a bit long, but worth a look.
One must avoid huge image files when sending them as a file attachment or publishing on a web page. An image that reaches 500K in size is too large for a web page or an email attachment. Even 100K is fairly large, unless one wants to include some important detail. Do what you can to reduce the file size of that image while still keeping acceptable image quality for human eyes looking at a color CRT monitor. Yes, it can be done. Use your image editing application (like Photoshop) with a vengeance, and reduce the size of your image!
Where is your image going to be seen?
(a) If the final destination of the image is a computer screen (Internet/Web) or a small low quality color print -- reduce file size significantly while retaining acceptable viewing quality.
(b) If the final destination of the image is a large image for somebody to be able to zoom into in their graphic viewing application, or if it's an inexpensive color print but not suitable for framing -- create a moderately large file size.
(c) If the final destination of the image is a print suitable for framing, or a professional magazine quality print -- scan the image at highest settings, don't reduce anything unless you really want to, save in highest quality file format.
We will NOT concern ourselves with (b) or (c) here.
Summary: ...in a nutshell you will...
|
Scan the image at a moderately high resolution,
and save that raw image to disk. |
|
| Open the image into your
image editing application (e.g., Photoshop) |
|
|
(Optional) |
Rotate image if needed to achieve desired orientation. |
|
(Optional) |
Crop the image to remove unwanted content. |
|
(Optional) |
Make any corrections to image flaws, unwanted elements, etc. |
|
(Optional) |
Adjust color balance, brightness, contrast, etc. |
|
(Optional) |
Apply any desired effects to the image (e.g., sharpening) |
|
(Essential) |
Change Image Size settings to achieve desired dimensions and image resolution. |
|
(Optional) |
Change color resolution to acceptable level. |
|
|
Save image under a different name in appropriate Internet-ready format. |
Notes
Saving the original image: Before you change an image, it is advisable to save your raw original image file. As you change it, save it under a different name. Just in case you make a mistake or are unsatisfied with your image manipulation, you can revert to the original saved image scan and run a new editing procedure.
Color vs. Black & White: This document mainly concerns color images. If you are photographing or scanning black & white images or simple line drawings, your size-reduction task is easier. I will try to make notes about black & white image editing, but will not emphasise it.
Format
If you are scanning from prints:
The Internet uses the JPEG (JPG) or GIF format for screen viewing, so
your image will end up in either of these two. They are compression
methods that result in acceptable loss of image information. Most
likely it will be JPEG. However, when first archiving the original scan
to disk, when first saving an edited image for archiving to disk, or
when destination is a high-quality print output (NOT for Internet
viewing), I use the TIFF format. TIFF is uncompressed, so full image
information is saved.
If you use a digital camera: Most
consumer low-medium grade digicams create a JPEG image as the original,
so the task does not involve changing the format.
Using the "Undo" feature: The "Undo" feature is your lifesaver when you use a graphics application. Each time you make a change to the image, pause a moment before making any further changes to decide if you are satisfied with the change you just made.
Do the following tasks in the order as presented unless otherwise noted.
Scanning the image: Your scanning software will have choices of settings. I recommend
Scan one photo at a time. If you put more than one photo on the scan plate, make a Preview scan first (click Preview button), then you select each photo with the mouse (click+hold+drag the mouse between opposite corners of the image) to make a Final Scan one at a time.
Save the image to disk in a high-quality format:
The scanning software either scans the image directly to disk, or the
image is scanned directly on screen into an image editing application
like Photoshop. Or you could have scanned it from within
Photoshop (Menu path is File:Acquire…), in which Photoshop locates and
invokes the scanning software in your computer to acquire the image. If
the image is not already on screen in Photoshop, then it must have been
scanned to disk, so open it up later in Photoshop. If you are scanning
many images at one sitting, I recommend scanning them all to disk
first. Save each image in the TIFF format, or the Photoshop format.
Then when done scanning and saving all the images, quit the scanning
program and open each image to edit in Photoshop one at a time. Here,
do not save your raw images in the JPEG format.
...or...
Load the image(s)
from your digital camera to the computer and
Open the image
in your image editing application (e.g., Photoshop)
Now you have scanned or uploaded the image and it is on screen in Photoshop...
Rotate if necessary: If
the image is sideways or upside down, rotate it 90 or 180 degrees
appropriately. If the photo is crooked, rotate the image to the
arbitrary angle desired. Menu path is Image:Rotate... One
can do fine rotation manually with the mouse, or by entering a number
for a rotation angle. Here's where the Undo feature is quite useful.
Cropping: Choose the portion of the original image you wish to include in the final image. Is the entire image of interest? Can you crop out unnecessary stuff? Re-frame the image to remove any spurious crap around the edges. Is there a specific detail that is of interest? Use the cropping tool to get the desired image. Once you have chosen the desired image, click on Image:Crop to execute the desired crop. That's an important first step in size reduction.
(Optional) Make any corrections to image flaws, unwanted elements, etc. This may be things like red-eye reduction, etc., in which you use the various image editing tools. I will not go into this.
(Optional) Adjust color balance, brightness, contrast, etc. Menu path is Image:Adjust...
(Optional) Apply any desired effects to the image (e.g., sharpening). Menu path is Effects:Sharpen...
(Essential) Resize the dimensions and resolution of the image: Almost every computer monitor has a screen image resolution of 72 dpi. This is the destination resolution for your image, no matter what is the original resolution of the image. If you scanned at 150 dpi, you will change the 150 to 72. Whatever the resolution is, change it to 72. Doing so will change the overall size of the image file. Most likely you will want to reduce the linear dimensions (width and height) of the image too.
Menu path Image:Image Size... there you get a dialog window where you make sure to
(a) Set Resolution to 72 dpi (standard required for Internet images)
(b) Constrain Proportions (a check-box
setting) for proportional resizing. This is usually already set
for you as the dialog window appears. Leave it checked. This
means that you only have to change one dimension (either the horizontal
or vertical) and the other one will automatically change in proportion
(see item c). It's
convenient, and prevents distortion in the image.
(c) Change one of the image dimensions (either horiz or vert) to result an image with a more reasonable screen size. Remember that the other dimension will automatically resize in proportion (see item b) to the dimension you changed. You don't want the image to overwhelm the user's computer screen. Best to fit on screen without the user having to scroll the window. If you are using units of inches, typically a horizontal dimension of a maximum of 8-10 inches is acceptable. I typically don't exceed 6 inches horizontal. Or you can use pixels as units, keep in mind that most likely there are 72 pixels/inch on the screen you are looking at right now. So, an image that is 400 x 600 pixels has a total of 240,000 pixels, and has a screen dimension of 5.55 x 8.33 inches.
(d) Observe that now that after you've performed a size reduction in Photoshop, the on screen image you see may be very small. Use the Zoom Tool (looks like a magnifying glass) or use the View menu to zoom into the image until it is displayed at 1:1 scale on screen. You should be able to see the scale of the on screen image indicated in the top control bar of the image's window. This 1:1 scale is what the image will look like on any Web browser.
|
Color depth: This section is most important if you plan to create an image in the GIF format. If you do not plan to use GIF (but instead plan to use JPEG), then you can effectively skip this section on Color Depth and read "To save in JPEG format" below. However, I recommend you read it when you have a few extra moments because it provides a better understanding of how computer-based imaging works. This part gets a bit involved, but when you manipulate color depth, you can get significant savings in file size. The color depth (aka "pixel depth", "color resolution"), is the amount of information allocated to represent each pixel in the image either on screen or in a printout. A word about black & white images. Actually, it's shades of gray, or "gray scale". The number of possible (reasonable) shades of gray of a B&W image is far less than that of a color image. If you scanned your black & white photograph using a color setting on your scanner (rather than in black & white or gray scale), that's OK. But using the color setting, you have invoked the resources for describing millions of possible colors when in fact you only have to describe a few hundred shades of gray. In Photoshop you can make the change from color to B&W and reduce the file size significantly. More later. You can reduce the color depth of an image with acceptable degradation in quality for on-line viewing. Typically that raw image has a pixel depth in the "thousands of colors" or "millions of colors" range, so each pixel must be represented by a unique number describing its color and brightness. A large number must be used to handle thousands or millions of different possibilities. That requires a large memory allocation (and disk space) on your computer. But you can often reduce that large number from something in the millions ("20 bits") down to just 64 possible colors ("6 bits") per pixel with acceptable results. The human eye can discern very fine differences in hue, and may notice the loss of color resolution, but the human brain often does not care, and will find the image acceptable. So now each pixel can be represented by a fairly small number. This results in dramatic savings in computer resources, and in file size. (a) In Photoshop go to menu "Mode" and you will probably see a check mark next to "RGB Color"--this means the color depth is at least in "thousands of colors". Now choose "Indexed Color...", then choose 6 bits/pixel. This reduces the color depth. Note, however, that once you've done this change in depth, I think that you can no longer save it as a JPG image. You must save it as a GIF image. (b) GIF image options: You may want to choose "Interlaced" for the GIF option. This results in the image loading on the web browser's screen in an interlaced fashion, with the entire image starting out low resolution, and becoming clearer as the file loads. Otherwise the image loads in a sweep from top to bottom. That's just a preference for you to choose. More about black & white images: Notice that in the "Mode"
menu,
you can change the mode to "Gray Scale". Give that a try. By the way,
you can change a color image to B&W this way if you'd like. Finally a word about GIF versus JPEG. After all the above discussion of color depth and GIF compression, it's JPEG that wins the compression game. For posting simple images to websites or for emailing images, JPEG is the choice by far. |
To save in JPEG format (.jpg):
If you didn't reduce the color depth, you can achieve excellent (in fact, superior) file size reduction with the JPEG format. JPEG is an image compression format in which you have a choice of saving the image with varying compression and image quality in inverse proportion. Higher compression = lower quality. Typically, there is a scale of 1-10 on image quality that you can choose from when you save the image. You can get acceptable results with a setting of 3 or 4 out of 10 and it will look fine on-line. You can experiment on saving the same image in different compression settings, and observe their respective file sizes on your disk.
Example:
You may have started with a 4"x6" photograph, scanned
it at 150dpi,
at millions of colors, and you save it immediately to disk in the TIFF
format with filename "picture-01.tiff", resulting in a file size of
about 1 megabyte (1000K) on disk. You opened it up in Photoshop,
rotated it (because it scanned sideways), cropped it (to remove the
extra sky, trees, and other unnecessary content, etc), adjusted color
balance (it was too green), adjusted brightness and contrast (it was a
bit washed out), changed the image size to a resolution of 72dpi (down
from the original 150 in which you scanned it) and dimensions to 2"x3"
(down from 4"x6"), then you saved it (under a new name) in the JPEG
format at a compression setting of 3. You look in your disk folder at
the new image file you just saved under a new name, "picture 01a.jpg",
and you now have a small version of the image with a file size of 18K
(down from 1000K!) and it still looks fine onscreen.
There, you're done.
Give that a try. Send me any questions you may have.
- Dan