DPI: TRUTH OR LIE?

[mgeduld]

`I don't know what you mean by "glory,"' Alice said.

Humpty Dumpty smiled contemptuously. `Of course you don't-- till I tell you. I meant "there's a nice knock-down argument for you!"'

`But "glory" doesn't mean "a nice knock-down argument,"' Alice objected.

`When I use a word,' Humpty Dumpty said in rather a scornful tone, `it means just what I choose it to mean--neither more nor less.'

`The question is,' said Alice, `whether you CAN make words mean so many different things.'

`The question is,' said Humpty Dumpty, `which is to be master-- that's all.'

Marcus Geduld
{ email me } { visit me }

[whittonj]

How many pixels in an inch? How to figure it out for your monitor: measure the horizontal in inches(rather than diagonal) of you visible screen. Check your monitor to see what the resolution is set at. Divide the horizontal res. by the horizontal inches... my monitor is 11.5 inches wide (on a laptop right now) and is set at 1024 pixels wide- which makes about 89 pixes in an inch. If I create an image that is 89 pixels wide (AT ANY PPI) and hold a ruler up to my screen it is 1" wide. What this means is you create graphics on an average (between 72 and 96ppi) and hope it looks ok when viewed in a web browser. The other thing you can do is say 800x600 is average fro someone viewing your wesite-- if a graphic I make is 400 pixels wide- it takes up half the screen. Of course it only takes up 1/4 the screen of someone's set at 1600 wide.

I'll have to talk PhotoShop because that's what I use the most. And I'll have to blame Adobe for the ppi myth because they print it up front in all books and help files and then tell you the exact opposite in serious documentation. Here's the statements they make:

1. " If you’re producing an image for online display, the image resolution only needs to match the typical monitor resolution (72 or 96 ppi)."

2. "In Photoshop, image pixels are translated directly into monitor pixels"

#2 is the only correct statement they make on this subject, ever.

Which means if you set a 10 pixel by 10 pixel graphic to 1 pixel per inch it will take up a 10x10 pixel space on any screen- whether there are 1600x1200 pixels on a 13 inch screen or 640x480 on a 54 inch screen. Same is true if the 10 pixel by 10 pixel image is set to 1200ppi. It only matters when you go to print. I have no idea why they have made this such a huge deal in trying to explain it.

WHAT you need to watch out for- if you're adding text to graphics the point size of the text will match the PRINT size in photoshop- not the visible size.

The RESAMPLE IMAGE feature in PhotoShop is another interesting bit. By turning this on when you change an image print or visible size- your computer will try to come to terms and make print size match visible size or vice versa (even though it does not take into consideration your monitor size). Turn it off and let the print size and visible size work independantly of each other like they should (FOR WEB GRAPHICS- print people ignore me).

[Klaus Nordby]

Well said, Mr. Carrol, well said!

K
www.xaraxone.com/FeaturedArt/kn/
www.klausnordby.com/xara

[Mark Goodall]

Just some quick comments

1) As Klaus and others have explained several times.
For the current browsers the DPI setting of bitmaps on a web page is irrelevant, even for bitmap file formats, such as JPEG, which have DPI info ( a GIF file does not have DPI info, it does have info for the number of pixels x&y, colour depth etc ). Browsers IGNORE DPI information, they will render the image according to the number of pixels in the image. So for the moment one could justifiably say that the DPI is completely and utterly irrelevant to web designers.
All the photoshop stuff suggesting you set the DPI to 72 is irrelevant if this info is not stored in the file format! It is relevant if you wish to PRINT a JPEG image, but photoshop is not to know that user is going to use a JPEG for the web only, so it will suggest setting the dpi to 72.

2) I have a pet theory that one day in the future browsers will NOT ignore this DPI information and will provide a zoom on to a page facility. When this happens web pages will be able to include high resolution bitmaps AND control the size of these images, this is what DPI control gives you. With this control a designer could place what would appear to be a dot on a web page, that, when magnified by altering the zoom setting of the browser window, would reveal a full resolution photograph. So thumbnails, and the like, would be a thing of the past, hi-res images would appear at a small thumbnail size and the user would use the zoom facility of a browser to see the fully detailed image. Of course, this would require all viewers to have high bandwidth web access to download the vast images quickly, but this will be coming soon.

