Image Resolution for Web Design & Print Design Projects

When graphic designers and printers start talking about image resolution, most people's eyes start to glaze over. While it's true that image resolution sounds complicated and tricky (and it certainly can be!), understanding a few simple concepts about image resolution can make communicating with your web designer, graphic designer or printer a bit easier, and can make your next web design or print design project go more smoothly.

So, what is resolution exactly?
In very simple terms, an image's resolution is measured by the number of pixels or dots per the unit of printed size in the image.  When talking about screen images, resolution is stated in pixels per inch (ppi), and when talking about printed images, it's stated in dots per inch (dpi).  Why, you ask? Simple ...  screens use pixels and printers use dots.

Pixels
A pixel (or Picture Element) is simply a dot of color. When you put all of the pixels (or dots of color) together, you get the full image.   A 100 x 100 pixel image is actually comprised of 10,000 individual pixels that, when viewed together as a whole, make up the image.  The more pixels an image contains, the more detail that image will have and the more "crisp" it will appear.

Images for the Web: 72 dpi
Most computer monitors display at 72 dpi.  Therefore, when preparing images for use on a website, 72 dpi at final screen size is the norm.  When it comes to web, you want your images to be as small in file size as possible so that your pages load as quickly as possible.  Reducing the resolution to 72 dpi will help to get your images as small in size as possible.  Of course, you can put up higher resolution images on a website, but keep in mind that the more resolution an image has, the larger it's file size will be and the longer it will take to download and display on a web page.

Images for Print: 300 dpi
In print projects, resolution is key.  If the images that you include in a print project do not have high enough resolution, they will appear fuzzy, jagged, or blurry.   Most professional printers require a minimum of 300 dpi for all images at the final print size. However, some printers require even higher resolution, so it's always a good idea to check with your printer on their recommended printing resolution.  Generally, the higher the resolution of your image is, the better the quality of the image will be when printed.

Scanning Images or Digital Photos
You can certainly scan images or take photos with a digital camera for use in both a website and in print.  The key is keeping in mind what physical size the images will need to be and the final resolution needed  (for example, a 5"x7" photo @ 300 dpi in a print piece, or a 300 x 500 pixel image @ 72 dpi for a website, etc.).

If in doubt, or you don't know the final size, or think you'd like to use the image in both print and on the web, it's better to scan or shoot the image at the highest resolution and downsize it later, if needed.  Remember that, when it comes to resolution and size, you can't easily increase resolution, you can only decrease it.