Understand image resolution and dimensions like a pro

Tip 39 for Better Shoots by Heidi Rondak

“The Post-Production 101” 

PART C.3: Understand image resolution and dimensions like a pro

If you’ve been with us from the beginning of this series of articles you might remember tip no. 3 advising you to think about the formats of your future images first. It can be essential for the photographer to know about your printing and web publishing plans – not only for granting adequate usage rights as described in tip no. 34 but also to get the dimensions and resolutions right, as well as the colour spaces. If you’ve never heard about RBG and CMYK before, forgot what the letters refer to exactly, or never understood the difference between 8-bit and 16-bit pictures, keep on reading – you will also be shown the differences in sample images. For those with more advanced knowledge, the following paragraphs might hold new and surprising facts about image resolution that disprove the ’300 dpi for print’ and ’72 dpi for web’ rules.

What is Resolution?

When naming an image’s size and resolution it is either in width and height measured in pixels or mm, or in dpi – a shortcut for “dots per inch”. A rarer specification used for digital images is ppi, short for “pixels per inch”. Given that the sizes of pixels in a screen can’t change the number of ppi also defines the overall dimensions of digital images if they are not scaled. Dpi, however, defines the quality of prints and to-be-printed images. Equally sized images can, therefore, differ in their resolution depending on how many fine dots are going to be printed next to each other. The sizes and resolutions of images can be set and changed in image editing programmes like Photoshop, Lightroom, etc. While scaling down images is usually safe to do, puffing them up can be problematic because the software needs to fill in pixels between the existing ones. In the end effect, this means that images get re-calculated on the basis of a few details and eventually contain many “fake” pixels which can, in the worst case, be visible as flaws. Consequently, it’s the best of ideas to order correctly sized images from the start and have them scaled by a professional like the photographer themselves, the retoucher, or a graphic designer in your team.

Left: low resolution image represented too wide | right: higher resolution image

Have your Images Photoshopped for Print

It is said that printed images need resolutions of 300 dpi or more. Certainly, this is correct as a general rule. Some (art) prints can even require 600 dpi if they are to be viewed close and carefully, for example on fine paper in a coffee table book or in a gallery. However, pictures that aren’t planned for that purpose are rarely edited at this resolution because the files occupy much storage space and programmes tend to operate slowly with large data opened. Against the statement above, an image’s resolution can be increased with no loss of quality in the aftermath under one particular condition: Its dimensions need to be lowered at the same time. You can imagine the pixels squeezing up together – the number of dots per inch increases, however, at the same time they cover a smaller area. The other way around, a small-sized image of ideal resolution can’t be printed much wider without losing quality. To calculate the right image sizes in print, preferably in advance of shooting them, the rule of three can be useful – or you draw on online calculators like this one. Being precise about the future prints’ sizes helps to make sure that images are getting edited the right way, namely with the right amount of pixels.

The Secret of Printing Large-Scale

Many campaigns are placed on walls of houses or large billboards. With a little math or the help of a calculator like the above, however, it becomes clear that 300 dpi images taken by regular pro cameras with sensors between 20 and 30 MP can be printed loss-free in DIN A2 tops. Larger prints with such a high resolution would, therefore, require a larger sensor with more megapixels in the first place. If your production is meant for very large prints that contain much detail seen from up close the use of a digital medium-format camera during the shoot is going to be essential and attended with extra cost for this sort of equipment. As a matter of fact, few photographers keep such a camera to themselves as it is not only expensive and heavy in use but also produces extravagantly large files. Yet, billboard posters can be printed from smaller files too because the operative words are how “much detail seen from up close” is needed. The secret of the right size and minimum resolution, specifically, lies in the distance of the viewer to the image: A poster seen from several meters away looks perfectly sharp with a resolution lower than 100 dpi and a distance of 200 meters merely requires 1 dpi. A detailed list of viewing distances and suitable qualities can be found in this article (under point 3) by H Design Tutorials. You see, this opens up new dimensions of sizes that you can choose for your poster campaigns. In case of further doubt, your printing company of trust can certainly help with more information suited for the type of printing technique that is in question.

Burberry billboard advertising | photo by Pete Pedroza

The Ideal Properties for Web Images

When it comes to web resolutions, 72 dpi is a common demand by many platforms. Unfortunately, to put it metaphorically, this guide value is from the Stone Age. With improving technology, screens have changed to have more than 72 pixels per inch, namely around 100–150 dpi. A 72 dpi photo on modern screens, therefore, either looks pixelated if it’s scaled up to the desired size, or it has to be viewed scaled-down. The troubles caused by this popular misconception can be eluded by backing on pixel measures instead. Screens can, obviously, also represent high-resolution images of e.g. 300 dpi and higher. A digital banner set to, for example, a width of 900 px will have the same dimensions despite its resolution – because the fixed pixels of the screen (ppi) are relevant to its display. One thing that can actually be changed with downgrading the number of dpi for the web is the size of the file – and this might be relevant for faster loading times.

