Images on the web are measured in pixels. Yet many people go through the trouble of setting their images to 72 dots per inch (DPI). The process of sizing images for the web is often misunderstood. The misconception about resolution in digital images bound for the web is that they must meet a certain number of dots per inch. In print, pixels per inch and dots per inch impact the size of an image on a page. DPI doesn’t apply to layout on the web. When someone converts an image to 72 DPI , they’re adding an extra step with no benefit. Web pages are measured in pixels, not real-world units such as inches.

I think items for the web sometimes get rejected over DPI issues (not being 72 DPI ) on GraphicRiver but according to this article is it not irrelevant?

From the standpoint of good web design I’d have to disagree with this article. As I understand it, the reason we set the resolution to 72dpi for web use is because that is the maximum resolution monitors can display. Using anything higher will still display ok, but results in unnecessarily high bandwidth usage and therefore increases page loading time.
I am fairly new to web design, but that was what I was taught…
Anyone else know?

I think the point they’re making here is that web items (or any images, for that matter) are measured in pixels per inch, or ppi, not dpi. Dots per inch is a resolution related to vector work, not pixel work. A lot of people just say dpi no matter what artwork it is as a way of communicating resolution, when there is a distinction between work created in illustrator vs work created in photoshop.

There shouldn’t be any technical reason for web files that aren’t 72 PPI being rejected, as it makes absolutely no difference to how an image is displayed on screen. In fact, the 72 PPI “standard” was created my Apple because that’s what their monitors display at the native resolution. Windows on the other hand uses 96 PPI . Laptop screens and non-standard monitors are a whole different kettle of fish, though. My laptop screen displays 140 pixels per inch, for example.

More confusion comes from mixing up pixels per inch and dots per inch. DPI is a printing term, and refers to the printer rather than the file. For example, a 1200 DPI printer will print 1,200 dots of ink per inch regardless of the PPI of the file being printed. So, if you were printing a 300 PPI file with a 1200 DPI printer, each pixel of the printed image would be made up of 16 dots of ink.

The PPI of a file only comes into play when designing for print. It doesn’t affect web files at all as the PPI that you actually see is defined by your monitor and screen resolution.

Having said all that, it wouldn’t be considered good practice to provide web files at anything other than 72 or possibly 96 PPI , despite the fact that it makes no actual difference. I would imagine that would be why non-72 PPI web files get rejected.

And it’s also a myth, that computer monitores just have 72 DPI (correctly it should be PPI not DPI )

Can you explain what is happening when I save an image using Photoshop at 180 pixels/inch resulting in a file of 4.54mb; I then save exactly the same picture with the same dimensions and making no alterations other than changing the pixels/inch to 72 and then have a file only 991kb?

Obviously if I were to optimise this for web use I’d be taking it down to about 30kb using various methods, including canvas size adjustments, image size matching AND resolution optimisation. I don’t understand how this last step can be disregarded when it shows the kind of results I experience. After all, a same size image at 144ppi will contain 4x the number of pixels as at 72ppi…
Forgive my ignorance, I am fairly new to this but thought I knew that much – if I’m wrong, I genuinely want to know how.

TheDigitalOrchestra said
Can you explain what is happening when I save an image using Photoshop at 180 pixels/inch resulting in a file of 4.54mb; I then save exactly the same picture with the same dimensions and making no alterations other than changing the pixels/inch to 72 and then have a file only 991kb?

It sounds like you’ve got the “Resample Image” box checked when you’re changing the PPI . Resampling changes the pixel dimensions of an image so that the printed dimensions will remain the same. For example, if you had an image that was 180×180 pixels at 180 PPI , then resampled the image to 72 PPI , the pixel dimensions would change to 72×72 pixels to keep the printed dimensions the same size, which in this case would be 1” square.

Resizing, as opposed to resampling, keeps the pixel dimensions of an image the same, but changes the amount of pixels that will be printed per inch. A 180 x 180 pixel image printed at 180 PPI would be 1” square, but the same image printed at 72 PPI would be 2.5” square as there are less pixels being printed per inch of paper.

When you’re designing for the web the important factors are usually the pixel dimensions and file size. PPI doesn’t matter unless you’re designing for print as it deals with physical measurements which aren’t relevant to web images.

I’m sure I could’ve explained that much better. Hopefully you get what I mean