Welcome to the new Web Developer's Journal built with Nuxt Content!

The Mad, Mad World of Pixels Per Inch (PPI)

JPEGs and GIFs are two traditionally popular graphics formats used on the Web. It's important when thinking about these Web graphics to forget most of the rules that apply to print graphics, such as TIFFs and EPSs. Unfortunately, rules that may have some relevance to the print world have mistakenly slipped into the Web graphics world, where they're out of place and cause nothing but confusion.

Web graphics

Web graphics (and screengrabs) are pixel-based images, each individual pixel being a single dot of colour, including black and white. The size of the graphic is measured in pixels rather than inches or centimeters. A typical Web graphic might be 125 pixels wide and 125 pixels high. That's 15,625 pixels in total.

Web graphics files don't contain information about their physical size in inches or centimeters. If you see physical size information when a Web graphics file is viewed in Photoshop or other graphics program, it's an implied size that Photoshop has worked out. It hasn't read the information directly from the file, it's calculated it.

What the file usually does contain (there are exceptions) is a Pixels Per Inch (PPI) resolution. This is usually 72 ppi for files on the Web.

The ppi figure held in a Web graphics file doesn't have any influence on the pixels that make up the content. It's just a number held in the header of the file. If you change the number, the pixels and the bytesize of the file will stay the same.

You can have two files of the same picture, one at 200 ppi and one at 2000 ppi, and they'll display the same in a browser. They'll also be the same bytesize.

A commonly held misconception is that Web graphics files with a high ppi contain more information than files with a lower ppi. This is simply not true. If it were true, the 2000 ppi file above would have more bytes than the 200 ppi file, and it doesn't. The amount of information is the same.

The misconception arises because it's true for print graphics files. They generally contain physical size attributes, and for a given physical size, a print graphics file with a high resolution will contain more information than a file with lower resolution.

To Print

Our two Web graphics files with different resolutions will also print the same size when printed through a browser - which roughly attempts to copy in print what you see on screen.

Where they start to diverge is when you try to print them using other software such as QuarkXpress or Microsoft Word. These programs have their feet firmly printed in the print world, and what they do is interpret the Web graphics files and turn them into print graphics files before printing. Here's an example using Word.

The 2000 ppi file prints at one tenth the size of the 200 ppi file. Please note that the relative sizes of each of these files is correct, but their absolute physical sizes on your screen probably aren't the same as they were on the piece of paper I printed out, so don't take the absolute sizes too seriously. We'll cover the many complications of computer displays in a moment, but first, why the different relative sizes above?

Let's take the biggest image. The graphic is 250 pixels wide, and it has a 72 ppi resolution, which is the most common on the Web. Well, 250 pixels divided by 72 pixels per inch is 3.47 inches, so the graphic (in a print environment) turns out about three and a half inches wide when it's printed.

The graphic with 2000 ppi resolution is also 250 pixels wide. 250 divided by 2000 is 0.125 inches, and the picture is tiny. The 200 ppi version comes somewhere in the middle, at 1.25 inches wide.

Each graphic only contains a limited amount of information - its pixels - and when you turn the graphic into a print version, if you decide you're going to squeeze the pixels together with a high density ppi/dpi, it becomes a very small graphic in terms of physical size. If you spread them out with a low ppi/dpi, it's physically larger.

Keep The Headache Pills Handy

That's the easy stuff dealt with. Our first complication is that if you pick up a ruler and on your screen measure the size of the graphics shown above (concentrate on the first pair of identical pictures) you'll find it's highly unlikely that they show up as exactly 3.47 inches long. They're four inches or two inches or any other number under the sun, but not three and a half.

Monitor Resolution

This is mainly down to the fact that your monitor has its own resolution too - its own ppi figure quite independent of any that belong to the graphics it shows.

You can set the resolution of your screen to various pixel widths - for example 640, 800 or 1024 pixels wide. And it has a real width that can be measured with a ruler on the surface. Dividing the pixels by the real width gives you your monitor ppi. It could be any kind of number. If you set a 14 inch (working screen area) monitor to 800 pixels wide then you'll get 66 ppi, whether you're on a Mac or a PC. The 14 inch diagonal means just over a 12 inch horizontal, and 800/12 is 66.6.

If you set the resolution to 1200 then you'll get 100 ppi on the same screen, again Mac or PC, it doesn't matter which.

Remember, this is the ppi of the monitor we're talking about here, and a Web graphic has its own separate ppi.

In IE5, there's a risk that your browser has a screen resolution compensation mechanism too, especially if you're running a Mac, in which case life becomes so complicated that you may as well put your ruler down right now and find a good wall to bang your head against, because the arithmetic becomes outrageous. The same applies if you've got a flat screen that has its own ppi and a separate ppi which it uses to interpret graphics.