The Digital Signage

A new way of putting up advertising in public offline is the use of weather-proof screens instead of posters. These devices offer the chance to share a spot with other competitors because the adverts can change every few seconds, or to get the pedestrians’ attention by showing images that move instead of pure stills. When it comes to the right resolution for these screens it depends. Similar to printed posters the viewing distance plays a central role in the ideal size and density of the pixels. The considerate choice of provider and medium with an adequate resolution is, therefore, relatively important in the first place. Regarding the dimensions of the footage played on the screens afterwards, it can be easily adjusted according to the screen’s requirements. Remember, it is likely, that viewers won’t look at the signage very closely which means conversely that you can size up a 300 dpi image significantly, for example. In other words, digital signage can be a new possibility for your advertising that, usually, doesn’t require too many inconveniences in the production or editing process – at least not in terms of resolution and image sizes.

Know Thy Colour Space and Depth

A very important parameter of quality to distinguish between print and digital photos is the choice of colour space for an ideal display. To make clear why let’s compare the colours shown by screens with those on printed mediums. Pixels in screens emit light of three different colours: red, green, and blue. A drop of water on a display or a magnifying glass held in front of it reveals how each pixel is split into R, G, and B. Depending on each channel’s intensity we can perceive a range of millions of different tones that result from mixing the three so-called light colours. This is called the RGB colour space. While here, a higher percentage of each colour adds up to brighter tones right up to white light it’s the complete opposite case in printing due to the fact that colour pigments absorb light – at least partly. A mix of several types of pigments, therefore, appears darker than single colours. According to this, a customary home printer adds more of each colour to the darker spaces of an image, plus probably a bit of pure black which is called “K”. The three printing colours, however, are not red, green, and blue, but their complementary colours cyan, magenta, and yellow – in short: CMY. The reason for this is they absorb exactly one of the three light colours: Cyan absorbs red, magenta absorbs green, and yellow absorbs blue. What we see of CMYK colours is, hence, just a “reflection” of light with a decent loss of intensity. After all, the colour space in prints is “smaller”, that is to say, it contains fewer colour tones than RGB colour spaces. Consequently, an image for display on screens shouldn’t be converted to CMYK – it would appear less saturated and darker.

Left: RGB image | right: CMYK image

In the following and last article we’ll dive deeper into colours of screens and in printmaking, talk about the representation of black in particular, as well as colour “proofs” and their role in the preparation of prints. In this paragraph, for the sake of completeness, there’s another property of image files to be mentioned – the colour depth. Although this, usually, just concerns the editing team your knowledge about it can help to detect possible errors in the process, or to simply ask for the right thing. Colour depth refers to how many fine steps there are between colours. It’s indicated in ”bit” which is a binary system, meaning that 1-bit images can contain two colours only: black and white – or instead, on the RGB channels, black and red, black and green, or black and blue. The more bits an image has the more shades there are between those two endpoints. In 4-bit images, the transition from black to white (or R/G/B) is, therefore, finer, however, still resolved in 16 (2*2*2*2) visibly different nuances. Nowadays, images are generally 8- or 16-bit which, in concrete terms, results in either 256, or 65,536 shades between black and bright. Considering the three colour channels combined, an 8-bit image can carry over 16 Mio. colours, while a 16-bit photo is able to represent incredible 281+ trillion tones of colour. Not that we would be able to distinguish all of them with the naked eye… However, this tremendous colour depth gap between 8-bit and 16-bit photos can be profitable in two ways: Firstly, images that are edited in 16-bit mode have higher quality even after being transformed into 8-bit files. Images edited in 8-bit sometimes display dithering gradients caused by adjusting colours and contrast while this can’t happen on a larger scale of colours contained. Secondly, the advantage of 8-bit photos is their smaller file sizes. In fact, saving an image to JPEG, PNG, or any other established file format for screens always converts them to a colour depth of 8-bit. Given that the human eye can only see around 10 Mio. colours, 8-bit is normally enough for a great colour experience.

From left to right: 1-bit image | 8-bit image in greyscale | 8-bit image in RGB

If you enjoyed reading this article, or you found it helpful in one way or another, I would love to know (reach out)! You are also welcome to support my work and writing by donating whichever amount this is worth to you. I will thank you with lots of telepathic love and more interesting journal entries. Cheers!

How useful was this article?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this article.

As you found this useful...

Follow me!

I'm sorry this article wasn't useful for you!

Help me to improve it!

Any suggestions?