Understanding DPI, Resolution and Print vs. Web Images

170 SHARES

Why should you care about understanding DPI & Resolution? Because if you are going to print something (particularly of quality) or are ever tasked with optimizing images for the web, knowing a few basics will save you a lot of time and give you the best results.

Alternatively, if you ever hire someone to develop print materials for you or build you a website, they’ll likely have requirements you won’t understand and not everyone is good at explaining them.

Read on for a simple explanation of what you need to know.

It’s important to begin with a high-quality image which means the highest resolution and image dimensions you can get. When it comes to source images, bigger is better, because you can go down in size but not up without losing quality.

I use several online sources for free and paid images and take a lot of my own pictures. If you are looking to improve your own pictures take a look at Photo Nuts & Bolts.

Definitions (in serious layman’s terms):

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. Resolution is not “size”, but it’s often confused with it because higher resolution images are often bigger, but that doesn’t necessarily have to be the case.

Print: 300dpi is standard, sometimes 150 is acceptable but never lower, you may go higher for some situations.

Web: 72dpi or 96dpi. Technically this “old mantra” is misleading, but we won’t get into that level of depth here. Accept it for now and let’s move on.

Let’s see it in action…

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.

A monitor set to 800×600 will show an 800 pixel wide by 600 pixel 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 even though the image is the same size.

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 our 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

300dpi example

72dpi

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 (lenses and other factors being equal), because 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, but everything looks smaller.

