Updated: 16 Feb, 2018

The topic of resizing images for the web is a relatively simple, yet ridiculously complex one, at the same time. And it’s also one where there is an awful lot of misinformation floating around, even from professionals. But a lot of people have a need for basic foundational skills when it comes to understanding and resizing digital images for various purposes. Hence this post…

Huge caveat here: My primary field of knowledge is in photography. I have been fiddling with cameras my whole life, and have taught photography and digital imaging at local colleges and independently for the last ten years (visit iTeachphotographers for more on that), and I feel like I have a  reasonably authoritative voice on the topic. I also design, host and maintain WordPress websites. While I can read and write HMTL and CSS, I am more a designer than a coder, and I don’t profess to be know everything about the technical intricacies of web design. And I certainly don’t profess to knowing everything there is to know about pixels either, particularly about pre-press and the printing industry. So if, in spite of my experience and research, I am misinformed or mistaken about some point or other, I welcome any corrections.

Only Pixels Matter

Pixels

This is a great starting point. Digital imaging capture devices (aka cameras, but also scanners) have a fixed number of pixels they can capture in one image. A Canon EOS 5D MkIII for example can capture an image at 5,760 x 3,840 pixels. If we multiply those together we get 22,118,400 pixels, which reflects that it is a 22 Megapixel camera (22 million pixels).

A Nikon D800 captures a whopping 7,360 × 4,912pixels (a 36.3MP camera). The top of the line Phase One Digital Camera back, the IQ180, captures a staggering 10328 x 7760 pixels (over 80 million pixels!). So, pixels are finite and are linked to the capture device. Pixels are our starting point. They are the raw material of our images, whether we are are printing or just displaying the image on a screen.

The other main player in the story is resolution. Resolution has many different meanings, and is quite complex when you look into it. Broadly speaking though, resolution is basically referring to the detail an image has. The higher the resolution, the more detail there is. But in this article, the main type of resolution concept I want to introduce is called pixels per inch, otherwise known as ppi. The best way to think about how resolution works together with the number of pixels captured in an image, is that “the number of pixels is determined by the capture device, but pixels have no fixed size“. A pixel is a unit of a digital image, but overall resolution depends upon the size of the pixels (and the viewing distance). The smaller the size of a pixel, the higher the resolution of the image will be and the clearer the image will be.

PPI vs DPI

Before we go any further, I think it’s important to clarify the oft misused terms dpi and ppi. DPI is a printing term, and it stands for DOTS PER INCH. Printers lay their ink down in dots, and this figure is not the same as PPI. Dots have space in between them, and pixels don’t. DPI doesn’t have any real relevance to our discussion today.

PPI on the other hand, which stands for PIXELS PER INCH, is a term that relates to digital images. Pixels, or picture elements, as we have established, are what digital images are made up of, and are square. The terms DPI and PPI are NOT interchangeable, and PPI is the correct term to use when talking about digital images. I’m not going further into the whole DPI / PPI thing here, but there are some good articles going into much detail on this subject here, here and here.

How Pixels and PPI hang together

So before we look at images for the screen, it will be instructive to look quickly at Photoshop’s Image Size Dialog, to see how the resolution (ppi) of an image interacts with the pixel dimensions when printing an image.

As you can see here in the Photoshop Image Size dialog, Figure 1.1, digital image information is presented. The Dimensions section shows the aforementioned pixel dimensions of the image, in this case 3840 x 5760. This dialog can be used in many ways, but what I want you to take note of is the physical dimensions listed (12.8″ x 19.2″). This shows us the physical size of the image if it were to be printed, by taking the number of pixels, and dividing it by the number of pixels per inch. In this example, we have 5760 pixels on the longest length, and if we divide that by 300 (the PPI) we get an image of 19.2 inches.

What this shows us is that print size is simply a result of how tightly we squash together the pixels we have. If we increase the ppi, say to 400, without resampling the image (adding to or removing from the total number of pixels), the document size goes down to 14.4 inches. If we spread the pixels further and reduce the ppi to say 240, it becomes a 24 inch document. This what I mean when I say pixels have no fixed size.

resizing images for the web

Figure 1.1 (click for larger view)