Follow Me On Twitter for more great technology stuff!First, why should you care about understanding DPI & Resolution? In short, if you are going to print something (particularly of quality) and are every tasked with optimizing images for the web it’s important to know just a few basics about how images work on the web. More importantly, if you are ever going to hire someone to develop collateral (a brochure, flyer, …) for you, they’ll likely have requirements you won’t necessarily understand and not everyone is good at explaining them. So what follows is a very simple explanation of what you need to know to make the whole process a little easier.
First of all, it begins with a good picture, no matter what the source. I use iStockPhoto.com for stock and take a lot of my own pics. If you are looking for resources to help you improve your own pictures even just basic ones shot with a point and shoot camera take a look at Photo Nuts & Bolts.
A few definitions to start with:
DPI: Dot’s per inch. The number of dots or pixels in a single inch. The more dot’s the higher the quality of the picture (more resolution, more sharpness and detail,… )
Resolution: The easiest way I can explain resolution is to say that more resolution means an image displays more detail (or is capable of displaying more detail). Higher DPI means higher resolution.
Print: 300dpi is standard, sometimes 150 is acceptable but never lower, may go higher for some situations.
Web: 72dpi, always.
Ok, so how do you apply this new found insight?
If you are sending someone images to use for print (again, that brochure you are having made) and they tell you the images are “too small” odds are the resolution wasn’t high enough. The image might look great and huge on your computer but is actually really small when printed out. To add to the confusion, your monitor resolution will also determine how big the picture appears to you when viewing it on your computer. The same sized monitor set to 800×600 while show an 800 wide by 600 tall image as a full screen image. On a monitor that is 1600×1200 the image will only take up 1/4 the screen.You might have thought it would take up half but it’s actually going to be 1/2 as wide and 1/2 as tall (so 1/2 times 1/2 = 1/4). Long story short, the image will look much smaller on that screen but the image itself is still the same size. Since print displays at 300dpi the image looks still that much smaller.
Here are a couple of quick examples to show you the difference, no matter what your monitor resolution, it’s all relative!
The first example below has a lot of detail and is at 300dpi (even though the web is 72dpi this works for example purposes)
The second example is at 72dpi but scaled up to the same size so you can see the difference in detail. The actual image would be about 1/4 the size when you go from 300dpi to 72dpi, but at the same height and width is where you can actually see the difference.
Hopefully this has helped you get a little clearer on the differences between DPI, resolution and why if you have someone do something for you in print there will be different requirements than for the web. It’s also why that digital camera with higher megapixels takes better pictures than one with lower, it gives you more resolution to capture more detail.
Another important note about monitors, even though 72dpi is standard for the web monitors have slightly different resolutions depending how you have the monitor set and how big the monitor is. For example, a 19″ monitor set to 1024×768 will show 70ppi (pixels per inch, monitors use pixels which are square not round but pixels and dots for the sake of this conversation are otherwise analogous). By comparison a 19″ monitor set to 1280×1024 will have a resolution of 87ppx which means you fit more on the screen and get more detail.
Side bar: image files with higher resolution (dpi) will also have a bigger file size because they contain more data. Start with the biggest images you can but when putting images on the web they should be set to 72dpi, it’ll save you a ton of bandwidth and they’ll load faster. Yes they’ll be smaller than the original but should in most cases be plenty big because of monitor resolution (ppi) sizes.
Ok, one last thing, don’t confuse “image size” with “file size.” Image size refers to the dimensions of the image (pixels, dots, width, height, …), file size is how many kilobytes or megabytes the image is.
Any more questions on DPI, PPI, Resolution? Ask in the comments and we’ll try to clarify.
{ 22 comments… read them below or add one }
Hi Scott,
Thanks for clarifying the issue around optimizing images for web and print.
Our company is moving to single-source publishing for one of our products. The documents are created and maintained in Word and run through an HTML conversion process for the online version and converted to PDF for print publishing. With this in mind, how should we optimize the images used in the document to ensure print quality AND keep file size at a minimum for downloading. Our print publishing coordinator would like to see the files stay at 300 dpi, but is that reasonable?
Thanks,
June.
June, That is a good question! Since I never really do that I’ll give you the best answer I can but there may be better alternatives. I can see two ways to go about that:
1. Create your newsletter in Word with full resolution images (300dpi) and convert that to a pdf for printing. Assuming no settings in Word or Acrobat are set to change anything you should get 300dpi images in your pdf so it’s print ready. Next, convert the PDF to HTML (rather than the word doc). This is where I throw out my disclaimer, I don’t really know of a great utility for converting a PDF it to HTML while maintaining formatting, optimizing images all the while spitting out text/html not just full images of the PDF pages. I would there there has to be a utility to do that but I don’t know of one. I would ask your printer if they know of anything. The key (in the case of this discussion) is to find a utility that also spits out the images at a web ready 72dpi. They won’t be perfectly optimized but should be sufficient.
2. You can always run 2 work flows. Gather your iamges, write your text. Drop your text and full resolution images into Word to create your high-quality PDF. Create a second version of your pics scaled to 72dpi and drop those into your html newsletter, content management system,… along with the same text and you’re done. Two branches of the same stuff. You’ll end up with two sets of images and it is more work but you’ll have much more control over the output and get exactly what you want on print and web. Personally, I keep multiple copies of lot’s of images for this very reason and once you get it down it’s not that big of a deal. For some additional hints see my other post “Easily Resize Images for the Web and Email which might give you some ways to more rapidly optimize your images.
Hope this helps and let us know if you come up with another/better way to do this! I’m sure lots of people have the same issue.
Scott, thank you so much for your immediate and detailed response. I’ll present these options to our print production and web coordinators and see what they think.
I know that 72 dpi is the standard for web, but do you think it would be really awful to insert compressed JPEGs at 300 dpi into the web document? Or perhaps look at 150 dpi as a compromise?
June.
June, happy to help and another good question. The real issue is that if you keep our images at higher resolution than 72dpi the file sizes will be bigger. It may not affect the users experience viewing it on a monitor (better or worse) but the pictures will take longer to download, your page “weight” will be unnecessarily high, you’ll use more bandwidth (which can mean increased hosting costs) and theoretically page load times (which will be longer because of the larger than necessary images) has been linked to SEO (only one of many factors but I tend to believe it does have some effect). It can also lead to a higher bounce rate on your site or people not having the patience to wait for things to load. By themselves, none of those factors may be huge but added up they matter. Image optimization is very important on the web.
You may also have copyright considerations. Probably not a big issue but without knowing more about your situation, someone is less likely to utilize one of your images in print if it is a low resolution than if you provide them a full high-res image. I’m now stretching it a bit but without knowing more about your business it “could” be a factor as well.
Thanks for your response, Scott. You’ve laid out some really good points to consider. I’ve never come across information related to page load times and SEO, but it is definitely worth looking into. In any case, you’ve given me a lot to work with.
Much appreciation,
June.
Hello Scott,
Interesting article. I am programmer and have little knowledge on preaparing images for print. But now I must preapare some newsletter for print. There is little problem, I have one banner that have 72DPI resolution, and that have to be in header on every page. Is there any way in which I can preapare this image to correctly show in print ?
roboto – unfortunately you can’t really go up without loosing resolution. The only way you can get the image you are looking for is to start with the originals and work at a higher resolution. There are (supposedly) ways of resolving “up” but I think they really just fake it, which in some cases might work but I’ve never really played with them since the results I’ve seen always still looked less than optimal.
All that said, if your 72 dpi banner is big enough you might be able to get away with it but if it was originally prepared for web use you might be out of luck.
Hi and thanks for the great article!
I need to design some small ‘iconic’ images that will display for the company if they choose to print them and use them for web.
Can you please tell me: If I design in CYMK at 300dpi – then use Photoshop to convert the images to sRGB at 72dpi – will they be useful for both print and web purposes? (I’m using black and white)
Thanks a bunch!!!
Cindy
I should clarify.
If I save the original set (CMYK,300dpi)then use the ‘Save for Web’ function in Photoshop to make a second ‘set’ (convering to sRGB and 72ppi), then provide them with a Print Set and Web set of images – I’m certain the print set will be fine – but is that all I need to do to make sure the web set will be fine also?
Thanks!!
Cindy – Let me start off by saying I’ve never used the “Save for Web” stuff in PS (which version BTW?). I would assume that will work fine but make sure your web images come out big enough, when they get converted to 72ppi they’ll be smaller than their 300dpi counterparts.
Thank-you Scott. That’s what I’d gathered, guess I was wondering if there is a way to convert print images for web without changing the size. (Otherwise I have to design each one from scratch twice.) Do you know of a way or do designers just design from scratch each image, one for print, one for web?
(Photoshop is CS4) Appreciate your help!
Cindy,
I just start with images that are sufficiently large. Since you can always shrink it down but you can’t (effectively go up). So you should only have to create 1 image and then size it accordingly.
Thanks for taking the time to advise – suppose I’ll learn by doing. Have yourself a great day!
Here is the low down:
1. Printing: You always want twice the resolution of whatever your output device. Most computer printers output at 85 dpi so your files need to be 170 dpi at 100%. 150 dpi is a magazine standard which means your files should be 300 dpi. If you go into a high-end art magazine, your files could be as high as 600dpi.
Always check with the specs from the printer.
2. Image Size: Your images within your file need to be at the right resolution when printed at 100%. So if you are designing a magazine page, all your images should be 300dpi at 100%.
Now if you have an image that is 150dpi, you can use that image reduced in size 50% or lower. Anything over 50% will not look good. Conversely an image that is 600dpi can be increased up 200% with no degradation.
I will make all my images the right resolution in photoshop so I am not constantly doing the math with different-sized images.
ALSO, if you have an image at 100% but you need to tweak it bigger, you have about 10% wiggle room before the image starts to degrade.
3. Web : The lowest standard 72 dpi at 100%
James – Awesome response! Thank you… always good to be in the presence of a true expert.
Yes, thanks a bunch for your very informative post!! Probably could have paid $100.00 for a workshop which taught little more than that – appreciate your time! I feel much better about d.p.i now… but wondering if I should have taken this job at all when spending hours reading tuts on color modes and file formats for print vs. web images.
My client wants a set of images she can a)drop into a word processing program and print on a home printer b) drop in a word processing program and print professionally and c)use as part of a web-site design.
In a new document created in CMYK for print, Photoshop will only save in .tiff, .pdf or a photoshop variant file type. A .tiff won’t drop into Microsoft Office Word and I’ve read many apps. do not support its format. The only way to save as a .png (which lets me drop into a word processing program is to use the Save for Web and Mobile Devices function – which seems fine except it changes the color to RGB (and dpi to 72 but I can rework that later).
This is off the topic of this thread but getting a little anxious here so thought I’d try asking anyhow: Will RGB or sRGB (when using black and white) work with home printing and professional printing although it is not ideal? If not.. is telling Photoshop ‘do not manage the color in this document’ an option?
(The creative stuff is fun but I suppose anyone can do it. Its the technical aspects I’ll be going to school to learn…)
Best Regards,
Cindy
Thanks for the clear article Scott. I have a different question. I am having rare manuscripts digitized onto CD, but the director of the archive is limiting the resolution of my images to 150 dpi because she is afraid that I might simply print the manuscript and add it to an existing library, like that of a university. My concern is that 150 dpi resolution will be too low for the handwritten text to be legible on my screen. They are essentially digitizing a standard-size 12-inch book, with black handwritten ink, and I will be reading it in Adobe Reader at 100% zoom either on a 15-inch or 24-inch widescreen monitor (though I do hope to have the ability to zoom in on some words that are especially difficult to read). Bottom line: do you think 150 dpi will read legibly?
Thanks very much for your time,
Brian
Department of History
UC Berkeley
Brian,
As James mentioned 150dpi is magazine standard (so ideally your files would be 300) but black text on a white background should be easily readable at 150 dpi. Most of what has been discussed here is photographic types of images with much finer detail that what you would experience with black & white text. I think you’ll be fine. It may not be optimal but I don’t think you’ll have any trouble reading it.
Hi Scott,
I will be printing out a photo image to have a print size of 21 x 15.5″. In photoshop it now has a resolution of 1000. Before printing I will be superimposing a text article that currently has a resolution of 600 (and image size 30 x 25.6″ in photoshop). When printed, the text is supposed to be smaller than the picture. I have tested the superimposition of these two files in photoshop and the sizing and spacing appear correct on the desktop. Are these two files compatible for printing? Or do they need to have identical resolution, etc?
Many thanks, Diane
Diane, look at the dpi resolution for each image. When you say “resolution of 1000 or 600″ I assume you mean dimensions. If they are both 300dpi (for example) then you're doing an apples-to-apples comparison, if one is 300dpi and the other 72dpi you'll have issues.
Since they are both in photoshop you should be able to merge them and see whether the proportions are what you want. This is particularly true if the text is still in vector format and hasn't be rasterized yet.
Scott, you're correct, the resolution I referred to was dimensions-ppi. How do I determine the dpi of each image?
Rasterizing doesn't appear to be an issue. The text was scanned as a picture document and worked on as such.
I did merge the two and the proportions are exactly what I want. I guess the clear way to ask the question is: Will the merged image print out the way it appears on the screen?
Thanks again, Diane
Hi scott,
I'm currently working on a 4m x 4m project that's to be printed on sticker.
.
I made a big blunder by accidentally vectoring my work in illustrator file 72 dpi, and I copied and pasted the vectors on to photoshop to edit and but the photoshop file is in 300 dpi. Will it be clear? or would it still be pixelated when printed
Hope to hear from you very soon!
Thanks!
Serena
{ 2 trackbacks }