“A question just came up at the happy hour, and none of us know the answer. Standard resolutions in the web and print world are 72, 300 and 600. None of these are natural squares, which assuming a regular dot layout grid seems… well, confusing?”I’m going to paste my reply as-is below. Several people found it quite useful but now it largely walled-up inside a Yahoo group archive. Since it’s a largely unedited stream-of-consciousness kind of post, I’d be glad to take questions about any and every aspect of what I’m now posting.
Why is the web 72 dpi and print 300 dpi?
In early 2008, a great question was posed on a midwest Adobe User’s Group list I belong to:
The real answer to the question is that monitors are more expensive than paper.
Hi Rachel: I just posted a “100 Funny Typos” post the other day. A lot of visitors that find BonFX do so through this long post. Take a look at all the resolution questions over there:
http://localhost/wordpress/100-funny-typos-from-my-graphic-design-blog-stats-bonfx-logo-designer-graphic-designer/
A few of my favorites:
“can you print online images at 300dpi?”
“converting from 72 dpi to 300 dpi to print”
“does it take longer to scan 300 dpi or 72 dpi”
“film resolution dpi”
“how to go from 72 to 300 dpi for printing”
“how to print a web page in 300 dpi on paper”
“how to print on 300 dpi”
“if the web is 72 dpi why are higher res images better quality”
“jpg is 300 dpi but opens at 72 dpi”
“photoshop resolution 72 dpi to 300 dpi”
…and quite a few more. I add my own little comments to just about every typo or strange query. Have a look!
Some questions will never, ever, stop being asked ;).
“72 dpi is a rough conversion from 72 picas (…)” – from this I understood that 1 screen point (pixel) equals to 1 pica (12 points in print)
“12 pixels on a mac screen should be the same as a 12pt font printed out. 72 pixels printed from a mac should be one inch.” – here it is a 1:1
I’m more baffled than before reading I guess;) Where am I wrong…?
The original intention was to make 72 pixels be equal to one inch but that turned out not to be feasible. Ask me a question to help clear this up for you – I’d be glad to try and answer for you!
Try this though: draw 12×12 pixel box in Photoshop. Now type something in Arial at 12 pts. Accounting for decenders and ascenders, a 12pt font takes up pretty much exactly 12 pixels of vertical space.
You don’t have to totally get it to just know now that screen resolution came from typography. The connection is of more historical than pragmatic value at this point, since technology often starts from a given historical precedent, but moves on from that foundation. Bits and pieces of history might remain, but they remain only as history. For instance, I don’t pour molten bits of lead into various heights of molds when I increase my type leading in Illustrator or InDesign. But 200 years ago, that is in fact what I would have done.
The web is not 72dpi.. nor any other dpi value.. the web is pixels.. and in fact, you can change an image’s dpi from 72dpi to 300dpi in photoshop or other photo editing sofware without problems.. the only difference is that you have to know what is the target print size and if you have a large enough image, there will be no problems.
@ Tom: It’s kind of funny how many people don’t get this. This was just posted at clientsfromhell.net a couple days ago:
2010-06-19
Designed a simple web banner for their etsy.com shop and a few days later…
Client: “The banner looks terrible its all fuzzy and you cant read it.”
Me: “Thats odd because Im looking at your etsy shop now and it looks great.”
Client: ”No not that one, I also had it printed into a 1.5 meter long banner to hang over my stall at the market. Looks horrible!”
I empathize with how confusing it is for people. The web has no resolution per se, but the default standard for web graphics is in fact 72dpi.
For instance, when you export graphics from Photoshop or Fireworks for web, you can’t change the resolution as it defaults to 72 PPI, or pixels per inch. The confusing part is that it really means pixels per printed inch, because dot density of CRT or LCD screens of any flavor all vary greatly.
The new iPhone for instance has a density of over 300 dots per inch, the same industry standard for images for offset printing.
@Douglas
I think that the fact that you don’t have the option to change the dpi in photoshop’s “save for web” is because it’s pointless to change the dpi for a graphic that will be displayed on screen. 1dpi or 100dpi will both show the same on the web.
But you can still change the dpi in photoshop from 72dpi to 300dpi provided that you have a large enough image in pixels targetting the print size right?
@ Tom:
Yes, 1 or 100 dpi shows the same on the web. But you would never go from a truly web-ready file from a production website and change it from 72 to 300 dpi, unless you mean to print a very tiny version of your graphic.
Let’s say you have a 900px wide image for a banner on your website. If you changed it to 300 dpi, the image would effectively be 3 inches across, down from the “big and wide” version you see on your screen. The 72 dpi image will print at 12.5 images across but the 300 dpi one will print at 3 inches across, if you tried to include the file in a print design program like Illustrator or InDesign. 72 dpi is still the baseline, albeit an arbitrary one, for measurement on the web, which is why “save for web” graphics from Photoshop and Fireworks open back up at 72 dpi and not something else. You can bypass “save for web” and put your 300 dpi image on the web in your website, but that doesn’t do anything except make people that don’t quite get it all kind of confused.
@Douglas
So let’s say you have an image on your computer that is 3000px wide @72dpi. You want to print this image at 10inch wide. You can just change the dpi from 72 to 300 in photoshop and it will be just fine. So the answer to “can you go from 72dpi to 300dpi” is yes, isn’t it.
If the image is on your computer at 3000px wide, that’s fine. But the question that befuddles people is how to go from 72dpi – from a web optimized graphic – to print. The answer is you can’t do that if the image reduced for a web page and clearly visible on the site at 100% at 72dpi.
Let’s exclude cases where there might be a photo gallery with a preview image.
Let’s just say they want to use the “banner” from their website on a tradeshow booth or something. They will get the banner from their website and try to print out at “hi res” or “300 dpi” and don’t get that you can’t blow it up. They think that because they can see it clear on their screen, they can see it clear if they blow it up too. That is where the misunderstanding always comes in.
I used to manage a pre-press department for a print shop. I dealt with this question about 10 million times, and people where always baffled why they couldn’t just “take their logo from the website” and print it huge on to something, or even on their letterhead.
The key is that if it’s been reduced to fit on your screen and you are seeing it truly at 100% on your screen (not resized in HTML using width or height attributes), it’s not going to be useful for printing at 300 dpi, unless you want it really really tiny.
Douglas: Your statement “The web has no resolution per se, but the default standard for web graphics is in fact 72dpi” is totally contradictory.
Web graphics display as x pixels wide and y pixels high, period.
Peter: Pixels and DPI don’t have a fixed correlation. Pixel x and y heights depend on the DPI of the screen of the device you are using. Over time, we’ll see all screens reach “Retina Display” density of 300 dots per inch or greater, like the iPhone 4. So, indeed, the web has no fixed resolution that corresponds to inches. It depends what you mean by resolution. When print designers talk about resolution, the specifically mean what is the DPI of the image at 100% of it’s printed size. For instance, a 300 dpi image that is one inch across is the same as a 100 dpi image that is 3 inches across.
Do you mean points when you wrote pica in the opening of your response? I thought 12 points = 1 pica, 6 pica = 1 inch or that 72 points = 1 inch. It looks like you’re saying 72 pica = 1 inch, but that would be a foot (72 pica = 12 inch).
Yes, Ian, that was an obvious typo I missed. Thanks for pointing that out! I fixed it above. Your math is right, and now that first sentence makes sense 🙂
Thank you Douglas for all of this detailed info. If I use 300dpi images on my website instead of 72dpi, will viewers have difficulty seeing them?
If you use a 300 dpi image and don’t set the image height and width, it could look huge. Now that we have devices with retina display ability out there, including new MacBooks, it’s getting time to figure this out. I can’t address it here, but you might want to search phrases related to “how to make web pages for retina display”. Lot’s of people are talking about this now. For the time being though it’s best to save images at 72 dpi at the exact height and width you want them to appear on your page, so that you don’t necessarily have to set height and width on the image to compensate for an image that is too-high of a resolution.
I must respectfully point out that, a lot of younger graphic designers were raised working on a computer and dealing with RGB visuals only – an increasing number have absolutely no CMYK/print experience.
It’s been my practice to create whatever visuals I can as vector, then rasterize either high res or low res – based on the final deliverable. If vector is not an option, I ALWAYS create a 300 dpi (RGB mode), layered .psd file as my master – you can always dumb-down the resolution, you can not always/rarely increase the resolution for print or other needs.
Why? Because inevitably if you don’t, you’ll end up with a library of low res images THEN the client will think, ‘hey, could we get a poster, manual, etc…?’ Then you are left with using the low res for print (completely unacceptable) or have to recreate at a higher res.
/My 2 cents
//27+ yrs working in the industry
This is very true Steven. I still do the same thing when working on a PSD for print. You can’t quite do that (build hi, export lo) with web assets because of pixel averaging when reducing like that, from Photoshop (bitmap graphics, that is). But, as people do more DIY graphics for their websites and apps, the age-old resolution question doesn’t go away more. It seems to be the opposite. All that said, I try and build 100% vector as much as possible, even if it’s slightly “inconvenient”. I got burnt enough times early on to learn that it’s vastly superior and time saving to go vector whenever you possibly can, and export bitmap at the end, or as part of a workflow. I’m huge fan of Fireworks, and there are things Fireworks can do in vector mode that are just onerous to do as a bitmap. I also thought the “bad” trend of using Illustrator as a web layout tool was going to die off. That too has really gained a foothold as a decent web comping tool. Nothing is perfect though 🙂
Here is how to find the DPI of your monitor:
1. Measure the width of your monitor, in inches (The I in DPI is inches). For example it might be 19 inches
2. Find out your resolution setting (For example 1920 if you’re set to 1920×1080, which is common)
Divide the pixels (dots) by the inches. In the example above 1920/19 inches means the monitor is about 100 DPI.
Remember to measure the width, and not the diagonal.
Another example, Apple Thunderbolt 27″, 2560 pixels wide, and 23.5 inches wide (again, width, not the diagonal of 27!) 2560/23.5 = 109 DPI.
The “DPI” of a monitor is commonly called pixel density.
A K, thanks for posting that – very good info! I wouldn’t have guessed a Thunderbolt was that low. However, on a related note, a rule of thumb for printing large color signage was to shoot for about 100 dpi for viewing at at least a couple feet away. This is about the same as a desktop monitor, including the Apple Thunderbolt!