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.
300dpi example
72dpi example
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.
About Scott Ellis
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
Serena, If you go from 72 dpi to 300 dpi you’re probably going to loose a substantial amount of quality, it depend slightly on the over all size but it sounds like you’ll run into issues with that. (sorry for the bad news!)
I have a photo that I have edited for a friend who is wanting to print a 13×20 canvas of it but is concerned resolution will be lost. The photo is 1427×1997. I realize this is not the ideal size but will it look absolutely horrible blown up to a 13×20? I printed it out in a 12×18 and it looked great. How much resolution will be lost with the added few inches?
Thank you, Ellie
Ellie, As a rule, you can size an image up to a max of about 10% and it’ll still look ok, particularly if you worked at sufficiently high dpi. So you could realistically go from 12×18 to 13.2×19.8 in before you start to see degradation, so you are right on the boarder. Depending on the image, you might see a little loss (particularly around edges in the pictures where there is notable color change). The higher the dpi, the better luck you should have. E.g. you’ll look better at 300dpi than 72dpi.
Good luck and let us know how it turns out.
Scott
Hi scott,
I got a confuse question although has been doing the search.
Is it same DPI requirement for both pics and text on print? What is the basically dpi for printing text to achieve readability or even better quality, in terms of 300 dpi is the standard for photo print.
Grace,
I believe it would be the same for text. While text may scale differently, when it comes to printing your’re dropping bits of ink on to paper and “resolution” doesn’t know (or care) if it’s ink to create a text character or drop of sky. It’s all “images” at that point. (in conventional terms anyway).
As for true “typeography” I’m definitely not an expert but there are a lot of good resources online if you search that term.
Thanks Scott,
Yeh,,, Im currently doing a research about the typography on print design and screen design. And my area of practise is User Interface. I was doing product design for years though. I have seen you are good at mobile app right. Im looking for some live briefs to strength my understanding of UI. I was wondering if you have some briefs about interface design and could show me one?
Grace, unfortunately I don’t have any briefs on Mobile UI design. Most of the work I’ve been doing around that would be considered proprietary anyway and I’m not allowed to share it publicly.
On a side note, if you’re interested in typography you might be interested in watching “Helvetica” (Netflix it if you can). Interesting documentary on typography and they importance of “Helvetica” in particular.
Scott,
I have designed a website and am now working to code it. I have always known that 72dpi is the way to go for screen images, but just because I happened to try it, when I save my background imagery as 150dpi and preview the site- it is exactly the size and clarity I want the viewer to see. When I load the background image at 72dpi it is not crisp and there is text areas that are no longer legible. Can I design the site at 150dpi or is the a better way to get that size and clarity with 72dpi? I worry also that at higher dpi the load time may be longer? Hope you can help!
Thanks!
Jessica
Jessica,
Couple of things could be going on here. (I’ll do my best based on what I know).
You’re creating/editing an image at 150 so when you switch to 72 one of two things has to happen…either the image will shrink (dimensions, not file size) by about 50% (slightly more) or it will loose clarity (if you keep it at the same dimensions). It sounds like #2 is what is happening. You should be able to get sufficient clarity by starting at 72dpi and creating the images you want.
At 150dpi your load times will certainly be longer b/c you now have [about] 2x as much info per pixel on your image as you need. The load time alone is a reason to make sure you’re working at 72dpi from the start. Again, once you start at 150 you’ll either have to change image dimensions or loose that sharpness.
If you want to send me a couple example images (or the originals to look at) I’ll be happy to take a quick glace… let me know and I’ll shoot you an email.
Also, what are you editing in? Photoshop?
Scott
I have a question about dpi. I recently did a baby photoshoot for a friend but I didn’t realize that my camera had been switched from large memory to medium. All of my photos ended up being around 2MB and 72 dpi when I uploaded them to PSE7. I increased the dpi to 300 which in turn increased the size of the photos to around 18MB on average…but by doing that will I still get quality prints or are they going to be fuzzy or out of focus? I just need to know if my friend is going to be able to print anything from the session. I’m so frustrated that I didn’t check my camera’s setting in the first place!
Thanks for your help,
Kim
Kim –
Easy mistake to make, just remember it! As for your question…
If your client tries to print the images at the same size for the 72dpi as they normally would be able to get from 300 they’ll loose quality and noticeably so. It doesn’t mean the images won’t print at a decent size but you’re more likely to get a good 4×6 or 5×7 (for example, I don’t know the actual dimensions) than you will at 18×24 at comparable quality.
Technically you can change the image after to 300dpi but you’re not really accomplishing what you would like.
Remember you can always go “down” in res, you can’t really go up without loosing something…
Sorry!
Scott
I have a photo that I need printed at 20X24. I’ve sized it in PSE5 for 6000X7200 @ 300dpi. For some reason the image is super wide now.(almost looks distorted when compared to the original) Will it look like that when it is printed or is my screen playing with me? If is isn’t my screen, how do I fix it? I SO need help!
Hope you can!
~~Mia
oops! Sorry, I think I figured it out. Darn constrained proportions!
No problem Mia… glad you figured it out.
Is there any calculation to get the correct pixel value equivalent to the print size of the image.
For e.g. I’ve an image with the following measurements
Geometry: 933x3486px
Resolution: 500×500
Print size: 1.866×6.972
Units: PixelsPerInch
The 933x3486px is very bigger than the print size in browser view, So i need 1.866×6.972inches equivalent pixel value to get the exact print size in browser view .
Regards
Bala
Bala, In order to accomplish exactly what you want you’ll need to either resize the image or change the dpi (note, you can go down in dpi but not up (technically you can but you’ll loose resolution). You need to know what dpi you are currently at to make this work. Assuming your image is 300dpi to start with, resize to 559×2091 and that should get you there. Give it a try but make sure to keep an original copy that the original sizes!
wonderfull article and well written!
Question: you have provided 2 sample picture showing the difference between a 300 and 72 DPI,
If web pages will always display pictures in 72 DPI then both pictures should have been displayed with the same quality just the 300 DPI should be strached to a much bigger size to create a 72 DPI
Naftall –
You are correct but the point was simply to illustrate the difference in detail that can be accomplished at various resolution which I think it illustrates… however another example such as the one you suggested would also be helpful.