3) There is an alternative to placing DPI information in the image and still achieve the behaviour described in 2). HTML provides the web page designer with control over the dimensions of the image irrespective of the number of pixels in the image, this is done with the width and height properties of the image tag. This, in effect, provides resolution control, as the width and height can be defined in mm, cms, as well as pixels. ( Though I don't think current browsers respect these units because, as we know, this requires the browser to know the physical dimensions of the monitor screen, 14", 20ft ?, so some sort of standard would be required, perhaps a new unit? )

4) What will we do when monitors have 10000*10000 pixels?
We will then have to include resolution information in images or in the HTML to ensure that the images and pages don't appear as tiny dots to the user at 100%. The current behaviour of browsers ignoring DPI information is just a result of the low resolution of the output device ( the monitor ).
When this time comes Klaus will have to explain at length why resolution information is important or why the units for width and height have to be a in a strange new unit.

Mark Goodall
Xara Ltd

[This message was edited by Mark Goodall on December 12, 2001 at 04:27.]

[pduggan]

<BLOCKQUOTE><font size="-1">quote:</font><HR>HTML provides the web page designer with control over the dimensions of the image irrespective of the number of pixels in the image, this is done with the width and height properties of the image tag.<HR></BLOCKQUOTE>

In my experience, upsizing an image through HTML width and height invariably results in hellish looking images and downsizing is pointless because you'd be better off with a smaller image (and file size) in the first place. So don't do it, folks — just match your width and height attributes to the actual pixel dimensions of the image. (But don't leave out these attributes — not only are they required by the HTML specifications but they have the very practical benefit of 'holding the place' while the text loads around them.)

Peter</p>

Peat Stack or Pete's Tack?</p>

[Mark Goodall]

I agree completely that current browsers make a mess of re-sampling bitmap images when the actual bitmap image's width and height and the image tag's width and height properties differ, and therefore a page designer should ensure they are the same. I was just making the point that it is possible to set these differently to create an effective dpi of an image, and potentially might be used in future to achieve the effect I describe.

Mark Goodall
Xara Ltd

[This message was edited by Mark Goodall on December 12, 2001 at 06:25.]

[This message was edited by Mark Goodall on December 12, 2001 at 06:41.]

[whittonj]

Using Internet Explorer 6.0 go to http://www.visitkc.com/photos/71-Pla...ors-Center.jpg

((Actually take any huge picture (larger than your screen size) and just look at it in Internet Explorer 6.0 (open a jpeg or gif file- no html))) -- check out what happens. IE 6 shrinks jpg's and gif's to fit in the window. By rolling your mouse over the bottom right hand corner of the picture you get a zoom tool. You can view actual size by clicking on it.

When the hell did they do this? I'm guessing this is a new feature. The first few times I got this I thought someone had written some cool Java to thumbnail real time (I spent 10 minutes trying to steal this source that resize images to the available browser space-duh.)

This works for images - I haven't checked all the details- I assume that if you imbed a jpeg in html - no matter the size, it will appear full size. Off to test really big pictures.

[pduggan]

Although it's true that IE6 shrinks bitmaps to fit (when viewed direct rather than as part of a page), the quality does suffer, come to think of it, and I find myself heading straight for the zoom tool to restore them to their proper dimensions anyway!



Peter</p>



Peat Stack or Pete's Tack?</p>

[michaelward]

I'm not a fan of this feature in IE6, the result never looks nice and when I get around to it (!) I'm going ot turn it off... in fact I think I'm going to go and hunt for that option right now...



Michael Ward
http://LeighCenturions.net

[Klaus Nordby]

Have you guys & gals noticed that this thread now has had 5,164 viewings?!?!? Surely, some kind of new record? Marcus, little did you know what you started!


K