The topic of resizing images for the web is a simple yet ridiculously complex one (yes I realise that’s a contradiction, but it’s nonetheless true), and one where there is an awful lot of misinformation floating around. Even from professionals (actually, a lot from professionals). But it is an area where a lot of non-imaging professionals have need of a different perspective and some foundational skills when it comes to resizing digital images for various purposes. So, this is my attempt to counteract some of the misinformation out there. Huge caveat here: My main 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 for the last five years, and I feel like I have a reasonably authoritative voice on the topic. I also make 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.
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 introduction, the type of resolution concept I want to introduce is 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.
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, here and here. Enjoy! 😉 I really like Wikipedia’s simple definition: In printing, DPI (dots per inch) refers to the output resolution of a printer or imagesetter, and PPI (pixels per inch) refers to the input resolution of a photograph or image. DPI refers to the physical dot density of an image when it is reproduced as a real physical entity, for example printed onto paper, or displayed on a monitor. A digitally stored image has no inherent physical dimensions, measured in inches or centimeters.
So before we look at images for the screen, it will be instructive to look quickly at images intended for printing. So let’s look at how the resolution (ppi) of an image combines with the pixel dimensions when printing an image. (Again, I am a photographer, and here I will refer to c41 process photographic printing, not inkjet or other dot based system).
As you can see here in the Photoshop Image Size dialog, Figure 1.1, digital image information is separated into two sections. The top section shows the aforementioned pixel dimensions of the image, and below that is the Document Size area. This shows 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 5220 pixels on the longest length, and if we divide that by 300 we get an image of 17.402 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 just over 13 inches. If we spread the pixels further and reduce the ppi to say 240, it becomes a 21.75 inch document. That’s what I mean when I say pixels have no fixed size.
To consider resampling, let’s use an 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. When the Resample Image box is ticked, changing the resolution (ppi) or the document size will affect how many pixels there are in the image, but not each other. Now look at Figure 1.2. If, for example, we type 8 inches into the width field, the resultant dialog would look like this. Note how changing the width to 8 from 11.602 has two effects. One is that the length now becomes 12. This is simply because the aspect ratio of the original image (2:3) was the same aspect ratio as an 8×12″, so changing one to 8 meant the other one automatically became 12″. 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.
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. Now look at the third dialog screen grab, Figure 1.3. Let’s say we want to print our original image as an 8×12″ but we also want to print it on an Epson inkjet at home, and that 240 ppi was sufficient. From our original image, we have to change both the resolution and the document size. We can do this in one sweep in this manner: First with Resample Image checked, we type in our desired document size (the pixels get reduced to 3600 on the longest length at this stage). But before we click OK, we now change the 300 ppi to 240 ppi. The pixel count decreases yet again, leaving us with 2880 pixels on the longest length (12 x 240 =2880) and an 8 x 12″ image printed at 240 ppi.
It should be clear by now that resampling is a dangerous activity. 😉 It’s OK to resample, but you have to understand what you’re doing. If you are resampling down, you are throwing away information from the file, and this can’t be regained (unless of course you are working on a copy). But as long as you know what you’re doing, it’s fine and is totally necessary in many situations. You can also resample upwards, which is known as interpolation, but this is more limited. In this process, Photoshop (or other software) is “creating” pixels from nothing (again, those complex algorithms come into play) and so there are limits to how much you can do this. In the right hands, it’s actually quite amazing how much you can interpolate files, and combined with judicious sharpening and printing, you can make a rather large and awesome looking print out of a typical DSLR file.
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.
You might have heard the suggestion that it’s important to save images for web at 72 ppi (or perhaps they even said 72 dpi if they didn’t understand the difference between ppi and dpi). The reasons for this are given as many:
- It reduces the file size – 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 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.
Asher @ 72ppi, file size: 54kb
Asher @ 300ppi, file size: 54kb
Asher @ 1000 ppi, file size: 54kb
Where the 72 ppi myth originally comes from is that screen resolution, in the first Macintosh computers back in the mid 80s, used to be 72 ppi (follow this link to an interesting more in-depth article on the subject). 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.
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 content area is going to be. There’s no point putting a 2000 px wide image in a webpage if 90% of the population are using screens with a maximum 1024px resolution. The image is just going to be too big to be seen on the screen. So determining your audience and designing to them was always a big part of the process. It has been changing a lot though in the last decade. You can define image size with CSS or HTML (i..e upload an image that’s 800px wide and tell the browser to display it at 400px wide), and there are also java scripts that can automatically resize an image to fit different screen resolutions and new vector based formats like svg are coming through. But designing for the most common resolution of the day is still a major consideration. The most common resolution today is 1366 x 768 (http://www.w3schools.com/browsers/browsers_display.asp) but with the explosion of different form factors, even that particular resolution has only 25% share. Obviously with responsive templates and the like, a lot of changes are going on in the web design space when it comes to images and how to deal with them. But the most basic part of getting started in this area is understanding that unless you have a technology at play that will repurpose images on the fly, you are best off resizing your images to fit your template and your audience. If you look at the current WordPress templates for example, most have a content container width of 940 or 1000px. This is to ensure that the content container will never exceed the resolution of the screen. As less than .5% of all users have resolutions less than 1024px, this is a safe bet. In the next year or two, my guess is we’ll see a jump to 1300px or so, as 1024px resolutions comprise only 9% of users and is falling fast, while Retina style resolutions are increasing quickly. For years I had a photoblog, and I uploaded photos several times a week. It was my practice to upload images at 800px width if they were landscape oriented, and 650px if they were portrait. At the time, that meant that the images would largely fill the screen of up to 95% of my audience. These days, an 800 px image on 27″ iMac looks rather small. But it would still look pretty good on most laptops and tablets. Retina displays have made things even more complex.
Compressing & Resizing images for the web
The Save for Web dialog in Photoshop is a tool for compressing and resizing images for the web. It outputs to one of four file formats, gif, png and jpg, plus the basically unknown Wireless Bitmap format (wbmp). Let’s start with the most commonly used format, jpg. This is the best format for continuous tone images for the web. They can be heavily compressed, while still retaining a lot of their detail. As noted before, there are two main things that determine file size – the number of pixels in the image and the compression applied when saving as a jpg. Save for Web is designed to be used on images that are already resized, as it is primarily a compression tool, but even if you load a full size image into it, it will load anyway after warning you it wasn’t designed to do so. You can then resize the image as well, but I prefer to resize the image first using the image size dialog and then compress for web using Save for Web. The basic compression choice comes in the form of either presets (high, medium low etc) or a slider that you set anywhere from 0 to 100. In the example above, it took a 1.91MB image and reduced it anywhere from 180kb at 70 level quality right down to around 27kb at level 1 quality. How much you compress is up to you, but I find the best balance for size and quality to be around the 50 mark. The compression will also depend on the amount of detail in the image (the more detail, the less redundancy is possible). Gifs is the traditional format for graphics, like logos and such, as they support transparency and a smaller colour palette, but these days most designers are using 8 bit png files instead. They also support animation, but are not recommended for continuous tone images. They can support 256 colours but are much larger than an equivilant jpg. Png files support transparency, which is very useful in web design, but pngs are rather large even out of the Save for Web dialog. That said, there are ways to further reduce the size of pngs, including a great little online tool https://tinypng.com/ which compresses the png file while retaining transparancy. As a basic rule of thumb, use jpgs for photographs on the web and png for graphics. For a much more in-depth look at these formats, check out this excellent article on sixrevisions.com
This is a topic close to my heart. (OK, OK, I’m a nerd. Get over it). As I mentioned before, aspect ratio is inherent in the captured image, as it comes from the capture device. If you want a square image, you either have to shoot it with a 1:1 aspect ratio (Hasselblad anyone?) or you need to crop, which is totally different from resizing. Cropping is both resizing and changing the aspect ratio. Cropping is something to keep in mind when shooting. You might know you want a 1:1 shot, and so you compose a certain way in camera as if you were shooting with a 1:1 ratio. Or you can creatively crop after you have taken the image, finding new images in the image by selective cropping (as long as you have plenty of pixels to start with you won’t lose too much quality unless you crop away most of the image, and particularly not if you’re just going to web). Over the course of centuries, we have become used to certain aspect ratios in our two dimensional visual art. Many have their foundation in mathematics, or in that strange place where aesthetics and mathematics meet. The Golden Ratio is a good example of this (this is the “perfect” ratio). The beauty and simplicity of the square is of course another. Digital SLRs create images in a 3:2 ratio (close to the Golden Ratio but not exactly). TVs and computer monitors were commonly in the 4:3 ratio, as are most compact cameras an 16:9 is now a common wide screen ratio. The point of all this is that aspect ratios matter. When you crop, I think it’s much better to stick to an established aspect ratio than to just crop willy nilly. This is where some web designers, particularly WordPress template designers, could do a lot more work. Images in WordPress is another complex topic, as there are so many other things at play when dealing with templates and columns and forced resizing and WordPress image resizing etc, but personally I think it’s best to stick to a bunch of established aspect ratios so that if you have to crop an image to re-purpose it, you always do it in a consistent manner.
This is another huge area, and one that my interests have never taken me to. I’m very interested in digital asset management, but colour management: yawn…. I’ll do my best to not make a fool of myself. In fact, to be safe, I will simply say that when saving images for the web, it is best to ensure they are saved with an sRGB colour profile, as this matches most closely the gamut of a monitor. Adobe RGB has a larger gamut, but images in this colour profile can look very flat and washed out on the web. Most cameras shooting jpgs are set to shoot in sRGB anyway, but if you are shooting RAW, you have to set the profile yourself when the data becomes an image. If you use Save for Web, you can get it to convert to sRGB when saving, which is probably the easiest way to go about it. It can also embed the colour profile as well, for those few browsers that actually check to see if an image has one.
This is an area where I have no expertise whatsoever. and so I will refrain from making a fool of myself. As I learn more, i might make some cautious statements here. OK, that’s it. I hope you have learned a few things along the way. Thank you for reading. If you dispute anything, please bring it up in the comments. As long as you are reasonably polite, I will reply, and we might all learn something.
- My FREE e-book – How to Prepare images for use on the web
- http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/ http://photo.net/learn/resize/
- http://www.lightpreserve.com/info/in041126.htm http://www.johnny-pixel.com/avm/dpi_confusion.php