You need to know your graphics. Have you ever browsed through a nice brochure and come across a fuzzy graphic? Or visited a website and waited a long time for a huge image to download? And when that image finally downloads, it is unnaturally stretched? These problems are created when people create content without knowing about these three graphics basics: file types, file sizes (as in pixel dimensions), and resizing.

Why should you care? Because when you hire a designer to put together your website, or you work with an agency on a brochure, or your professional association wants your photo or logo to include in their newsletter or their signage, you will be asked for a file and might be asked to make sure it is a specific type or size.

UPDATE: I was recently asked for this information is a form that my client could easily send out to her colleagues — so  here is a version of this article in PDF form.


File Types: Raster or vector?

All digital images can be divided into two categories: raster and vector.

Raster images are photographs, scanned images, and images made up of dots (pixels) of varying values.  The larger or sharper the image, the larger the file size. Best for photos. Typical raster file types include JPG, GIF, and PNG. Often created by Adobe Photoshop (.psd) or captured with a scanner or camera. If your designer asks for a photo, send a raster image.

Vector images are those that are drawn using drawing packages and are made up of drawn lines, shapes, and points. Best for line drawings, logos, and computer-generated images. Because the computer stores data about lines and points rather than every individual pixel, a vector file can be scaled to any size without increasing file size and without degrading the image quality. Best for non-photographic images such as logos, because the computer can generate the image in multiple sizes for you, ensuring the crispest possible image. Typical vector file types include EPS. Often created by Adobe Illustrator (.ai). If your designer asks for a logo, send a vector file (if you have it).

Graphics file types

Following are some of the different file types you may encounter.

  • JPG – (raster) the most common type, used for photos
  • GIF – typically used for lower-resolution photos or for drawn images. Common for web graphics. Supports transparency
  • PNG – Can be used instead of JPG or GIF, supports transparency
  • EPS – a portable vector format, good for sharing logo files
  • AI – an Adobe Illustrator vector file.
  • PSD – an Adobe Photoshop file (hopefully with layers!)

Size topic #1: Do you want pixels with that?

When you’re talking about photos, you’re usually going to be dealing with JPG files, and then you need to be aware of how many pixels the file contains — so get out your calculator.

You often hear design professionals talk about dpi — or dots per inch. This term is a leftover from analog press days. What they’re really talking about is pixels. That term “dpi” tells you, for every inch of the graphic, how many pixels there should be. For example, a 300 dpi image has 300 pixels for each inch of the graphic. So if you know that your image is going to be printed at 4 inches wide by 3 inches high and the designer tells you it needs to be 300 dpi, that means the image needs to be a minimum of 1200 pixels wide (300 x 4) by 900 pixels high (300 x 3).

How many pixels are enough?

This is a generalization, but a good cheat sheet for starters:

  • Web and PowerPoint projects: 100 dpi.
  • Large-format printing (the wall of a tradeshow booth or large sign): 100-200 dpi
  • Standard business print work: 300 dpi minimum.
  • Art prints (or other high-end output): 600 dpi minimum.
  • Photo editing (use the highest-resolution images you can get): 1200 – 2400 dpi.

Size topic #2: Size does matter

It’s best that you use images that are big enough for your needs but not much bigger than necessary.

Too Little: Let’s say you have an image that is 300 pixels wide by 500 pixels high, then you decide to print it to a full 8 x 10-inch page. Doing the math (300 / 8) you see you’re using just 37 pixels for every inch of the width of your image — which will be very fuzzy indeed. For good quality in printing it’s best to have about 300 dpi — so if you want that 8×10 printout to look good, start with an image that is at least 2400 pixels wide (300 * 8).

Too Much: The more pixels in your image, the larger the file size will be; and the more room it will take on your disc and the longer it will take to download from a website. Let’s say you want a 2″ wide by 4″ high photo on your website. Knowing that web images should be about 100 dpi (or certainly no less than 72 dpi), you should use an image that is no more than 200 pixels wide (100 x 2) by 400 pixels high (100 x 4). Yes, you can get more detail and quality from a larger image — but in most cases, unless a person zooms in on the image, that extra quality won’t matter. Don’t make visitors to your website wait for downloads of large images if they don’t have to.

Resize with care

My final point is this — when you resize an image, be careful to resize it proportionally. In most programs this means that you hold down the shift key as you drag the corner of the image. If you don’t have graphics tools for resizing your images, try PicResize or Google for “online image resize” to find other options.

Moral of the story

You don’t have to be a graphics expert with expensive software to get good results. Know the basics and nobody has to know that you’re not a pro.

Tagged with:

2 Responses to Know Your Graphics – or Look Like You Do

  1. Hank Scorpio says:

    Not a bad rundown.

    Although your “minimum” specs are incorrect for print artwork.

    Always consult with your print vendor on what resolution to make raster images or a minimum.

    Typically lithographic printing is done by breaking an image into “halftone patterns” and this is measured in Lines Per Inch.

    The halftone pattern is rotated, and this gives us an indication of what the minimum PPI is for images.

    The 300 PPI myth comes from when as a safeguard using a RIP images were “screened” at an angle of 45 degrees using 150 LPI, and this meant people were multiplying 150LPI x 2 = 300 PPI.

    That formula is incorrect though – minimum resolution is in fact 150 x 1.41 (or 1.5 to keep the math simple) = thus you get 150x 1.5 = 220 is the “minimum” allowable for a 150 LPI.

    Different printers use different LPI depending on the print. Some use 175 LPI and some use 200 LPI for doing high-end prints, like art catalogues or high-end magazines.

    Even given that 200LPI x 2 = 400 PPI minimum for art stuff – I don’t know where 600 PPI minimum comes from?

    Morale of the story – for sending to a printers, large format, litho, flexo, screen, digital, et al. printing methods it’s best to consult the printers.

    Why multiply it by 1.5 and not 2? Well halftone patterns are contained in a square halftone cell. When any square is rotated 45 degrees it is now 1.41 times longer from corner to corner.

    That’s just basic trigonometry :p

    Anyway – nice article – but best advice is to consult the printers on minimum PPI for raster images.

  2. Kathleen says:

    Absolutely true, Hank — an incredibly important point: If you are going to print, ask your print vendor what they recommend. This article is definitely just the “rules of thumb” — but what your print vendor says will always trump the rules of thumb. :-)

Set your Twitter account name in your settings to use the TwitterBar Section.