Clicky

The Myth Of 72dpi
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

The Myth Of 72dpi

I hear on a regular basis that images for web display must be set to 72dpi (96dpi Windows). The statement is simply incorrect.
Video monitors do not work with dpi. They display pixels. To put things straight – dpi/Dots Per Inch is a set of instructions for the printer, for the spacing of the dots/pixels when an image is printed.

So let's get print products out of the way first. Lets take an image of 500px X 375px. If you set it to 3dpi and print it, the print will have 3 X 3 dots spaced across each inch. The physical size of the print will be a whopping 168 X 125 inches, but you'll need to stand around 100 yards away to recognise it.

If we set the resolution of the exact same image to 300dpi the physical size of the image (kb) remains exactly the same, but when printed it will have 300 dots spread across an inch. The print size will be 1.67 X 1.25 inches – little better than a thumbnail.

3dpi/30dpiA comparison of 3dpi and 30 dpi in print
To Scale, but not actual size
Depending, of course, on your screen resolution (ppi)

Now let's take a look at video screens. Video screens only display pixels and are set to a screen resolution in ppi (Pixels Per Inch) a common setting today is, for instance 1920px X 1080px.
Any dpi information contained within an image is disregarded. An image with a pixel size of 500px X 375px will always display at 500px X 375px – on your monitor, on my monitor, or on Joe Blogs' monitor regardless of the dpi settings. It will never change either its pixel size, or its appearance. The physically displayed size will depend on your monitor's ppi settings.

Here's Proof That Video Systems don't use dpi
Don't believe me? Then take a closer look at the two images below. The first is set to 3dpi, the second is set to 300dpi. Both are 500px X 375px.
Do you see any difference? I don't. And yes, I have my glasses on.


Bike 3dpi
 Image set to 3dpi 

Bike at 300dpi
 Image set to 300dpi 

Still don't believe me? Then drag the images to your desktop (or right-click and save.)
Don't use the clipboard function. The copy function won't copy any dpi information and Windows image editors will automatically set the resolution to 96dpi, whilst Mac editors will set the resolution to 72dpi.
Now open both images in your favourite editor and check the size and resolution for yourself.

Believe me now?

It is important not to confuse PPI with DPI.
If you set an image to a physical size of 300ppi x 200ppi (px), but set your webpage to display the image at 500ppi x 300ppi (px), the browser will need to interpolate the image (i.e. replace the missing pixels with iterated (guessed) pixels, causing the image to look pixelated. If the same image is set to display at 200ppi x 150ppi (px) the browser will have to 'throw away' the excessive pixels – causing an an image to appear unsharp.

In the end, it's all just pixels.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required