Should all my website images be 72DPI?

“There is nothing worse than a sharp image of a fuzzy concept.”
― Ansel Adams

This is a super question which I hear all the time. A customer had a bunch of images ready to send and he called to ask:

Should I crop my images to 72DPI?

‘No’, I replied, ‘there’s no such thing as DPI in web design.’

Beverley Cathedral at a laughable one 'dpi'
This picture of Beverley Minster in Yorkshire is cropped at a laughable one ‘DPI’, proving the point that that DPI, or more correctly PPI, on a web page doesn’t mean anything.

He referred me to lots of references on the web that suggested he was right.
But alas, just because it’s on the web doesn’t mean it’s right! And DPI is a print measurement anyway – print resolution is measured in dots per inch (DPI), screens in pixels per inch (PPI).
Let me explain.
Images are displayed in a browser according to their pixel dimension, that is their absolute size, so an image cropped to 800 pixels by 600pixels would display using that amount of pixels according to the screen resolution. If your screen resolution was 1024 x 768, then your image would take up roughly three quarters of the screen size, regardless of any dpi setting.
An image will display at the pixel dimension size it is cropped to, unless it is forced by code to show bigger or smaller in which case, the pixel dimension will be over-ridden.

There is no ‘inch’

Any DPI, or PPI, setting chosen at cropping would be totally ignored here. because there is no ‘inch’. And in fact, a very low resolution image, say 20 x 20 pixels, cannot be ‘upsampled’ by changing the PPI setting, if the pixels aren’t there, they can’t be magically created.
So the upshot is that it makes no difference to your website images, how many pixels there are per inch.
[tweet “‘DPI has no meaning in web design. The real value is pixel dimension'”]
The pictures below demonstrate this. I cropped both to the same dimension, and added a PPI value to each, although I wouldn’t normally choose a PPI at all.

Too low? 30ppi gives a file size of 78kb and no loss of quality
Too low? 30ppi gives a file size of 78kb and no loss of quality.

Too high? 3000ppi also gives a file size of 78kb and  therefore no speed penalty
Too high? 3000ppi gives the same file size and therefore no speed penalty

The first was 30PPI, the second  300PPI. If it made a difference, the last image would be 10,000 times larger than the first (30 x 30 = 900 pixels; 3000 x 3000 = 9,000,000 pixels), but they’re the same. Both file sizes are identical. That’s because they are, there is no difference in quality ot resolution.
PPI is purely a value that allows people, and software, to calculate the printable size of an image.
So you see, PPI has no meaning in web design at all.
The real value is the dimensions of the image in pixels, so when customers ask me at what resolution should they send their pictures, I’m always very clear about my response:
Just send the originals, and we’ll crop them accordingly.
That’s the best resolution!

Leave a Comment

Your email address will not be published. Required fields are marked *