I've been seeing the word 'DPI' pop up quite a lot when I export my work out in Photoshop and Illustrator. While I know that DPI stands for 'dots per inch', and that if you have too low of a DPI on an image, heavy pixellation occurs if you try to zoom in, what would be the optimal DPI for what situations?

For example (Situations):

Exporting a print A4 design

Website layout

Logo (Website only - Roughly smaller than the current SE Graphic Design one.)

I think the other answers have it covered, but just to add that technically you should be talking about PPI (pixels per inch) when you're talking about preparing images. Dots per inch measures the resolution of your print device, and is not the same thing. Also to note that this term still sticks around even where metric is used for everything else (OK, and points for type sizes).
–
e100Jan 5 '11 at 9:37

"I've been seeing the word 'DPI' pop up quite a lot when I export my work out in Photoshop and Illustrator." Where exactly? Can you give a screenshot?
–
e100Apr 10 '12 at 12:18

Agree, but 72 dpi for web layout is a best deal for font size in pt and px (in photoshop).
–
benoîtJun 10 '12 at 20:04

11 Answers
11

I've always thought DPI was somewhat of a misnomer... It really only applies if you are printing an image, otherwise, well, pixels are pixels. For an image on a site, well, it really doesn't matter, just get as many as possible, to fit the required size. Printers vary somewhat, but around 300 DPI is usually a good rule of thumb for anything around the size of a sheet of paper or smaller.

For Logos, I'd hope they are being designed in a vector program, which means the DPI can be adjusted to whatever the size is of the object.

I wouldn't consider it a misnomer (it's the dots on the paper after all) but you are correct that DPI only applies to printing and not display on a screen. I did a pretty thorough explanation on this answer graphicdesign.stackexchange.com/questions/1760/…
–
jhockingMay 17 '11 at 19:53

Specifically on PPI for web or other on-screen images: 72PPI (or 75, or 96) is a myth.

Yes, there is a figure which applications use to decide how many pixels to use to render fonts specified in points, but this hasn't got any relevance to images, other than:

if your Photoshop document is 72ppi, it doesn't matter if your font units are set to points or pixels, as they'll give the same result for any numeric value. This may be slightly more convenient, but it really doesn't make sense to use points in pixel-based images. It's like trying to make a web banner exactly 1.5cm x 10cm, or a web page exactly 12" across.

The only other situation I can think of where PPI is relevant is:

where you want to print a screen layout at the same size it'll appear on a given screen. In this case, yes, you'd set the PPI of the image to that of the screen.

Given that display resolution varies widely, this will only be an approximation at best for a given class of device, and on modern displays it's likely to be 100PPI or higher (much higher on iPhone 4). But if you're designing for a single device it may be useful.

(I think I came across one other example where images needed to be prepared at 100dpi when using MS Word to lay out HTML emails, but I really don't want to go into that again).

Regarding Retina iPhones and Retina iPads (and probably Retina Macs): Apple defines one point as two pixels, so points do matter, but not in the way @JFW is probably asking. I agree with everything you've said. If you want to make your life easier, web and app PSDs should be 72PPI, but it mostly doesn't matter.
–
Marc EdwardsJun 11 '12 at 1:36

First, try to use vectors when you can (especially for print). Vectors have 'infinite' DPI.

When you use bitmap images in your design, try to keep the original DPI and resolution. You can always export the finished product to the desired DPI. For print, this is often 300 DPI, but sometimes more.

When exporting for a web page, you need to know how big the result has to be, in pixels (the resolution). In Illustrator you can specify the DPI and this will change the resolution of the exported image.

For a photo being printed on an offset press, the rule of thumb is that you want the resolution of the photo to be twice the dot pitch of the halftone screen. For example, of you have a 150lpi screen then your image should be at least 300dpi at its final size.

Most modern LCD monitors have about 100dpi physical resolution or so.

For web site design you should have the logo as line art in some vector graphic format such as SVG or EPS. Then, render it at around 4x the size (i.e. number of pixels) you actually want it and blow up its background to 4x the size. Merge the two, and resample the resulting file back down to size. This will give you an anti-aliased logo merged into its background.

This sounds promising, I wish it were more clearly explained what is meant by "merge the two" and "resample the resulting file back down to size".
–
KzqaiOct 11 '12 at 6:07

By 'Merge the two' I mean use photoshop or some other image editor to paste the logo into the background. The image you have is at 400% (per the instructions in the posting). Now shrink it back down to 100% using resampling to antialias the edges of the logo.
–
ConcernedOfTunbridgeWellsOct 11 '12 at 8:43

The question is valid, but way too vague to be answered with any specificity. In general, the resolution you need your image to be depends on:

the type of image

the size of the final piece

the type printing technology being used

what it's being printed on

etc.

The one specific answer is web graphics: there is no concept of DPI for images that will be on a screen. You only need to deal with pixel dimensions.

When printing, you have to deal with things like the type of printing (screen printing would be lower resolution than offset lithography, for instance), the type of substrate (printing on clay coated paper would typically use a much higher DPI image than printing on newsprint would), the type of image (images printed with a line screen [such as photos] don't need to have as high of a resolution as line art would need), the size of the final piece (a billboard doesn't need the same resolution as a glossy brochure), etc.

BROADLY speaking, photographs are typically set at 300DPI. Line art somewhere between 600 and 1200DPI. Large format printing is typically 100DPI or thereabouts.

Note that the terms dpi and ppi are sometimes used interchangeably. TECHNICALLY, we should usually be using PPI when it comes to image resolutions for printing but DPI has been a long used term as well. Search for DPI and PPI on this site to see lots of discussions on that topic.

72 DPI for everything for screen (sometimes 75 DPI too). This way, the printed version of this image will be crappy or small. Useful if you want to protect your images.

150 DPI for print of small quality (demos for future prints, website etc for clients)

300 DPI (to 450) for nice quality print without high res.

As already mentioned, vector images are quite useful. First, since some professional printer can produce any dimensions from this to paper. Also, you can export them from 72 DPI for web to 300 for print from the same source.

"72 DPI for everything for screen... This way, the printed version of this image will be crappy or small." You mean in the scenario where the client only gets a printed preview copy, not the file itself?
–
e100May 20 '11 at 11:34

But when it comes to web, resolution is normally around 72 dpi.
However, when I want better quality for a logo on a website it's a matter of file format.
I use png-24 which gives better quality for a logo, jpeg for any photo.

There is no good reason to create web images at any particular DPI - you just create the image at the required pixel dimensions. The values you are talking about are to do with how many pixels are used to render fonts specified in points.
–
e100May 20 '11 at 11:24