Image size a concept that has more than one meaning:

Both of these are influenced by the resolution of the image: the higher the resolution, the larger the dimensions and the more disk space occupied.

The following sections will provide a more detais about resolution and file size.

Resolution

As mentioned in the definition of terms earlier in this tutorial, resolution refers to the sharpness and clarity of your image. Of course, the sharpness and clarity vary depending on the context of the image. Are you scanning or viewing your image? Are you viewing it on a computer monitor, or are you looking at a printed page?  

Scanning: When scanning your images, you are usually prompted to choose what resolution you would like your images scanned at. The intended use or display of your images will help you make this choice.  

Printing: Images intended for high-quality printing should be scanned in at no less than 150dpi, preferably 300dpi. Remember, dpi is "dots per inch", and the more dots per inch, the sharper and crisper your images will look on the printed page. Many publishers have minimum resolution requirements for digital image submissions - make sure you know what's required before you start digitizing.

Computer display: Images intended primarily for display on a computer monitor (such as email attachments or images on a Web page) really only need a 72ppi to 96ppi resolution, as that is what computer monitors are capable of displaying. A higher resolution will not make your image appear any better on the screen. In fact, if you don't expect folks to print out your images, these images should be "optimized", which means making them as small and compressed a file as possible (while still retaining the appropriate visual clarity), so that they load quickly, and do not take up too much space on the hard drive.

TIP - Optimizing images for computer/Web display involves compression, which throws out some pixel data. You cannot then enlarge the optimized images without encountering pixelation (see second example below).

TIP - if you need to make high resolution, large files available via the Web or computer, create "thumbnail" versions of your images that then link to the larger images. This prevents your viewer from enduring slow loading times for images they are not interested in seeing.

Resolution Example(image courtesy of author)

In order to see distinguishable differences in between the low-resolution JPG image below and its high-resolution TIFF counterpart, print the handout (available from the menu on the left)



Ideal for Computer/Web Use

Format:   JPG

DPI: 72

Pixel Dimensions: 361 x 210

Print Dimensions: 5" x 3"

File Size:   222KB

 

Enlarged jpg image with individual pixels visible

File Size

File size is proportional to the pixel dimensions of an image, is partially determined by the file format, and it specifically refers to how much disk space your file occupies, either on the hard drive, CD, or other storage medium. 

Image files normally range in sizes measured in Kilobytes (KB or K) and Megabytes (MB or M); extremely large files may be measure in Gigabytes (GB). Images for print will have larger file sizes, since higher resolution = more data stored in the file.   Images for Web or computer display will have smaller file sizes.  

As a general rule (and there are appropriate times and places to break it), Web images should fall between 10 and 200K; images with larger file sizes will load more slowly, and generally be too cumbersome for effective computer distribution and display.   

Saving your images in .JPG or .GIF format will automatically compress and reduce your file sizes significantly, so that you can fit more files onto a disk or attach more to an email message, without exceeding the disk storage or file size limits.

Inserting images into presentations or other documents:
Resizing images on the screen after inserting them into your PowerPoint presentation or Word document does *not* reduce the file size of that image; this only changes the dimensional display size of the image in that document. Presentations and other documents that contain numerous images can become very large in total cumulative file size. In order to keep such presentation and document files at a reasonable size, you should appropriately resize your image files in an image editor before inserting them into your final document.

Best Practices

Start Big:   When in doubt about how you might end up using your images, opt for the highest resolution possible. It is always better to start out with the most information possible, and then scale down as necessary. If you start out with low resolution, you cannot get a higher resolution without scanning or taking the picture again with higher resolution settings, and you may not get that chance.

Protect Originals: Keep the original, high-resolution versions of your images (which should be in TIFF format, if possible) in a separate place from your working documents or optimized Web images. Back up your important documents on some kind of external storage medium (CD-Rom or fire wire drive, for example). This will help to ensure that you have something to go back to and work from should something unfortunate happen to the other files.

Name Files Accurately: Develop a file naming convention that will help you accurately identify your files. Names that include descriptive information, version or size information, or intended use information can be helpful when managing large digital image collections.

Viewing File Info

There are various ways to view the file types and sizes of your image files; the most common are demonstrated in the three bulleted examples below.

Figure 4

Figure 5

 

Figure 6

 

Figure 7





Editing Images

Three of the most common image editing tasks are cropping, resizing, and removing red-eye from photos. In the following sections, I'll briefly explain the basics of each, using Adobe Photoshop CS. These basic processes should be applicable to most other image editing programs.  

I'll also go over batch processing, a valuable time-saver when applying the same edits to large numbers of files.  

