Source Files
Sometimes your web designer or graphic designer will ask you for the “source file” for your logo, a brochure or another graphic, so that they have a high-quality graphic to use as the basis for a design.
If the item is a photograph, the designer will want the file that came directly out of your camera (as opposed to one that has been made smaller for the purposes of putting on a website or emailing). Depending on the camera, the source photograph is likely to be in either .jpg, .jpeg or .tif format.
If the item is a graphic design, the designer may request a source file; by this we mean the file that the graphic was originally created with. Graphics are often created with one of the Adobe suite of applications, such as Illustrator, Photoshop or InDesign. The file extensions of these applications are:
Adobe Illustrator: .ai
Photoshop: .psd
InDesign: .ind
Sometimes your designer will ask you for a vector graphic file. Vector graphics files are usually in one of three formats:
- Adobe Illustrator: .ai
- Encapsulated Postscript: .eps
- Scalable Vector Graphic: .svg
- Portable Document Format: .pdf
However, just because a document is in PDF format, doesn’t mean that it contains your graphics as vector drawings, because PDF files can contain both vector and bitmapped graphics. Here’s the difference.
Bitmapped Graphics
A bitmapped graphic is made up of lots of little rectangles (known as pixels) of solid colours. You may not notice those rectangles when the image is displayed at its intended size, but if you zoom in on a bitmapped image, you can start to see the rectangles. In the example below, the first picture is shown at its desired size, while the second picture is zoomed.
All photographs taken by digital cameras and files created using Photoshop are bitmapped. THe following types of files are bitmapped:
- .jpg
- .jpeg
- .bmp
- .gif
- .png
- .tif
Vector Graphics
A vector graphic is actually specified mathematically in the file. It can be zoomed indefinitely large without showing any pixels because it can be scaled up mathematically by the application that is doing the zooming. For example, if you have a PDF that contains only vector graphics, you can keep zooming it and zooming it and you won’t see any jagged edges made up of solid colour rectangles. Vector graphics are useful for your designer because they can save the graphic at any size needed without degradation in the quality of the image. (Bitmapped files can also be resized, but in some cases the resized image will be noticeably poorer in quality than the original.)
PDF Files
A PDF file can contain all vector graphics, all bitmapped graphics, or some of both. They easiest way to test if a PDF file is all vector graphic is to zoom it up large (try 800%) to see if rectangles start to show.
Resolution
Sometimes all you have is a bitmapped graphic (for example when you’re using a photograph). In that case, you’ll want to provide the webmaster with the highest resolution file you have. The resolution refers to the number of pixels (rectangles) across the width of the image and the height of the images. For example, the photo from your 8 megapixel camera might be 3264 pixels wide and 2448 pixels tall.
Online vs Print
The resolution of your photographs is particularly important when your designer is creating something that will be printed out, like a business card, magazine ad, or brochure. This is because paper is capable of showing much more detail than a computer screen and we want to take advantage of that feature. Although the number of pixels displayed per inch on a computer monitor varies from monitor to monitor, the standard is 72 pixels per inch. Compare this to printers, which can print 300 or more dots of ink per inch.
So if you have a photo that is 1080 pixels wide, it would display around 15 inches wide on a computer monitor, but only 3.6 inches wide on paper. So that photo is going to be quite useful for your website, but not so useful if you want to create a poster.
Doing the Math
Let’s say you have a photograph to be displayed on your website that you want to be around 3 inches across. The width in pixels will need to be at least:
3 inches x 72 pixels per inch = 216 pixels wide
If you want that same photograph to be printed out on paper around 3 inches across, the width in pixels will need to be at least:
3 inches x 300 pixels per inch = 900 pixels wide
Something to be aware of is that images often don’t scale well to sizes that that are just a bit smaller (say 80%) than the original image size. If you want a 900 pixel wide image to be printed, it’s better to give your designer a 2700 pixel wide image than a 1000 pixel wide image.
Also, note that bitmapped images do not scale up well. The rectangles are going to start showing. Although there is software on the market today that purports to “res up” (increase the resolution) of bitmapped images, there are significant limitations to what is possible and the image is likely to be blurred by the process. (More more information on that, read this article on About.com).