[selowitch]

I'd like to reduce the resolution of my web images to either 72 dpi or 96 dpi because anything greater would be a waste of memory (the former is the highest dpi the Mac browsers can display, the latter the highest a Windows browser will display, if I understand correctly). But how do I found out what DPI an image is? Is PPI the same thing? That's what GraphicConverter reports as 72, but the "resolution" is still always 300, even if the image is, say, 500 by 623.

I guess I'm a little confused by all this.

Perhaps ppi/dpi is the same thing, and in any case these embedded resolutions are irrelevant and don't affect the image's appearance on the web or its filesize?

[jay3ld]

first its macs 96 and pcs 72..
second try something other than graphic converter and see. photoshop. i think even preview does it.

[mduell]

That's rubbish; my PC has a 125dpi screen, and current macs range from 85 to 112 dpi. Most (all?) browsers will display images by how many pixels they are (a 300x400 image will always take up 300 pixels in one dimension and 400 pixels in the other), irregardless of the size (in inches or mm) or dpi that the image file specifies.
If you just change the dpi, you're only chaging the dimension in inches, and the file size is the same. If you keep the dimension in inches the same and reduce the DPI, you'll have a lower quality image and it won't be the right size for your page.

[selowitch]

Originally Posted by mduell

That's rubbish; my PC has a 125dpi screen, and current macs range from 85 to 112 dpi. Most (all?) browsers will display images by how many pixels they are (a 300x400 image will always take up 300 pixels in one dimension and 400 pixels in the other), irregardless of the size (in inches or mm) or dpi that the image file specifies.
If you just change the dpi, you're only chaging the dimension in inches, and the file size is the same. If you keep the dimension in inches the same and reduce the DPI, you'll have a lower quality image and it won't be the right size for your page.

Where does the 72/96 dpi figure come from? I know it's not my imagination, but maybe that advice is out-of-date. I plead ignorance here.

[Simon Mundy]

Originally Posted by selowitch

Perhaps ppi/dpi is the same thing, and in any case these embedded resolutions are irrelevant and don't affect the image's appearance on the web or its filesize?

The former is correct, but only if you specify pixels as a unit of measurement.

Say I have an image that is 150px x 300px. If I specify an < img width="150" height="300" /> it'll display that size regardless of the dpi you set. However, other units of measurement (ems, pt, etc) ARE resolution-dependant, so that's where the 72/96 figure comes into play. BTW it's Macs that have traditionally used 72dpi screens, not PCs. PCs have always used 96dpi and I remember when the 'new' IE5 for Mac came out there was a setting to change your dpi so you could better emulate what PC users were seeing, font-size-wise.

We're told to use relative sizings now for accessibility's sake but YMMV when it comes to making relative layouts that look equally as good as absolutely-measured layouts.

[selowitch]

Well, call me crazy, but if I start out with a 500 x 750 image with a resolution of 300dpi that is 734k in size and I change to it 72dpi (using Fireworks or Photoshop or whatever) and resave, its filesize drops to like 121k. Isn't this a worthwhile thing to do as a web developer in order to save space on the server and speed up loading times?

BTW, Simon, I use the getimgsize() function in PHP to get my heights and widths, so I never have to manually input them. Makes my life easier!

[Simon Mundy]

Originally Posted by selowitch

Well, call me crazy, but if I start out with a 500 x 750 image with a resolution of 300dpi that is 734k in size and I change to it 72dpi (using Fireworks or Photoshop or whatever) and resave, its filesize drops to like 121k. Isn't this a worthwhile thing to do as a web developer in order to save space on the server and speed up loading times?

BTW, Simon, I use the getimgsize() function in PHP to get my heights and widths, so I never have to manually input them. Makes my life easier!

OK, you're crazy.

What you've done is physically alter the file size from 500px x 750px @ 300dpi - resizing it to 72dpi no doubt means your final image size is 120px x 168px which will certainly reduce the file size, as you've downsampled your file. It's not 500 x 750 anymore.

The whole idea of having dpi means it alters the amount of information that is stuffed into an inch to increase image quality. It makes less sense on a monitor than it does on the printed page, because dots per inch is a subjective measurement, based on what your monitor's viewing area vs resolution. Anyways, long story short, 72dpi is your rule 'o thumb.

PHP's getimgsize() will return an image's absolute pixel value, not a relative value, but it's certainly handy for auto-sizing your images (especially in a photo gallery).

[Sage]

I think the confusion is coming from the use of DPI.

DPI can describe the number of pixels within a square inch on a screen – a 96dpi screen has smaller pixels than a 72dpi screen, because you’re squishing more pixels into one square inch.

The other definition of DPI that people are using in this thread is in regards to printing – DPI is meaningless for web design. A 500 x 750 image with a resolution of 300dpi and a 500 x 750 image with a resolution of 72dpi will both display exactly the same on a computer monitor; however, they will differ in print. If you print out the 300dpi image, it’ll look decent; if you print out the 72dpi image, it’ll look “pixelated”.

Again: DPI means nothing on-screen, but means everything in print.

[registered_user]

DPI = dots per inch. those dots being printed dots.

PPI = Pixels per inch. <--- THIS IS THE ONE YOU WANT FOR SCREEN MEASUREMENTS

Work at 72ppi. Screw that 96ppi crap because not even MS knows why they do it.