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)

Resampling

To consider resampling, let’s use a simple example. If we wanted to print an 8″ x 12″ print from the image this dialog represents, how do we go about resizing it correctly?

Firstly, we have to understand what resampling is. In a nutshell, resampling is resizing an image by reducing or increasing its number of pixels. So, if we want to change the size of the print but keep the resolution at 300 ppi, which is a common standard from a lot of professional photo labs, we simply type the new dimension into the dialog, and Photoshop will throw away or create the needed number of pixels to get the dimensions to work. Now look at Figure 1.2 below. If, for example, we type 12 inches into the height field, the resultant dialog would look like this. Note how changing the width to 12 from 19.2 has two effects. One is that the width now becomes 8. This is simply because the aspect ratio of the image (2:3) is the same aspect ratio as an 8×12″ print, so changing one to 12″ means the other one automatically becomes 8″. If the image did not have the same aspect ratio as our desired 8 x 12″, then cropping would be needed instead, but that’s another story for later.

resizing images for the web

Figure 1.2 (click for larger view)

The second change we can see is that the pixel dimensions have changed. Photoshop has thrown the un-needed pixels away (by way of a very complex algorithm no doubt), resulting in an image that is now only 3600 pixels on the longest length. This gives us the correct relationship between the document dimensions, the resolution and the number of pixels. 3600 pixels, spread out at 300 pixels per inch gives us 12 inches of image. If we were to change the resolution of the image with resample ticked, the document size would remain the same, and again, the pixel dimensions would be altered to suit.

A final note here is that we can always change the resolution of an image without it affecting the number of pixels in the image. This is important to grasp. The resolution (ppi) is simply a printing instruction. If we change the resolution without changing the number of pixels in an image (by making sure Resample Image is unchecked), we DON’T change the size of the file either. The only two factors controlling file size are number of pixels and image format and compression (OK, there’s arguably a third factor which is the amount of detail in the photo, which affects compression). When we uncheck the Resample Image checkbox, the pixels are greyed out in the dialog box and the only thing that can change when changing the ppi is the document size. And as I’ve said, this has no effect on file size. But it is useful and important to be able set the desired ppi when printing to different devices, and doing it this way doesn’t affect the pixels.

The 72 ppi Myth

resizing images for the web

You might have heard the suggestion that it’s important to save images for web at 72 ppi (or God forbid, dpi). The reasons for this are given as many:

  • It reduces the file size – Absolute Rubbish. PPI doesn’t affect file size at all. Compression does.
  • That’s what resolution screens are at – You don’t have to match the image ppi with the screen ppi. And besides, most modern monitors are more than 72 ppi anyway.
  • It’s the industry standard – This is probably the best argument of the lot, as it is a sort of industry standard. It’s just that it’s an industry standard for no good reason.

In fact, it is not important at all to set images to be 72 ppi for the web. It doesn’t hurt, but it’s not important. The ppi of an image makes no difference to the file size and neither does it make any difference to the visual appearance of an image on a monitor. It would of course have an effect on how big an image was printed as it is a printing instruction, but when viewed in a browser, it is the monitor itself that determines how much space the pixels take up on the screen. Let’s look at the three images below. The first has been saved at 72 ppi, the second at 300 ppi and the third at 1000 ppi. See any difference? No, of course you don’t. They all share the same physical pixel dimensions (300 x 450 px), and that’s the only thing the browser cares about, so the logical instruction of ppi makes no difference unless we print them. So hopefully, that’s all you need to put that old chestnut to bed. PPI has no effect on file size, and neither does it affect on-screen appearance.

resizing images for the web

Asher @ 72ppi, file size: 18.3kb

resizing images for the web

Asher @ 300ppi, file size: 18.3kb

resizing images for the web

Asher @ 1000 ppi, file size: 18.3kb

The Origins of the Myth

Where the 72 ppi myth originally comes from is that screen resolution of the first Macintosh computers back in the mid 80s, used to be 72 ppi (read more here). But it’s not a fixed number and nowadays it’s a lot more on most monitors. Some screens are around 96 ppi, some are up around 120 ppi, while the latest screens on tablets are achieving mind blowing resolutions of over 500 ppi (Retina eat your heart out). To figure out exactly what resolution your monitor has, simply measure the width of the screen area in inches (not the whole monitor) and then find out what the native resolution is. My monitor’s native resolution is 1920 x 1080 (full HD) and my screen width is 18.622 inches. This gives me a screen resolution of  just over 103 ppi. In other words, 103 pixels in an inch of screen real estate. Just to be thorough, I tested this by resizing an image to 1030px and opened it. And yes, it measured exactly 10 inches across on my screen. This is an area of much debate, and it is generally print designers who argue about these numbers. Design is not just screen based, and ppi and dpi have major implications in the print world. But my essential point remains. For web based viewing of images, it’s the screen resolution, in conjunction with the number of pixels, that determines how big the image is displayed on a  monitor, not the inbuilt ppi instruction in the image. Another very interesting article discussing this topic is The Myth of DPI. It has its own inconsistencies (a pretty big one even in the title, as he confuses dpi with ppi from the start) but it is essentially a good read. Even perhaps more interesting and informative than the article itself though, are the comments. There are loads of them, many from quite educated graphic designers with a wealth of knowledge, and the discussion gets quite heated at times. If you have a spare half an hour and the interest, you will learn a lot by reading the various perspectives of web and print designers, and those whose workflow does require a bit more consistency and awareness about the ppi of images.

Resizing images for the Web

When you understand that there is no real need for setting the ppi in images destined for the web, resizing becomes a lot simpler. Basically, you resize the image in pixels at the size you want it to display. Did I say simple? Well unfortunately, here we enter a completely different world of pain, that of pixel based web design. But at least you don’t have to worry about ppi ;). If, for instance you had a WordPress or HTML template that you know is 1100 pixels in width and you wanted an image to fill the content area, then around 1100 pixels in width would be a good size. With resizing images for the web, the number of pixels is the only relevant detail. Forget the ppi of the image, and remember it’s website theme, the resolution of the screen and the number of pixels in the image that will determine the size of the presented image on screen (disregarding CSS and Retina and some JavaScript at this point). You could argue that it makes sense to set the ppi to 72 anyway. Fair enough, I suppose. It would give consistency. I only rail against the mistaken belief that it is important to do so. If you use Save for Web in Photoshop, you might find it doing it for you anyway. A quirk of the software is that if you save the image with metadata, it won’t change the ppi (as that’s in the metadata), but if you strip the metadata out when saving (by choosing None), and then open the image in Bridge or Photoshop again, you will see that it’s now set to 72 ppi. I believe this is because the field can’t be empty, and so Save for Web just puts in the default value (which Adobe has set at 72 ppi). I use Photoshop to resize my images, but you can use virtually any decent image editor. You can even do it online with services like http://www.shrinkpictures.com/ and http://www.picresize.com and many others.

Image Resizing and Screen Resolution

Let’s come back to screen resolution, as it majorly affects how big or small we resize our images. One of the biggest difficulties for web designers over the last decade or so was always what size images should be. Web design is a mixture of rendered, flexible elements like text and fixed, pixel based elements like images. Screen resolutions come in all sorts of sizes, but to design a web site with pixel based elements, you have to determine how wide your con