It was 1998 and I was sitting with 200 or so other students in a lecture hall at University, the lecturer at the front of the hall was explaining about graphics for the web. It appeared that all graphics were not created equal when it came to the web and the advice I received that morning stuck with me for a long time and funnily I didn't question it until a few years ago. It was explained that because of lengthy download times and because computer screens could only show a 72dpi resolution, web graphics, the lecturer commanded, should be created in 72 dpi, that is, 72 dots per inch. So, from that moment on, for me at least, all my web graphics were 72dpi no question asked, no debate, no further thought, done and dusted.

Was this the right information? For 1998 perhaps it was but as we all know the Internet has come a long way since then and with the introduction of Broadband and ADSL not only can we can surf faster but concerns about graphic download times have become a thing of the past. What's also happened is that display screen technology has moved on in a big way, as screens now come in a variety of different display technologies. Gone are the days when people surfed on a 13 or 15 inch CRT screen using a resolution of (if they were feeling racy) 800x600 pixels. In 2008 your average surfer has a 20 inch LCD screen with a 1280x1024 resolution.

So, is 72dpi for the web a myth?

My take on it is that given all the above and with the introduction of the digital camera everyone has had a big learning curve when it comes to computer graphics. People you wouldn't expect to hear computer jargon from are now spouting off about resolutions, dpi, lossy, lossless etc. and everyone has become really really concerned about getting the best quality images they can from their cameras.

What is often overlooked is that the quality really only matters when you're going to print the images on paper. What you see on the computer screen can look exceptional but print it out and it may be a different matter. So ... Dots per inch is a printing term and doesn't have anything to do with screen resolution, even though a lot of software packages and people (myself included - old habits die hard) will couple dpi and resolution in the same command or sentence.

The quality of the 3 images below is visually identical. The first 2 are 72dpi and 300dpi, yet both files are approximately the same size in bytes and have the same appearance visually on the display. If I hadn't tagged them, would you have known? If you print both files from the browser they will print identically as well. However, if you take them into something like Photoshop or Illustrator they will print quite differently. The 72dpi prints as it looks here, while the 300dpi will print much smaller because of the increased dpi.

 

For the web though, either of the 2 images work, they are the same size visually, practically the same size in bytes, the dpi is not an issue.

Want me to prove that? The image on the end doesn't have a title, try and guess what dpi it is set to? Give up? It's set to 1 (one) dpi. Proving once and for all that dpi is not an issue for the web. (Remember that web images will be affected by screen resolution, they will adjust visually depending on what your web visitors individual screen resolutions are set to. Someone surfing with an 800x600 resolution will see larger images whilst in 1280x1024 resolution the images will appear smaller).

Rule of Thumb for dpi

• Printing Images:
  If you intend to print your images then the higher the dpi the better. Most printers require at least 300dpi to get a crisp result. My personal tip, if you're unsure, print it out and see if it looks good on your own printer.
• Wallpapers:
  You want a wallpaper for your computer, set the width and height to your screen resolution, e.g. 1024x768 pixels, the dpi is irrelevant.
• Web Graphics:
  This depends on your personal taste as to how large or small you make your web graphics. Again, dpi is irrelevant but screen resolution may make an image that looks good in 1280x1024 look gigantic when someone with an 800x600 resolution surfs on in. Testing in different resolutions is always a good idea.

Size does matter

Size does matter for the web though. As a graphic designer I know that good quality high resolution images make good quality visual imagery for the web. The better the quality of the original image the better the quality of the web image. This goes double if images are to be used in Adobe Flash. Start with a lossless print quality image and the results can be visually stunning.