“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.’
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.
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!