Your designer, printer, or marketing agency may ask you for a “high resolution” image of your logo or other graphics or photos when working on a project for your company. If you are mystified by all the printing jargon, or have ever wondered why something looks great on your website but very fuzzy or blocky when printed, keep reading. In this article I hope to demystify some of the terminology around print and web images, and help you and your designer speak the same language and give you consistently good results with your projects.
Resolution is a measurement of the number of dots (ink dots for printing) or pixels (individual specks of color on a monitor) per inch – so it refers to the density of the image information. This measurement is independent of the physical size of an image. Different devices require different minimum resolutions for output.
Standard resolution for a computer monitor is 72 ppi (pixels per inch). So, a 1” X 1” logo displayed on a website is built out of a grid of 72 x 72 “dots” of light on the monitor. Standard desktop printer resolution is 300 dpi (dots per inch), so if you were to print that same graphic at 1” x 1”, the missing information will give a fuzzy or jagged look to the printed image. If you do the math, the image size will need to be reduced to about ¼” x ¼” in order to print as crisply as the 1” x 1” image you see displayed on your monitor.
Conversely, if you upload a print-resolution image to a website, there is more information than can be displayed, resulting in a large image that takes longer than necessary to download to a user’s computer. It is, however, always better to start with a larger, better resolution image and have your designer or web developer size it down appropriately for the web.
You can think of resolution in terms of a grid. The photo on the right is a print-resolution photo, sized at 1″. That 1″ therefore contains 300 pixels x 300 pixels of color information, resulting in a crisp, clear image, even shown at 150%. The image on the right is sized at 1″ at screen resolution. Therefore there are 72 pixels x 72 pixels of color information. Since the image is blown up to 600% (6″ on screen), you begin to see the pixel grid. When displayed at 1″ on screen, the image appears crisp, but if you were to print at 300 ppi, in order to go from 72 pixels to 300 in that 1″ space, the computer just fills in additional color information based on the color of the pixels already present, resulting in a jagged, blurry image.
Size is the physical size of the image, in inches, points, centimeters, etc.
A combination of size and resolution determine the sharpness of the image you see, whether on screen or printed. This is why it’s very important to supply images of appropriate resolution for printing. A small image will lose resolution as it is made larger, as the same number of points or pixels are simply spread over a larger area.
File Size is the actual amount of KB or MB (kilobytes or megabytes) the image uses on a computer hard drive. A high-quality, large size TIFF image, which is not compressed in any way, will be a much larger file than a compressed JPG image at the same physical size and resolution.
A Quick Guide to File Type and Use: Wading through the Alphabet Soup
Though it merits its own separate discussion, here is a quick rundown of some common file types and extensions, and the optimal use for each.
TIFF (Tagged Image File Format): a high quality, uncompressed file format. Every pixel of information is stored, resulting in a larger file size. Suitable for high-quality output, press printing, and other high-resolution needs.
JPG or JPEG (Joint Photographic Experts Group): a compressed file format that is “lossy”; in other words, information is lost each time the file is opened and resaved. The advantages are smaller file size, portability across many programs/platforms, and a wide range of applications including print (at high resolution) and web (at lower resolution).
GIF (Graphics Interchange Format): a compressed file type most suitable for images with few colors or those that require transparency when displayed on web, email, etc. Best for images with sharp edges such as logos, as opposed to photographs.
PNG (Portable Network Graphics): a compressed file type similar to GIF, but capable of supporting millions of colors. Good choice for display graphics and photos on websites.
EPS, AI, and PDF are vector file formats (though non-scalable images of the above types can be placed inside these file types) and will be discussed in a future article.
How to Talk to Your Designer or Marketing Agency
Hopefully this will help you communicate with your designer or marketing firm, and supply the correct type of image for your particular project. Make sure you’re always supplying the best quality, highest resolution images you have access too. It’s better to start with better quality and reduce resolution for web applications than to try to patch up lower quality images for print. If you are asking your designer to grab images off your website for a print project, the translation from web resolution to print will mean fuzzy images that are not best quality whether it’s a photograph, logo, or other image. The lost information from lowering resolution cannot be recreated when sized up.
References:
Tech Soup
iStock Photo
Call of the Wild Photo
Suite 101
Vivid Light
desktoppub.about.com
jnevins.com
You can read Part II, on Raster vs. Vector images, here.
