Home Forums Networks & Cross-Platform Networking Di image need to be 72 for the web?

My designer sent me a large 300 dpi file.
I reduced it to 72 for the web.
only thing is: it's a bit small. I want it a tad larger.

Does the ol 72 dpi for the web still hold?
Should I have her redo it?

if I have it 150 or 100 dpi, it would probably be the size I want. thanks!

The image will be displayed at it's pixel resolution regardless of it's dpi, so size it to that metric. If the image is downloaded and displayed elsewhere or printed, then the dpi may come back into play.

thanks, so the whole habit of making images 72 for the web is not really important.
and then the save to web feature in photoshop should take care of that anyway?

trying to sort people out on the difference between "dpi" (pixels per inch) and "resolution" (total pixel count) usually generates confusion.

The best way to look at DPI is, "how much can you magnify the image before it starts looking blocky?" The higher the DPI, the more detail that's in the image, and thus the more you can magnify it before you start seeing where the pixels meet.

Resolution is how many pixels there are. Resolution by itself doesn't determine physical size. You can have a 500x500 picture that shows up the size of a basketball or a postage stamp when viewed by an app that honors the image's DPI. 500x500 image at 72dpi should be a square about 7" x 7", regardless of what it's displayed on. If the image lacks the DPI tag, it's just a 500x500 pixel image and will probably get displayed at the DPI of the screen itself, which can vary - being whatever the screen's resolution is currently set to.

My screen is set to 1440x900 and is 15.2" diagonal so it's about 100dpi. If your image is too much less than that, the pixels in your image will have to be 'stretched' a bit to be displayed at the correct physical size on my screen. (for every inch of image, you provide 72 pixels of color, and I have to put them on 100 of my screen's pixels, so I have to stretch and spread out the pixel data, and each of your crisp image pixels are going to have to spread between 2-4 pixels on my screen to varying degrees, making for a less sharp image)

I have no idea where the 72DPI standard came from, but 72 isn't too much lower than 100 so it's acceptable for screens around my dpi. You wouldn't want to go much below 50 I wouldn't think, and you need to include DPI information in your image if you want images to get displayed at the correct size on the other end. 72's been around for awhile now though, since long before LCD displays were common and this high of DPI, so it wouldn't surprise me if at some point the "standard" got bumped to match everyone's better displays.

Do web browsers work better with 72DPI images? faster rendering? (faster loading anyway!) I have no idea. At any rate, the higher your DPI, the larger the file, the slower the loading, and the better quality image you are sending. I like it when I see an image on a page that I like, and I can click on it and open the image in a new window, and click the (+) magnify to show it at full res, and see a much more detailed picture. That's a case of the image being saved at a much higher DPI than my monitor, (or NO dpi at all and just a high res picture that was SIZE tagged to scale it down) so it displays on my screen by default smaller than what it "really can be".

Oops got on a little tangent, "only thing is: it's a bit small. I want it a tad larger." Larger filesize? taking up more width/height on the web page? These are two very different things, if the above doesn't clear up the difference for you, let me know.

thanks V, I'll absorb that over time!

That's another bit of Mac-related history as detailed in Computer monitor DPI standards. It didn't hurt that the original ImageWriter dot matrix printer printed at an easily scalable 144 DPI, which helped giving Apple the WYSIWYG edge over the PC’s 96DPI.

ya, not trying to bury anyone but there's a few key things you have to get mentally sorted out before you can really know what you need and know how to express it properly to others.

Then it's your turn to confuse people.

The short answer:

For the Web, resolution does not matter. It never mattered. No Web browser ever even looks at DPI. Every Web browser throws DPI away.

The only thing that matters to a Web browser is the total number of pixels. If you have a picture that is 800 pixels by 600 pixels at 72 dpi, and another that is 800 pixels by 600 pixels at 300 dpi, and a third that is 800 pixels by 600 pixels at 10,000,000,000 dpi, all three of them will look absolutely identical on the Web.

Always scale images on the Web by total number of pixels. Never look at, or even think about, DPI.

Disagree. The best example you can find is when you browse to a web page that has an image on it, and when you mouseover the image, you get a magnifying glass. Clicking on the glass causes the picture to instantly be redisplayed at full resolution. (ignoring DPI) The smaller image was being displayed at a specified size or DPI, doesn't matter which, it was overriding the size the browser was going to display it at.

I don't see it very often tho and am having trouble producing an example off the top of my head. They're usually easier to spot when you load a page and one or several of the image on the page load very slowly, progressively. Mouseover it and it'll probably be a mag glass, because the person that wrote the web page didn't quite understand the difference and has the actual image at some silly high resolution when they should not, and are just wasting bandwidth.

These are usually a result of the 'size' tag though, not of true DPI settings. the DPI inside the picture itself are ignored, but the size the page tag specifies is honored. Maybe that's what you meant?

I've also seen other cases where I didn't get the mag glass, and I control-clicked on an image and "open image in new window" and it opened a new window and displayed the image a great deal larger. In cases like that, no image tags apply and the image will be shown unadjusted/unscaled.

That only happens if you browse directly to an image. not to an HTML file, and the image is bigger than what will fit in the browser window. The browser scales it to fit the window. Again, DPI is ignored. ONLY the image's dimensions in pixels is considered. An image that is 2,000 pixels by 2,000 pixels at 72 DPI will behave, and display, identically to an image that is 2,000 pixels by 2,000 pixels at 300 DPI which will behave and display identically to an image that is 2,000 pixels by 2,000 pixels at 10,000,000 DPI. The browser looks at the pixel dimension of the image, looks at the pixel dimension of the window, and scales the image down to fit the window. When you click the magnifying glass, the browser scales the image up to its full pixel dimension.



What's happening there is that the HTML on the page is scaling down the image. Say the image is 800x800 pixels. The HTML contains code that looks like

img src=theimage.jpg width=200 height=200

So the 800 by 800 pixel image is forced to be scaled down to 200 by 200 pixels. When you open the image in a new window, the browser displays it at its real size, 800 by 800 pixels.

Again, this behavior will be identical, and the result will be exactly the same, for an image that is 800 by 800 pixels at 72 dpi, an image that is 800 by 800 pixels at 300 dpi, and an image that is 800 by 800 pixels at 10,000,000 dpi. The only part that matters is the 800 by 800 pixel part.