But let's ignore these special cases because they're far too difficult, and concentrate on ordinary screens. Usually they display at something between 60 and 100 ppi, and that's the figure that will determine the actual physical sizes of the graphics pair shown above when measured with a ruler - their pixel width, which is 250 pixels, divided by your screen resolution.

Their own inherent ppi doesn't come into it.

The physical size may vary slightly at different positions on your screen. Often the same graphic shows wider on the left than on the right. The reason is that most screens are a bit wonky and inconsistent. Nothing more scientific than that.

Viewing On Screen In A Print Environment

So, we've covered viewing the images in a Web environment, and printing them out as hardcopy from a print environment. But what about a print environment as viewed on screen? A prime example here is working with your document in Microsoft Word, just before you print it out as hardcopy. In this case the physical size of any Web graphics on screen will be determined by their pixel dimensions, their ppi, the monitor's ppi, the magnification of the program you're using, plus an optional 33% that the Windows operating system adds on for luck.

If the magnification is set at 100% and the ppi of the graphic and the monitor match up, you'll see the graphic on screen at exactly the size it will print, unless you're using Windows, in which case you've got the automatic 33% magnification to take into account.

It's pretty rare that everything does match up. Most Web graphics are given a ppi of 72 by the people who design them, partly for historical reasons (because in the print world 72 points generally equals one inch) and partly because many monitors hover around an average monitor resolution of 72 ppi.

Some Web graphics aimed at Windows systems are given a ppi of 96, on the assumption that PC monitors generally have a monitor resolution of 96 ppi. This is even rarer. The figure is too high for most PC screens, which are not significantly different to Mac screens. That's why most Web designers have dropped it in favour of 72 ppi. But 96 ppi does have one special quality, which we'll come to next.

Printing From a Web Environment

Looking for more complications? Here goes.

As previously mentioned, what you see in a browser ignores the ppi of the graphics themselves, size is only determined by your monitor ppi. But when you print out hard copy from your browser, well....

Your browser isn't a real print environment, it's an extension of your Web environment, and it attempts to copy what you see on screen. So it still ignores the ppi of graphics, but it's forced to hazard a guess at the ppi of your monitor.

And you know what? It invariably gets it wrong. On Macs, it usually guesses at 72 ppi. On Windows PCs, it generally guesses at 96 ppi, which as we've previously mentioned, isn't that common.

So most of the time, the browser print out and what you see with the browser on screen won't be the same.

The good news is that there are often times when hardcopy print outs from a print environment and print outs from your browser will match up pretty closely. This happens with 72 ppi graphics when your browser thinks your monitor ppi is 72 (so usually a Mac) and it happens with 96 ppi graphics when your browser thinks your monitor ppi is 96 (usually a Windows PC).

But this is only a big deal if you're living in a world of hardcopy print outs. Most Web pages are viewed on screen, not as hardcopy, so it's a mistake to think that getting hardcopy print outs to match up is particularly important. In fact, it's one of the mistakes that's led to the whole ppi situation getting so messy.

Let's Add Fonts Into The Mix

We've just got room for one more complication. Here it is. In a Windows environment, but not Macs, fonts sizes for text are blown up by 33% (Windows applies this magnification to almost anything apart from a Web graphic viewed in a browser). So text in a 12 point font appears 16 pixels high on a PC, but 12 pixels high on a Mac. This is the main reason why you'll hear Mac owners cursing about illegible fonts on Web pages. The page designer has allowed for the magnification of Windows, and the font is too small on a Mac.

Wise designers specify font in pixels and other measures rather than points, but the problem here is that Mac owners have got used to compensating for the old style fonts by magnifying Web text. Yet sites that are naturally Mac-friendly don't need magnification, so now there's a mixture on the Web of sites that need magnification on Macs and sites that don't. The problem is destined to carry on for a while.

Maybe we're getting into unnecessary complications here, and then again maybe we're not, because the size of text and how many pixels are used to represent a point is very close to the issue of how many pixels are used to represent an inch.

The Future

Er, and it's all going to get worse. For a while, at least. The next generation of viewing devices, large flat screens, are already beginning to expand on the idea that many screen pixels can be used to represent a single pixel in a graphic. This is an extension of the way that Windows magnifies text and print documents, with its four pixels on screen for three in the file approach.

In the long term, it's probably a good idea that screen pixels and graphics pixels part company. The current half-baked direct relationship between them doesn't make life simple. We're probably better off with screens that have a direct setting explaining how many graphics pixels they display per inch, and which can transmit this information directly to a browser.

Then maybe we can get rid of some of the print graphic hangovers that can easily mislead us when we look in detail at Web graphics. Web graphics really need to come of age and lead their own separate lives, entirely free of the complications that have been heaped on them by their early life as a subsidiary of print-based images.

If you're curious about dpi (Dots Per Inch), it's mentioned in a related article.

This article was written in 2000 by Andrew Starling and published on the previous version of Web Developer's Journal.