Other common editing tasks, such as adjustments to exposure or color balance, can be performed either when you scan the image, or later when you use an image editor.

Cropping

Often, the digital image you are working with includes more visual information than what you really want. The process of selecting what you do want and then deleting the rest of the image is called cropping. This is akin to trimming printed photos with scissors to fit into a frame or remove unwanted details. 

NOTE: The difference between the Crop function and the Cut function is this:   Crop removes what is outside your selection marquee; Cut removes what is inside your selection marquee.  

To crop an image, select the portion of the image you wish to keep by using one of the marquee tools from the toolbox. Then go to Image >> Crop (Figure 8). Your image will be reduced to what was inside your selection, or in the case of using the elliptical marquee (as in this example), it is reduced to what rectangular format most closely approaches the edges of the selection circle (Figure 9).

Figure 8

Figure 9



Resizing

In order to change the display or print dimensions of your image, you need to resize it. Do this by going to Image >> Image Size, and entering the desired dimensions in either the pixel dimension (for computer display) or document size (for print) area of the dialog box (Figure 10). 

You will notice when you adjust the numbers in the pixel dimension area, the document size numbers adjust automatically (and vice-versa). This is because pixel and print size are related, and affect one another. You may find it necessary to have one image sized optimally for computer display (from the original), and another copy of the image sized optimally for print (also from the original).

Selecting "Constrain Proportions" will ensure that adjustments to width will automatically adjust the height proportionally, and vice-versa, so that your image doesn't become distorted.

Figure 10



Batch Processing

You may find that you need to resize many, many images to the same pixel dimensions, in order to create a digital portfolio, or otherwise prepare your digital images for Web display or print. To save time on such routine tasks, you can use a function called batch processing. Basically, you decide on a set of steps, which you record as an action. You then tell Photoshop to perform that action on the many image files, saving you time and effort.

Step 1 - Record Action: Display the Actions pane in Photoshop by going to Window >> Actions. Then click the "New Actions" button in the lower left of that window (Figure 11). Type a name for your action in the dialog box that appears, and click the "Record" button (Figure 12). Then perform the operations that you wish to perform on all of your images.

Figure 11

Figure 12

Step 2 - Batch Process: Now that I have an action recorded, I can proceed to batch process my other documents using that action. I will go to File >> Automate >> Batch, and in the dialog box that opens, I will choose to play my "duck action" (Figure 14A).  

For the Source section, I need to define the source files upon which the action will be performed. I organized all my source images into one folder, which I now designate by clicking the "Choose" button (Figure 14B), navigating to that folder, and clicking "Choose" again.  

Next is the Destination section, in which I designate where my edited files will be saved. This should be a separate location from my original or source files. I select "Folder" from the Destination drop down menu, then click the "Choose" button, and navigate to and choose an appropriate folder.   

In the File Naming section, I have many choices of combining the document name (derived from the original source file), plus the document extension (also derived from the original source file, unless saving in a new format was included in the action), plus date stamps or serial numbers, to help me keep track of various edited versions of the same image. I'll choose "Document Name" + "extension" + "mmddyy" (Figure 14C), and I'll select all the compatibility options available (Figure 14D).  

If there are errors, I don't want the batch processing to stop, so I'll choose "Log Errors to File" from the Errors drop down menu (Figure 14E) and specify what I want that log file to be called and where it should be saved. Now I'm ready, and I'll click "OK".

Figure 14

After some brief flickering and flashing of document windows that may occur while the batch processing action is running, you will end up with caboodles of images edited to your specifications and saved to the location of your choice, all before you can say "I love batch processing!"



Removing Red-Eye

There is a common need to retouch photos of people or animals to remove the red-eye that occurs when using the flash on the camera. Since there are lots of tools out there to do this, I'll just briefly explain the basics of removing red-eye, and give you links to more software-specific information.

Whatever tool you are using, you will basically be performing these tasks:

After you have done this once or twice, you'll be a pro. Remember, you can always go to the Help menu in your image editor and type "remove red-eye" to find helpful information.

Here are some links to software specific instructions and more detailed information about the "how" and "why" of red-eye:

File Management

You might find that thoughtful file-naming conventions (as discussed in the Best Practices section of this tutorial) just aren't enough - you need help organizing your ever-growing digital image collection.  

Here are a few examples of software applications that can help you find, organize, and share your digital images. Some of these offer basic editing functions as well:     



Additional Resources

There are lots of digital imaging resources on the Web for amateurs, experts, or the mildly curious.   Here are some suggested additional resources to help you on your way to becoming a digital imaging whiz.

General Digital Imaging Resources:

Scanning Resources:

Image Editing Resources:

Digital Imaging Resources for Library Preservation & Conservation Professionals: