In early 2008, a great question was posed on a midwest Adobe User’s Group list I belong to:
“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.
Original reply (March 2008):
[--- start reply ---]
72 dpi is a rough conversion from 72 points, which is how many points there are in an inch. There are 12 points in a pica, where we get ours standard font sizes from. A pica the traditional form of measurement in typography the old school way. The 72 dpi for screen resolution was an early attempt on Macs to get a one to one correspondence between screen resolution and “old fashioned” print measuresments. 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. PCs have always been 96 dpi, hence the reason early desktop publishing and Mac, not PC, was a natural fit.
Now, moving on to 300 dpi. This has nothing to do with the screen or monitor or anything. A standard offset press medium quality screen is 133 lpi, as in lines per inch. The next level of quality is 150 lpi. Above that is 175 lpi. It takes more time and accuracy to print higher lpi. Lines per inch refers to the number of dots in a CMYK film output, or today, direct to plate output. Offset printing uses 4 screens typically, of Cyan, Magenta, Yellow, and Black, printed in that order, to build up an image of dots. The dots from the plate are laid down at differing angles – you’ve seen this blown up in lots of pop art. Photoshop even has a filter to simulate what this looks like. Grab a low power magnifying glass and look at anything printed in your house that is color, like a photograph on a cereal box or junk mail.
Ok, junk mail is usually 133 lpi because the paper is cheap, and it’s cheap to print 133 lpi. Cheap paper absorbs ink and the dots spread, so you really can’t print better quality than 133 lpi. Try writing on a paper towel with a sharpie to get the idea.
Almost there, hang with me!
A raster file (photoshop psd or jpg or tiff) has resolution. For the web it’s 72 dpi. But for print, you need higher resolution than that. But, you only need so much. The process of translating the digital file to the “lines per inch” plate of dots (for the CMYK process) throws a lot of information away. How much does it throw away? Well, it throws away anything above about double what the lpi is. If you are printing 133 lpi, then you need 266 dpi. If you go lower than 266, you will start to actually see pixels, the square elements of the digital file, in the final output. So, more resolution = better quality to a point. Anything after 266 or so just gets tossed out. Think of a gravel factory with the big screens that sift rubble into piles. The screen lets small stuff fall through will big stuff makes it to the end. That’s the idea with print. So if you toss sand and gravel along with your hand size rocks, the sand and gravel fall through. If you just put marbles and hand size rocks, the marbles still fall through, and the hand size rocks make it to the end just the same. So why add more sand if it’s just going to be tossed out at the screening process? More resolution just means bigger files, wasted disk space, slower previews in InDesign, and longer film or plate generation times as all that data has to be processed.
So, why 300 dpi? Well, 9 times of 10, your final art might just be a tad too small. Maybe you need, after you exported the PSD, 10% more size. Happens all the time. Say there is just too much empty space in a group shot around a group of friends that you just realized 5 mins before you have to send the files to the printer. Should you boot up Photoshop for the edit? Well, if you made your picture at exactly 266 dpi at 100% of the size the image needs to be in the final layout, you really can’t blow it up without degrading quality. But if your image is 300 dpi, you have about 15% headroom where you have “extra” resolution to sop up in the final screen. Therefore, you can safely bump up images 10-15% if it’s 300 dpi at 100%.
Now, if you send a 300 dpi image at 5 inches across, but it’s going to be printed at say 2.5 inches in the final layout, you now have TONS of headroom, because it’s effectively 600 dpi because you are reducing the image by 50%. Get how that works? If you had a catalog of images that were all 200% bigger than they needed to be, you’d just be wasting DVDs or FTP time or whatever, plus making the process just slower. The goal is to print 300 dpi at roughly 100% of the final print size.
Finally, what is 600 dpi? Simple. The 300 dpi relates primarily to images that are printed in CMYK. The screens and colors make up the final image of tiny dots. But what about line art? Like a pen and ink drawing or a black and white version of a logo? The human eye needs about 600 dpi to be fooled into seeing pixel based art as non-pixelated and nice and smooth with no jaggies. If you print a logo from the web, you can see the dots on the printer. But if you print a logo at 600 dpi, from about a foot away, you really can’t see any dots or edges. But if you zoom in in photoshop, you can see how “bad” it looks. This is why 600 dpi is the baseline for laser printer resolution. Since the final print of line art has no screens involved to help the illusion along, you have to have sheer numbers of pixels to fool the eye. Beyond 600 you really can’t tell too much, but below 600 you can. It’s just that way.
Well that was one big brain dump. I hope it helps!
Doug
[--- end reply ---]
In conclusion
Yes, indeed, that was one big brain dump. Not an easy article to scan, but is worth the time to read carefully if the resolutions of web and print as of yet still befuddle you.
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://bonfx.com/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