So what’s the image resolution, the scan quality, the output requirements? Are we talking about megabytes or megapixels? What’s the difference between dots-per-inch and pixels-per-inch? Jpeg, bitmap, tiff, gif, png or eps? Raster or vector? What are RGB and CMYK, and why should I care?
The terminology and process of digital imaging is frequently a source of confusion. I’ll discuss image quality and clarify file types first, then move on to scanning, and lastly how to prepare images for a few common forms of media – viewing on the web, photographic output, and print media (such as posters, brochures, and newspapers.)
Pixels
Photographic digital images are composed of pixels (short for picture element), arranged together like a grid of tiny square tiles. Each pixel has an assigned color value for each of the colors in the RGB color space (Red, Green, and Blue) or the CMYK color space (Cyan, Magenta, Yellow and Black). If the image is grayscale (black and white) it has a number describing the tonal value for each pixel.
In RGB, the opposite of red = cyan, of green = magenta, and of blue = yellow.
A lower red value increases the amount of cyan (a turquoise color).
A higher blue value decreases the amount of yellow.
In CMYK, the opposite of cyan = red, of magenta = green, of yellow = blue, and of black (K) = white.
A higher magenta value decreases the amount of green.
A lower black value increases the amount of white, and it is a lighter shade of the color.
In general, the RGB color space is used for images that will be viewed on screen, such as internet images and photo slideshows. For printed photos processed by a photo lab, RGB is the most common color space. Converting images to CMYK is often recommended for printed materials such as newspapers, magazines, and desktop inkjet printing devices.
The total number of pixels in an image is one of the factors that determine its file size in kilobytes or megabytes, and how much space the file will take up on a camera’s memory card, a computer’s hard disk, or on removable media such as a CD or USB flash drive.
The resolution of a file is expressed as the number of pixels per unit of measurement. When using inches, this would be ppi (pixels per inch).
One 4 by 6 inch image is 432 pixels wide by 288 high. The resolution is 72 pixels per inch (ppi). The file size is 212 kilobytes (213,628 bytes, or 212 K).
Another 4 by 6 inch image is 1800 pixels wide by 1200 pixels high, with a resolution of 300 pixels per inch, and has a file size of 6.18 megabytes (6,602 K, or 6.18 MB).
Bigger is not always better! If the image is destined for the internet, for example, then you may want to create a file with the smallest size possible while still retaining good color and image quality. The standard resolution for photos on the web is 72 pixels per inch, and these images are often less than a megabyte in size. Larger files mean slower download times for a webpage’s content.
However, if you wish to have your image printed on photographic paper at 8 by 10 inches, you will want a much larger file, usually from 10 to 20MB. If it will be part of a layout design for printed material (such as on a magazine or catalog page, or a poster) a resolution of 300 pixels per inch and a file size of at least 3 MB is recommended.
And Now Megapixels
The megapixel count of a digital camera means the number of pixels it can capture by the million. A camera with a 5 megapixel capability has a sensor that can capture an image of 2592 pixels wide by 1944 pixels tall: 2592 times 1944 = 5,038,848 pixels.
The higher the number of megapixels (MP) used by a digital camera, the higher the resolution and the larger prints you can make. But take into consideration the fact that using the highest setting/resolution available will result in the images taking up more space on the camera or removable memory card. A 3 MP image (2048 x 1536 pixels) is generally high enough resolution to be printed out at 8 by 10 inches, without looking “pixelated” or lacking in fine detail.
It is sensible to use higher resolution settings (above 3 MP) on your camera if it will be held steadily without shaking, or is set on a flat surface, or is mounted on a tripod. (Otherwise, the additional pixels-per-inch may blur detail rather than adding to it.) If you are considering using image-editing software to crop in to a small section of the photo after it is taken, a larger file will retain more detail when the cropped area is enlarged. However, many photos will never be viewed or printed above 4 by 6 inches, and a 1 MP setting will be adequate.
Image File Format Options
When deciding which format is appropriate for your image files, there are different data compression methods to consider, and the alternatives of raster or vector-based content.
File compression methods can be lossless or lossy. Choosing a lossless format means that the size of the image is compressed/reduced without losing detail: sharpness and color range will be not be adversely affected when saving the file. With lossy formats, image data is discarded to reduce file size.
Raster images have pixel-based content. A digital camera photo is an example of a raster image. Graphics created in Adobe Illustrator are examples of image data that tends to be vector-based. Vector art is made up of geometric objects, lines, and points rather than groups of pixels. To rasterize a file is to take vector art (or postscript text) and convert it into a pixel-based image. Raster images will usually have larger sizes than vector files.
Common File Types
Jpeg (Joint Photographic Group, .jpg) –images created by digital cameras are saved in this format. Selecting a higher resolution/quality setting on your camera will give you a larger .jpg file with more detail and it will be not as lossy as lower quality settings. The amount of compression desired is adjustable depending on intended use of the image. Jpegs are often used for photos on the internet and for sending in e-mail messages because of the small file size. When the file is opened in image editing software such as Adobe Photoshop, it is uncompressed and may be saved in a format which is more conducive to adjustments and to being opened and edited several times without loss of image data (such as .tif or .psd.) The uncompressed file will be larger – a 672K jpeg can become a 4 MB file when opened and saved as a tiff. Jpeg is a raster-based format.
Tiff (Tagged image File Format, .tif) — This is a lossless format that does not use compression. In some image editing programs, .tif files can have multiple layers for complex editing, but .psd files offer a greater degree of options. Tiffs are a good option for storing photos on your computer that you may be opening and working on multiple times, since it is lossless, unlike jpegs, which will degrade each time they are opened in image editing software. Tiff is a raster-based format.
Photoshop Document (.psd) – When working in Photoshop image editing software, this format is often preferred because it supports files with multiple layers. Text, color adjustments, and special effects can be saved on multiple layers in a psd. A flattened final version can then be created and saved as a different format, such as tiff, jpeg or pdf. This is a lossless, non-compressed format and files sizes can be quite large when working with layers. Psd files can contain both raster and vector-based objects.
Bitmap (.bmp) – Any pixel-based image can be considered a bitmap because the image is mapped out by individual bits or pixels. But the file type bitmap refers to an image data format developed by Microsoft Windows. This is a lossy and non-compressed format. Bmp files are more suitable for simple, non-photographic images that will be printed than for use on the web; jpeg and gif files of the same image will be much smaller. Bitmap is a raster-based format.
Graphics Interface Format (.gif) – Limited to a range of 256 colors. Photographs may look flat if saved as .gifs but this format can be adequate at small sizes (such as 200 x 300 pixels at 72 dpi). Gif supports transparency; and illustrations, logos, and ad banners designed for the internet commonly use this format, when an extensive color range isn’t required. Gif has a lossless compression only for images containing 256 colors or fewer. For a continuous tone image such as most photos, jpeg compression is preferable. Gif is a raster-based format.
Portable Network Graphics (.png) – Images designed for the internet often use this format when preservation of all the colors and details is desired (superior to gif and jpeg in this regard.) Png also supports transparency. This is a lossless format: file size is compressed by using an algorithm based on discerning patterns in the image. However, jpeg can compress photos to a greater extent, resulting in a smaller file size, even at high-quality settings. Png is a raster-based format.
Encapsulated PostScript (.eps) – This format is generated similarly to text with postscript language data. Graphics such as maps and logos are often saved in eps format. Complex objects with transparency and gradients, drawn in Illustrator, can be saved as eps files. For high resolution printing of vector-based artwork, this format is considered superior. Eps files are lossless and can include both raster and vector data.
Adobe Illustrator Artwork (.ai) – Ai files are not as large as eps files of the same image, and the images retain editing capabilities in Illustrator. However, many different graphics programs can use eps files, and ai files are less supported. Most ai files are converted to eps or pdf before use in page layout programs, and for general viewing or printing. Ai is a lossless vector-based format.
Portable Document Format (.pdf) – This file type is the standard document-exchange format; and can include many different forms of data in one image file, including text (with hyperlinks), vector graphics, and raster-based photos. Considered a final-state format for delivery to end users, pdf documents can be viewed with widely-available pdf reader software without having to open the file in a text- or image- editing program. Depending on the settings selected when creating a pdf, the file compression can be lossy or lossless. Pdf files can contain both raster and vector-based objects.
Some Scanning Basics
Before the days of digital cameras, the standard way to create and view a photographic image was to capture it on film (negatives or slides/positives), and then prints could be made from the film by a photo lab’s printing services. Today film photography is still an option, and we can also translate photos and artwork from a negative or a print into digital images by scanning.
Desktop flatbed scanners have become common. A quality digital image can be created by skillfully employing the software provided with the device.
Ideally, before making a scan, you should first determine what the final output will be. The scanning interface software should have options for selecting the resolution and the size in inches or pixels.
Additionally, most interfaces allow you to crop the image, adjust the color, sharpness, and tone or density (the balance of light and dark) somewhat before performing the scan.
It is often easier to fine-tune these adjustments after the scan by opening the image in photo-editing software such as Photoshop. Cropping the image can be done more precisely in the editing software; and greater control over the color balance and sharpness will be possible than with the scanning interface.
Here are a few examples:
When I’m scanning a 4- by 6- inch print of an image that I wish to put on my website, I will set the size to 100%, with a resolution of 300 pixels, and crop in to just beyond the edges of the image. Most often I’ll have the sharpness set to medium, and will adjust the tonal settings a little so that it is not too bright (loss of detail in lighter areas) or too dense (loss of detail in dark areas.) I will usually scan photos as a tiff file, but would convert this one in Photoshop to a jpeg for web use and size it down once I am done editing the image.
When I am scanning a 5 x 7 inch drawing created with pen-and-ink on paper, of which I would like to eventually print out a copy that is 8 x 10 inches, I’ll set the scan size to 200%, with a resolution of 300 pixels. I’ll use a lower degree of sharpening (so as not to enhance the grain of the paper) and adjust the tonal settings to a higher contrast to preserve the appearance of black ink on a white background.
Preparing Images for Viewing
Whether images are intended for viewing on a webpage, making photographic prints, or including in a graphic design layout, it’s best to have that destination in mind before the image is created. I try to take digital camera images or create scans at a slightly higher resolution/larger size than I will really need for the final product. (If you’re not sure what the image will be used for when you are taking photos, it’s better to err on the side of more data than less.)
Note: It’s not a good idea to try and “upsample” pixel-based digital images. Photoshop does a decent job of trying to create more pixels, interpolating based on the colors of surrounding pixels, but you’re never actually improving the quality. For instance, if I download an image that’s 2 by 3 inches at 72 ppi from a free stock photo website, and decide that I might like to have a print made, so I size it up in Photoshop to 8 x 10 at 300 ppi, it will not gain in detail or sharpness.
Although it could work well as an element on a webpage where it would be unlikely to be viewed on screen any larger than 3 inches wide, the small size of the photo makes it unsuitable for enlargement.
On one occasion, I wanted to use a small image of a palm tree (taken with my digital camera) on a travel article page of my website, and the original size of my digital file (920 x 690 pixels) was much larger than I really needed. After making all the desired adjustments to this picture (Tree.psd) in Photoshop (cropping, adding text on a separate layer, improving the color and sharpening), I saved my corrections. Then I sized it down to 250 x 180 pixels (about 3.4 inches by 2.6 inches at 72 ppi), flattened the layers and chose the option “Save for Web & Devices.” Sometimes sharpening an image a bit more after saving at the smaller size can help add clarity to small pictures for web viewing. It is also good practice to save the web image with a different name than the original (such as Tree_Small.jpg).
On my site, I have many “thumbnail” images, or small versions, that the viewer of a webpage can click on to see a larger image open in a new window. The larger image is a separate file that the thumbnail is linked to on the page.
In general, the basics when preparing images for web viewing are: Size it to the actual pixel dimensions it will be used at on the page, at a resolution of 72 ppi. Make sure it’s in the RGB color space and not CMYK; and save it in a file format of .jpg, .gif, .png or .pdf.
Preparing images for Photographic Prints
When having prints made of digital images, knowing the recommended specifications of the photographic printer that will produce the prints can help ensure quality results. For instance, a photo lab may prefer that the files you submit be in RGB color mode, in .jpg or .tif format, at a size no greater than 20MB, and sent by e-mail or provided on removable media such as a CD or flash drive. Be sure to specify the file names of the images that you wish to be printed, and the size and quantity desired of each image. Cropping, sizing to the print dimensions (such as 4 x 6 inches) and rotating images to the desired orientation (horizontal or vertical) that you want the actual prints to be will give you further control over the final printed product.
Frankly, “trial and error” is the best way to get a true understanding of what you can expect from each print device or service when it comes to color balance, density and sharpness. However, the cost of making repeat trial prints at small sizes is usually negligible (often less than 25 cents per print) so feel free to experiment.
Preparing Images for Print Media
Important considerations when your file is destined for print media (such as desktop printers, catalogs, and newspapers) are: determining the proper dpi, converting the image to the CMYK color space (or greyscale), and considering whether ink density is an issue.
For output devices such as web-offset printing presses, laser printers, and desktop inkjet printers, figuring out the appropriate ppi (and dpi) along with image size can help ensure the highest possible quality of the finished print.
File resolution is sometimes referred to as dpi (dots per inch) instead of ppi (pixels per inch), although technically when referring to the digital file, ppi is more correct. Dpi is used when specifying device resolution, as many output devices produce images by printing with very tiny dots.
When digital images are rendered on a printed page, these “dots” have spaces between them, and the spaces are counted as well. 300 dpi translates to approximately 150 ppi. 300 dpi is a standard for printing photographic images because the dot pattern and any white space between the dots is not readily visible at a reasonable viewing distance.
For example, if you wish to have an 18- by 24-inch poster or sign printed on a large-format inkjet printer that has an output capability of 600 dpi, you could size the image file to the exact dimensions you want the printed piece to be, and set the ppi to 300. If printing this file as a 5 x 7 on a desktop printer (a typical LaserJet prints decent quality images at 300 dpi), you could size it to those dimensions and set the ppi to 150.
Some print devices require converting the file from RGB to the CMYK color space. Red, Green and Blue are the primary colors of light which computers use to display images onscreen. The majority of printing presses create pictures using a different set of colors, the primary colors of pigment: Cyan, Magenta, Yellow and Black for a “4-color process” or “full-color” printing. Keep in mind that especially vibrant, rich colors may not translate well from RGB to CMYK, and that printing inks are not capable of creating the full range of colors that are possible on lighted screens.
Printing and publishing firms have additional specifications to be followed in order for the images to reproduce with optimal quality on a printed page. For instance, a magazine may require that image files be submitted in PDF format, sized to the desired printed dimensions, at 300 ppi.
Ink density can be an important factor in quality when an image will be reproduced in a newspaper, or when designing a page layout for a catalog or magazine. (Newsprint paper absorbs more ink than other surfaces, so it is often recommended that density not exceed 230%). To determine the ink density of your image in Photoshop, move the eyedropper tool across the darker areas of an image and view the Total Ink Readout values in the Info panel. It is recommended to do your image editing in RGB, and then under the Edit menu, select Convert to Profile and create a custom CMYK setting with the proper Total Ink Limit.
For example, when I create the design layout for pages of a product catalog, I use the Adobe InDesign layout software, and place digital photos edited in Adobe Photoshop combined with vector-based logo artwork created in Adobe Illustrator on the page. The text will be typed in on the InDesign page, and the final layouts are exported as high-resolution PDF files, ready for submitting to the printer.
Knowledge, Success and Satisfaction
A grasp of the possibilities and considerations for creating quality digital images can lead to better photography and the most sensible file management. Optimizing the appearance of your images and understanding output options can make your webpages and printed projects appear more professional.
For a more in-depth discussion of some of the topics I’ve covered, here are some great resources:
Digital Photography:
http://learndigitalphotographynow.com/
http://www.photoxels.com/digital-photography-tutorials/fundamentals/
The Digital Photography Book (Volumes 1,2,3,4) by Scott Kelby
Image editing in Photoshop:
http://www.photoshopessentials.com/photo-editing/
The Adobe Photoshop CS5 Book for Digital Photographers by Scott Kelby
Photoshop-Just the Skinny, Second Edition (PDF or Printed Book)
Understanding File Types:
http://www.digitoolkit.com/file%20formats.pdf
Preparing Files for Output:
http://www.dummies.com/how-to/photography-video/digital-photography/printing-6.html
http://www.mediacollege.com/graphics/01/
http://designinstruct.com/print-design/a-guide-to-preparing-files-for-print/
Overall, a basic understanding of the terminology and procedures of digital imaging can lead to wiser choices and more satisfying results—whether taking pictures, scanning, saving, editing, printing, or sharing your images with others.
My partner and I stumbled over here from a different page and thought I should check things out. I like what I see so now I’m following you. Look forward to checking out your web page again.