Script for resizing 72dpi images in 96dpi browsers?

[ian_6500]

Hi, Is there a way that I can have my 72 dpi-designed site shrink a bit in 96dpi browsers so the pages and images won't swell up and look fuzzy? Thanks!

[djr33]

What's a 96dpi browser? I didn't realize that existed. As far as I know, computer screens are 72dpi and print can vary based on the printer but the standard (for serious graphics work) is 300dpi. What systems use 96dpi, and more importantly what BROWSERS use 96dpi?

Unfortunately I don't have an answer for you, though maybe more information will lead toward one.

[ian_6500]

I found some discussions on the web saying that Macs display in 72 dpi whereas Windows machines do 96dpi. I was trying to find out why my web sites look enlarged and fuzzy on many PCs that I look at them on whereas they look great on Macs (which is where I built them.) I thought this might be the reason why the pages are made larger on PC machines... Am I totally out to lunch here? Any thoughts would be really appreciated!

BTW, here's my web site that I'm most concerned about: http://ianmartinphotography.com/ Note that I've used Ultimate Fade in Slideshow in the portfolio section and other places as well even if there's just one picture to display; I love how the photos fade into place!

[djr33]

I am also on a Mac, so I can't offer much about the comparison (though I could look later from a PC).

Macs and PCs do have very different graphics issues, but I have never heard anything about different resolutions: that doesn't really make sense. The question is "per inch" so it's the same dots. Any screen can display things at any resolution, but basically 72dpi is the detail level required to keep things clear for the way it is displayed on a screen.

72dpi is, in other words, the standardized assumption of how much detail you need for screens compared to how much detail you need for print resolution. In other words it might as well be presented as 72/300 or 24% resolution, for how much detail can be displayed on a computer screen compared to standard printing.

But I don't know the technical details (how this is computed, etc).


Regardless, the resolution of an image won't really determine it's quality: it will determine its size. No image has an inherent resolution: it has an inherent number of pixels.
An image that is 300x300 pixels can be printed as one inch. That same image would be approx 4 times as large (300/72) on a screen. But it would be the same pixels, just displayed as 4x4 inches rather than 1x1 inches. You can of course shrink it to display as 1x1in on the screen too, but in that case it would have fewer details at that 1/4th "resolution" version-- the 72dpi version.



Now on to the specific problem: PCs display graphics differently than macs. Without starting a (potential) argument about which is better, let's just go with "differently".
For example, PCs render crisp edges on fonts-- macs blur them slightly to make the edges smoother. The mac effect looks much nicer, but at high enough resolution (that is-- if the screen is "zoomed" or at low dimensions on a large display) it will look aliased (choppy) at the edges, and the PC version will look cleaner.
So, I believe the same kind of thing may be applied to images.

The result of this is that I think it's just an inherent property of browsers.

To display a 72dpi image at 96dpi, you can do one of two things:
1. save a copy that is 3/4 the current size.
2. scale the image to 3/4 size in the browser.

But that doesn't really make sense: again, the effect of dpi on an image is size:
an image of 100x100 pixels can be displayed at any "resolution" you want.

That's why the non-technical uses of the word "resolution" refer to pixel dimensions: that's actually a measure of how much quality is in it and what will happen when it is displayed at various 'resolutions' (IN the technical sense-- dpi).


To continue:
1. Find that source again about 96dpi-- feel free to post here, or just reread it to be sure that's what it said (and then find a way to verify it).
2. Look up some technical specs on google to find out how this all works.

But again I doubt this is really the case: it would be a much bigger issue.


--

The graphics differences I know about on mac and pc are about colors: about 216 of 256 'basic' colors are shared between the two systems for web design (like text colors, etc). For gifs this is also an issue, as things display differently. The other main issue is gamma ('lightness')-- the scale upon which lightness values are calculated is slid toward different ends on the two systems: videos appear lighter on macs and darker on pcs-- people actually will create two copies of movie clips sometimes for this reason.
I'm not sure is this is related to the current problem.

[ian_6500]

Hi Daniel,

Thanks much for your lucid and clear explanation on this. Yet again, I find this forum a great resource! I've found a smattering of similar questions around various sites and forums, yours is the best explanation. I'm going to stop worrying about it.

http://www.google.com/search?q=96+dp...ient=firefox-a

-Ian

[traq]

I looked at your website (PC/XPmedia), and the image doesn't seem too blurry or choppy. Have you considered different monitor resolutions? Stuff often looks awful when you're on an older, crt/800x600 monitor. I tried changing my resolution to 800x600 and the image did seem a lot more grainy, but I still think it's mostly just because it's a .jpg

[auntnini]

The "72 ppi MAC and 96 ppi PC" saying has been around a long time and quoted multi-times. The best sense I ever came across was in a "Real-World-series" book (I think on Photoshop CS2 or CS3). Their answer (for the Web) was to look at the pixel per width and per height measurements (e.g. 500 px) at the very top of the Image Size dialog box in Photoshop and forget about the resolution boxes at the bottom -- because Web browser screens consist of and are measured in pixels. Some display more pixels per inch. A 500x500px image on a high-resolution browser looks much smaller than it would on a low-resolution older browser that has fewer pixels per inch.

Older Web browser screen resolutions were 640x480 px or less; I think 800x600 px is slipping in favor of 1024x758 px to 1600x1200 px or higher resolution in newer browsers. [Quote from http://www.w3schools.com/browsers/browsers_display.asp on Web browser display resolution: "The current trend is that most computers are using a screen size of 1024x768 pixels or more."] Hand-held mobile devices? I have not yet come to grips with that issue.

It seems that just about every browser lets you resize the text/images with a simple Ctrl/Cmd-+ plus or - minus key.

Printing considerations, of course, are entirely different -- image resolution something like 1 1/2 to 2 dpi times printer line-screen resolution (lpi).

If you are posting original artwork or photos on the Web, you don't want to make it too easy for someone to Control/Right-click and steal a crisp copy of your work so the lowest possible resolution is best. For http://www.josephdenaro.com I ended up reducing the actual height of the images to 300px and used CSS to style them up to display 500px onscreen. I don't think they got too jaggy, and this hinders someone stealing a sharp copy.

[djr33]

because Web browser screens consist of and are measured in pixels

Right. So dpi is all but irrelevant, except that monitor physical size vs. monitor pixel dimensions settings will then create bigger/smaller versions of the same images.