17 February 2016

DPI ain't nothing but a number



In the glamorous world of Web Design, 95% of time with clients is spent discussing the same two or three basic points about image size, so I've attempted to write up a short set of answers to which I could point them. I have tried to be brief and funny, but also useful. I've also tried to keep my tone free from the exasperation I often feel when going over these points for the third time in a day. Graphic designers out there, tell me what points I've missed and where I could be clearer. If you want to use this as a reference in your own correspondence please do.


How big should my image be?


Short answer: 1000 pixels on its longer side. PNG or possibly JPG and less than 1 MB file size. Long answer: see below.

Why is this image "too small?" It's 300 dpi!


In print, the magic standard is 300 dpi, meaning that an image has three hundred pixels per inch at the size it will be reproduced. If your image is 300 dpi but only one inch wide, and you want to fill a double-page spread with the image, it will have to be blown up to seventeen inches and all those tiny pixels will be seventeen times as large so now your image is effectively seventeen and a half dpi.

On the web, dpi is meaningless, because you might be looking at an image on your grandma's '95 Gateway or on next year's Apple Watch: you have no idea what size those pixels are. It's more important to think about how many pixels wide and high an image is so that the designer can think of the amount of space in a window it will occupy.
A nominally high-resolution image becomes low-resolution when presented at a different size

Zoom to enhance?


You can't reveal detail that isn't there. An image that is out of focus or noisy will be more out of focus or noisy when blown up. If the image has sharp lines, like the edges of letters, those will degrade. If you have an image of an old newspaper, you will need to capture all the detail you want at the photography/digitization stage. Words are a special case. People notice blurry letters much more than they notice blurry photos. So if you are digitizing anything you want your viewers to read, crank up the resolution on your scanner.

I compressed it! Aren't you proud of me?


There are lots of ways image encoding systems save disk space. Some take advantage of redundancy in the data and don't affect the way an image looks. Some take advantage of the way the human eye works and these can mess with the quality of an image. The biggest offender here is JPEG compression. This system uses a complex mix of math and psychology to trick the eye into seeing more detail than the file contains. But if you compress things too much the image will degrade, becoming jagged or spotty. This is particularly true of images with sharp lines (like text) or flat colors (like cartoons). For these images, PNG is a better format.
While JPEG compression can save disk space, its flaws are particularly evident with hard-edges and flat colors.

What about bit depth?


Bit depth is a measure of how many different hues an image can have. In theory, the more bits, the more discreet colors are available. In practice, people really can't perceive the subtleties after a while. There are those who claim there's a huge difference between 8 bits and 16 bits per channel. Those people are lying and they have too many figurines on their desks.

Is there anything else I should know?


There's a ton of other stuff to know about digital images, from alpha channels to color spaces. Do you need to know these things? Are you a graphic designer? Then the answer is no. Ultimately the most important stuff is not technical. Is it a good photo? Is it in focus? Does it have white whites and black blacks? Is it not too grainy? Is it grainy enough? Do you like it?