Side bar: image files with higher resolution (more 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.

One last thing, don’t confuse “image size” with “file size.” Image size refers to the dimensions of the image while file size is how much space the image takes up on a hard drive (kilobytes or megabytes).

Any more questions on DPI, PPI, Resolution? Ask in the comments and we’ll try to clarify.

All Comments

Loading Facebook Comments ...

Comments

  1. June says

    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.

  2. says

    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.

  3. June says

    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.

    • says

      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.

  4. June says

    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.

  5. roboto says

    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 ?

  6. says

    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.

  7. Cindy says

    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

  8. Cindy says

    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!!

  9. says

    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.

  10. Cindy says

    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!

  11. says

    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.

  12. Cindy says

    Thanks for taking the time to advise – suppose I’ll learn by doing. Have yourself a great day!

  13. says

    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%

  14. Cindy says

    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

  15. Brian says

    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

  16. says

    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.

  17. Diane Kitchen says

    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

  18. says

    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.

  19. Diane Kitchen says

    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

  20. serena says

    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

    • says

      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!)

  21. says

    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

    • says

      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

  22. grace kan says

    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.

    • says

      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.

      • grace kan says

        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?

        • says

          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.

  23. Jessica says

    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

    • says

      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

  24. Kim says

    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

    • says

      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

  25. Mia says

    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

  26. Bala says

    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

    • says

      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!

  27. Naftali Klein says

    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

    • says

      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.

      • says

        Great!
        I think what she wrote almost answered my question.
        I’m doing a lot of graphics mixed with photographic art to complete my
        web images No Print.
        I want to share these with my web viewers
        displaying the highest level of detail possible
        and with the highest level of quality possible is very important
        If I upload a 288 DPI image (size=1152 x 1152) to my server
        When my viewer visits that image on the web page
        will that image display at the original 288 DPI (Size=1152×1152) ?
        or will it display at 72 DPI (size=1152×1152) ?
        or maybe even 72 DPI (size=288×288) ?
        Regardless of the uploaded DPI value
        will the web forever reduce my image’s quality to
        72
        D
        P
        I…….:( I hate sevens when they with two’s

        I sincerely appreciate your insight. Love your blog.
        thank you
        Domino

        • says

          Domino,

          The only place an image with that high resolution will stand out is if someone is using a retina (or a few other) high resolution screens. For the web 72 or 96 is still generally optimal with a different image still being served up for people on Retina displays. The reason is, you want to see the high quality on Retina but if someone is on a “regular” screen they won’t see all the added detail but the file size they have to download is significantly larger because of all of the extra data. If you are serving up image specifically for retina, try 2x your chosen webstandard and save 300dpi for print.

  28. Inna says

    Dear Scott!
    Thank you for your article!
    I have a question, I hope you’ll help me to understand.

    If I have to give the client a photo for viewing on a monitor, what settings should I choose?
    If I do not know in advance – what is the screen resolution, what size. It is important that the photo was not too “heavy” and that it can be placed entirely on the big screen.

    If I give the following settings in Photoshop CS 5.1:
    w – 1920 pix
    h – 1200 pix
    resolution – 72 ppi

    They will be sufficient? Or should increase the resolution up to 150 ppi?

    Photos – not for online posting, but for home viewing on a monitor.

    Thanks in advance!

    • says

      Inna, Those numbers should work fine in terms of resolution/size. If it’s a standard computer monitor 72ppi or 96ppi.

      However, with the new Apple “Retina” display, if you wanted resolution to look sharp you would need 326ppi.

      You might also create your .jpg images and then run them through http://jpegmini.com they’ll look as good but it’ll shrink the file size nicely.

    • says

      Inna, Those numbers should work fine in terms of resolution/size. If it’s a standard computer monitor 72ppi or 96ppi.

      However, with the new Apple “Retina” display, you wanted resolution to look sharp you would need 326ppi.

      You might also create your .jpg images and then run them through http://jpegmini.com they’ll look as good but it’ll shrink the file size nicely.

  29. says

    I present ocular photo lectures at State Conventions for Optometrists. Is there an “optimum” resolution or “size” to save photos to either 1) show on a computer monitor; or, 2) for an LCD projector?

    What I’ve been doing is resizing the finished photo in PhotoShop to the native size of my computer screen… that is usually either 1024×768 or higher (depending on the monitor) and save at a resolution of 8 (out of 12 in PhotoShop). This typically results in a file SIZE of around 250-350kb instead of huge 2-3megapixel size file.

    I’m aware that the bigger file SIZE would result in significantly better PRINTED photos… but that is NOT what I’m trying to do. I’m trying to resize and save photos in the optimum size that will PROJECT or SHOW good detail yet still be fast to move from disk to screen.

    My thinking is that saving photos at the same resolution as the native screen dimensions SHOULD result in good detail while still being fast to download. I typically use Power Point for the actual presentation. And saving photos at 1024×768 (or larger) still results in photos that LOOK good and are still FAST to download into PowerPoint.

    I can’t SEE any material difference on a computer monitor or projection between files saved at FULL size out of a 18mp camera and the same photo reduced to 1024×768. But if you want to PRINT the photo there is a HUGE difference in quality between the two file sizes.

    Any suggestions for doing it better?

    Thanks in advance for any suggestions you might have.

    Sincerely,
    Dr. Click

    • says

      Dr. Click,

      One think you can do is change the DPI of the raw images from whatever they are out of the camera (180dpi is common) down to 72. That will also change the file dimensions (down) out of the gate but still leave it large enough to work with and will save you a ton of file size (speed).

      From there you can resize to down 1024 which should be sufficient for most of your presentations.

      On a monitor you won’t notice much difference and since you’re not printing I wouldn’t worry about it.

      As for the photoshop setting, I usually go for 10 but it really depends on the specific image. Some will still look fine at 6 while others may have noticeable quality loss or pixelation at 10. I’d stick with what has been working but adjust for any images if there is a noticeable quality drop. The good thing about presentations is that most projectors aren’t as bright as your monitor, and people are in a room further away, so a slight loss is quality is less perceptible anyway.

      The other thing you can do is save at 10 in PS, then take the file out to http://jpegmini.com and run it through them. You’ll be amazed at how much smaller they can make your images without any perceptible loss in quality.

      Hope that helps.

  30. Joyce says

    Hi Scott, I am a decorative painter and would like to build a website myself. For me, photos are everything. I have many photos of my work, mostly shot with a Sony Bloggie. I am just discovering the whole idea of 72 dpi. How can I be sure my photos are acceptable for a website? And can they be converted if the are not 72 dpi? I would appreciate your help! Thanks for a great resource for questions.

    • says

      You can definitely convert from higher dpi to lower (e.g. from 180 to 72) but not the other way around. They will also shrink in dimensions when you do so make sure you start off with images that are large enough. High DPI images will show just fine on the web but will take up a lot more space and slow your site loading down which is not idea for a lot of reasons.

      Caveat: with the new Retina Apple Displays, higher DPI images are going to be more common but if you want to account for retina and keep things small make your images 72dpi but 3x the dimensions if you can.

      I almost always use jpegmini.com to optimize my images further now.

      To convert them from high dpi to low you’ll need some kind of tool like Photoshop (which would be overkill for only this purpose but something like Paintshop Pro might be more accessible and affordable).

      Hope this helps a little. Let me know if you have more questions.

      Also, if you’re just getting started building a site take a look at Site Setup Kit. They’ve done a great job of making it easy to get a site up and running. Not sure if it’ll be the look you’re looking for but give it a look.

  31. Nah says

    Scott,
    Thank you for the very useful information.
    I was wondering if you could tell me on how to go about preparing print ready ebooks that are all destined to be printed on A4 but the book will be A5 (half A4).
    Do you know of a tool that would take raw text and prepare the ebooks in such format making sure that enough gutter is left and also collating the pages so that the left and right side of the A4 paper make the two sides of the book….
    Thanks!
    Nah

  32. albert says

    Dear Scott,
    I want to print a high quality portfolio. All the images would be of 12” X 8″. My 14 MP D-SLR provides sufficient resolution for the mentioned prints at 300dpi. But, some of the photos are cropped for aesthetic purposes. These photos, therefore can only provide prints upto 9″ X 6″ at 300dpi. Now my question is, for 12” X 8” prints, should I upscale the resolution to print at 300dpi or downscale at 250dpi and keep the resolution unchanged.

    Please explain me the effects of both the methods.

    Thank you,
    albert

    • says

      Albert,

      It’s not clear to me why you’re considering upscaling dpi but perhaps what you mean is simply changing the size? Either way, if you go up you will loose quality. Depending on how much you go up it may or may not ber perceptible so I’d experiment first and see. In my experience you can increase a photo by about 10%, depending on the content, before the lower quality becomes noticable. But that is just a guideline, every photo will be different.

      If you want the highest possible quality, I’d print a 9×6 at the native resolution (not clear to me if it’s already at 300 or 250).

      • albert says

        Thanks for the reply. What I meant is, I somehow want to print at 12X8 (so that the portfolio doesn’t look uneven). Is it fine if I just increase (upscale) the photos to match 12X8 (considering the upscale is <=10%)

        Or is it worth to increase the pixel size (making effective print resolution less than 300dpi), which will eventually increase the image resolution and then I can print at 12X8 (albeit, at lower dpi).

        Regards,
        Albert

  33. chris peterson says

    Scott,
    I need to purchase a photo scanner to scan old photos from my parents. Can you tell me what features I should be looking for and what dpi is best? what brand? I don’t want to spend a fortune for this scanner but don’t want to buy one that the photos won’t be clear either.
    thank you,
    chris

    • says

      Chris,

      I’m not really an expert on scanners but here’s what I’d recommend. You want a scanner that will do up to 600dpi and depending on how many photos you have you may want one that will feed batches of photos, or at least allow you to easily hand feed them through. I’ve used one similar to this Kodak photo scanner in the past and it worked well (bought for my dad and he scanned all the old family photos and they turned out great).

      Something like that is meant for photo’s and should cost you under $100.

      Hope that helps.

      Scott

        • andy wilson says

          Hi

          Very useful article – thanks. I’m producing artwork for print that is 300dpi but I want to incorporate one drawing that is 72 dpi. The whole piece is made up of pencil-type drawings and has a rough and ready style. So – difficult for you to answer since you’ve not seen it – is the 72 dpi bit likely to fit in ok?

          Thanks

          Andy

          • says

            Andy, Produce it at 300dpi but knock it down to 72 for the web (save as a different version). Remember, you can keep the dimensions the same (e.g. 500px wide and 500px high). Uploading a 300dpi photo just means more data that the web browser won’t show slowing things down for now reason.

  34. tina says

    if a client wanted a JPG for a website Viewing only rather than a web site printing, would you give them a 300ppi or a 72ppi image? Why?

    • says

      Tina –

      Give them 72 but make sure the dimensions are what they need. If you use photoshop you can control all of those parameters under Image > Image Size.

      300 will only make the file size bigger with no added benefit for web-browsing which will slow down their website.

      I’d also run the image through http://jpegmini.com to decrease the file size further (file size only, it won’t change dimensions).

      • titi says

        if we use the pic only for web, i think the dimension is only related to pixel size, but ppi. 300×200 pixel pics with either 72 ppi or 300ppi are the same dimension and image size on the web. correct me if i am wrong. Thank you

        • says

          Titi, you are correct. You can have a 300×200 pixel image at 72 dpi or 300 dpi. No typical reason on the web to use 300, just make it a 72 dpi image.

          But keep in mind if you have an image that is 300×200 at 300dpi and change the setting to 72 dpi it may shrink the image depending on the application you use, so be sure to reset the pixel dimensions to 300×200 before saving.

    • says

      Dollie,

      Can’t tell by what you’ve given me. How many pixels wide and tall is it?

      If your image is 700 wide by 630 tall, then you would divide both of those numbers by 70 to get 10 inches wide b 9 inches tall.

      If you were at 300 dpi (printing resolution) then your image would be 2.33 inches high by 2.1 inches wide.

  35. Arps says

    Hi Scott

    Can you please help me? I am researching wedding photographers and most as part of their packages offer ‘high resolution print ready’ images on a CD OR DVD. Can you tell me what size photos I should be expecting I know I am not being done over?

    Thank you in advance for your guidance!

    • says

      Depends entirely on what you want from them and what your plans are for printing.

      For maximum quality you want 300dpi resolution. As for size… are you planning to print a 5×9, or something larger.

      So if for example your photographer is shooting with a Canon 5DMk II camera, the camera shoots 21.1 megapixels (5,616 × 3,744 pixels) which at 300dpi would translate into an 18.72″ by 12.72″ print. But you’ll really need to talk to the photographers and get the specifics on what they provide and line that up against what you are hoping to get.

      As far as the web display goes, you’ll drop the image to 72 dpi but will still have plenty of size.

      That camera is what John P. shot our wedding pictures with. You can see them here.

  36. tonie says

    Help. Doubt you’ll get this in time. I’m creating a photo book and am in an awful time crunch. The company that will be printing the photo book says the photos should be 1600×2000 and adjust the dpi accordingly. I’m scanning in photos using an Epson scanner. It asked for resolution, and when I set it at 1600 it tells me that seems way too big. Am very confused. Is 600 dpi enough to send photos to shutterfly to print in a book? Help please.

    • says

      Tonie,

      I think you’re confusing dpi with image size. What you need for them is an image that is 300dpi resolution at 1600 x 2000 (side dimensions).

      If you’re using Photoshop you can change all of those settings in Image > Size. But keep in mind you need to start with images that are at least those dimensions to start with. If you take a 300dpi image that’s 1200 x 1600 and try to make it 1600 x 2000 you’ll degrade the quality. You can go down but not up.

      Hope that helps.

  37. Donna says

    I have been asked to submit a picture for a magazine at 300 dpi. My camera (Canon EOS 60D) shoots 70 dpi) How do I change that for the magazine’s purposes?

    • says

      Donna – The 60D will actually shoot at 240dpi in RAW mode. Shoot in raw and then import the pics into Photoshop (or whatever tool you use). You won’t likely see a difference when you’re looking at it on your computer but you will when it prints out. In this case, DPI is just telling the image how to pack the information together.

      Now, you might be able to change existing images that are 72dpi to 300dpi in photoshop but they’ll print much smaller so depending on the original image dimensions it might be too small for the magazine.

  38. Liz says

    Hi Scott,

    Great article and very informative. I have a questions around pixels. I am helping a friend who is a photographer create a web banner for Etsy and hired a graphic artist to design it. The original photo was 1950 x 1288 pixels and needed to be resized/reduced to 760 x 100 pixels. So the graphic artist cropped it and also zoomed on the image. My photography friend isn’t happy with the quality or clarity and thinks it needs to be digitally enhanced. So can that be done or is there an explaination I can provide her as to why the image quality change when reduced – either regarding the pixels or dpi?

    Many thanks,
    Liz

    • says

      Liz – Not following exactly what happened there but what I would have done would be to shrink the image to the required size first. If you’re using Photoshop, resize the image to 760 wide and constrain proportions (check box) and PS will automatically set it to the proportional height.

      Next, I would crop the image using 100% of the width and 100px of height and move your selection up or down to get the area you want. It can get a little tough since you’re also changing aspect ratios but not much you can do about that.

      It sounds like they cropped it then zoomed in on a part of the image which could definitely reduce the quality. Unfortunately, there isn’t going to be a “digital enhance” that will make it better. You’ll have to start over with the original image and follow the steps I outlined above.

      Hope that helps.

      • Liz says

        Scott, thank you for taking time to get back to me – much appreciated.

        I talked to the graphic artist and he said he simply makes a blank Photoshop document at the pixel dimensions it needs to be at 72 dpi. Then opens the high rez original file next to it and drag it in as a layer. Then resizes the layer, making it smaller to fit within the new document. AND never scales up because of degradation – the “zooming” you are warning about.

        Honestly, the banner looks fine to me but my photography friend thinks the quality and clarity is off. So not sure it is her monitor or she doesn’t understand it is going to change because it was reduced and lost pixels.

        Thanks again!
        I talk to the graphic artist and he said he

  39. Edgar says

    Hi, my question may have already been answered before but just for clarification, if I’m working on a 28×22 inch poster that’s going to be printed at 300dpi, it would be impossible for me to use images that are at 72 dpi right? When I stretch out a 72 dpi image for a 300 dpi poster it looks terrible, but when the actual poster gets printed out, wouldn’t the poster itself be smaller than it looks on my computer screen? Because at 300 dpi, the entire poster on my screen looks really huge.

    If so would the stretched out 72 dpi images look as bad as they do my screen, which has a resolution of 1366x 768.

    That’s really my question, the image quality looks bad on my screen, will it look THAT bad when it gets printed out?

    -Edgar

    • says

      Edgar,

      Every instance is a little different but in general, yes, if a 72 dpi image looks bad on your screen it’s going to look bad when you print, especially if you print it at full size (28×22). It will print smaller than it looks on your computer screen but if you’re telling the printer to print at 28×22 it will but with an image that is only 72 dpi.

      • Edgar says

        Sorry I’m little confused with the last thing you said: “if you’re telling the printer to print at 28×22 it will but with an image that is only 72 dpi.” I won’t be doing the printing, but all I know is that the entire poster itself has to be 300 dpi.

        But either way, when I copy and paste a 72 dpi image that’s 55 x 38 inches into a 300 dpi poster that’s 28×22 inches, the 55×38/72 dpi image looks really small compare to 28×22/300dpi image. If i stretch out the 58×38 image, the quality of the image will decrease. So there’s just no way around this right? When it gets printed out, it won’t look any better, it will look just as bad as it does on screen, even if it prints smaller than it looks on my screen.

        And also thanks for replying back to me.

        -Edgar

        • says

          Edgar –

          I don’t see a way around it since you’re starting out with a 72dpi image. In Photoshop you can try this (but can’t be sure it’ll work well).

          Image Size > Image Size
          With your 72dpi 55×38 image change the dpi to 300
          then change the dimensions to 28×22
          Save..

          Now, if the image your starting with looks bad there is no fixing that. If it only looks bad when you try to resize this might give you better results but the issue you’re really facing here is that you’re starting with less “data” than you need to print at the resolution you want.

          And you’re welcome.. I try to reply to everyone!

  40. Sophie says

    Hi Scott,

    I was wondering if you could clear something up for me.
    When you originally wrote this article in 2009 – optimum print dpi was 300 and web dp was 72 or 96.
    You state not to use 300 dpi for web due to SEO purposes and loading time, however 4 years on and the internet speeds have increased somewhat dramatically.
    With quicker internet speeds, whats the largest dpi would you now recommend for both print and web to get quality images?

    Thank you,

    Sophie

    • says

      Sophie,

      While the idea of a 72dpi monitor is a misnomer, most web images are still uploaded at 72 dpi to keep the file size down. Speed still matters. Ideally, you want your page to load (or at least appear to do so to the user) in 2sec or less (general rule, not written in stone). DPI is actually a print convention and has less bearing on monitor viewing than you might think in most cases.

      When I first started building sites the convention was to try and keep page weight to 50k or under. Now it’s more like 1M (again, a guideline, not a law). But we use a lot more javascript, bigger images, etc… that also adds to the page weight. So we really have kept up with the increase in bandwidth, it just a matter of how you use it. Personally I like big images so I try to keep pages light so I can use bigger images as the visual anchor.

  41. dan says

    Hi ive created a template in photoshop the idea is to print out the template and glue onto wood then cut around the template. The problem im having now its time to print, one of the templates measures 110mm x 85mm as by the photoshop ruler but when I print its really tiny I need it to print off to the same measurements in photoshop so the printed version is 110mm x 85mm. Any suggestions? Cheers Dan

Trackbacks

  1. [...] 5. Understand the difference between print and web resolution. The only caveat to the previous tip is this one – you must understand the difference between a file that is print-ready versus web-ready. Be sure that if you are planning on printing the piece being designed, you’ve purchased images and provided your logo/photo in a format that will be crisp and clear. Essentially this means that any photo/artwork included should be at least 300 pixels or dots/inch(dpi) - if your piece is only intended for the web than the dpi can be lower.Click here to visit a site that effectively explains resolution for all of us who don’t necess… [...]