Resolutie en DPI, het blijft voor velen een probleem. Zelfs ontwerpers en sites die beweren deskundig te zijn, kramen onzin uit of halen er dingen bij die niet relevant zijn.

Op de website van een gerenomeerd tijdschrift staan afbeeldingen met een resolutie van 5400 x 3600 pixels, onnodig en mogelijk gevaarlijk. Een vriend vertelt me dat hij afbeeldingen voor websites altijd naar 96 dpi terugbrengt om ze kleiner te maken, waardoor zijn webpagina sneller wordt getoond. Dat klopt, maar het gaat uiteindelijk om de resolutie, niet om de dpi. Gisteren zag ik een site waar de DPI van monitoren werd vermeld, voor nu nog even onzin.

Ik kan nog even doorgaan met voorbeelden. Waarschijnlijk is het beter hier een keer het basis verhaal te vertellen. Zo compleet mogelijk dus het verhaal over resolutie en DPI.

Resolutie en DPI, het ware verhaal

Resolutie geeft de grootte van een afbeelding, monitor, TV-scherm etc. aan. Ongeveer zoals breedte en hoogte. Niets meer en niets minder. Een afbeelding kan dus bijvoorbeeld 5400 x 3600 pixels zijn (GEEN DPI). Je zou dat kunnen lezen als 5400 pixels breedte (horizontaal) en 3600 pixels hoogte (verticaal).

DPI betekent letterlijk dots per inch. Je kunt in plaats van dots ook pixels lezen, dat is in principe hetzelfde. Daarom zie je ook wel PPI, dus pixels per inch. Het is absolute onzin van een monitor de DPI te vermelden. Het mag, maar het is een dom rekensommetje dat je niet nodig hebt. DPI is alleen relevant voor je printer of voor een drukker als je grafisch drukwerk maakt.

Resolutie

Het beeld van mijn monitor sterk uitvergroot om lampjes zichtbaar te maken.

Simpel gezegd toont je monitor beeld op het scherm door hele kleine lampjes. Op een oude televisie kon je dat goed zien, als je er dichtbij stond zag je de puntjes en lichtjes. Je monitor en TV hebben een resolutie. Zoals ik hierboven vertelde is dat niets meer dan de breedte en hoogte in pixels. Bij een Full HD-scherm is het 1920 x 1080 pixels.

Je kunt je dat voorstellen als 1920 pixels in de breedte en 1080 pixels in de hoogte. Wil je een afbeelding beeldvullend op zo’n scherm (monitor) dan moet je afbeelding dus 1920 x 1080 pixels zijn. Er zijn tegenwoordig ook monitoren met hogere resolutie, bijv. 1920 x 1200 pixels, 2880 x 1800 pixels etc.

DPI

Het is nog niet logisch om het er op dit moment al over te hebben. Maar ik doe het toch omdat er veel misverstand bestaat. DPI, dots per inch dus, van je afbeelding is niet relevant voor het tonen van je afbeelding op een scherm (website). De vriend die het op 96 dpi zet omdat het dan kleiner zou zijn is echt onzinnig bezig. Of niet? Onthoud voorlopig dat het bij de monitor gaat om resolutie, een HD monitor wil een afbeelding van 1920 x 1080 pixels.

Het tijdschrift met de afbeeldingen van 5400 x 3600 pixels gebruikt een dpi van 300 dpi. Dat had evengoed 72 dpi mogen zijn. Want zoals hierboven aangegeven is dpi irrelevant voor de monitor. Toch noem ik het onnodig en gevaarlijk. Maar dat heeft uitsluitend te maken met auteursrechten en een eventuele vervolgstap. Want je kunt zo’n te grote afbeelding namelijk downloaden van hun site en het bij een drukker in goede kwaliteit afdrukken op ongeveer A3-formaat.

Eerste samenvatting

• • Resolutie is de grootte van een afbeelding, TV-scherm, monitor e.d. in breedte en hoogte (of als je dat liever zegt lengte en breedte)
  • DPI is niet van belang voor het tonen van een afbeelding op een monitor
  • DPI is de (af)drukkwaliteit en grootte van een afbeelding op een printer of bij de drukker

Resolutie en DPI, geïllustreerd uitgelegd

Ik gebruik bij deze geïllustreerde uitleg van resolutie en DPI een foto van een kat of poes. Het is gemaakt door Tran Mau uit Vietnam. De afbeelding is 5400 x 3600 pixels en 300 dpi. Zoals je hierboven kunt lezen kun je zo’n foto gebruiken om er een professionele afdruk van te maken op ongeveer A3 (42 cm x 29,7 cm). Hieronder de afbeelding met informatie in Photoshop. In andere programma’s is dezelfde informatie te vinden en bijvoorbeeld ook bij ‘Eigenschappen’, tabblad ‘Details’ in Windows Verkenner:

In het informatiekader zie je dat de afbeelding 5400 pixels breed (width) is en 3600 dpi hoog (height). Bovenin het kader zie je staan dat de bestandsgrootte 55,6 megabyte is. Dat is de grootte als je het bestand ongecomprimeerd bewaard, bijvoorbeeld in TIFF-formaat. Wanneer je het bewaard als gecomprimeerde jpg met maximale kwaliteit wordt de grootte ongeveer 10 mb, bij hoge kwaliteit is dat nog slechts 2 mb en bij lage kwaliteit 0,9 mb (900 kb). De wijze van bewaren (opslaan) is dus al een manier om de bestandsgrootte te verkleinen.

Beeldvullend op monitor

Ik wil de foto van de poes beeldvullend tonen op een monitor van 1920 x 1280 pixels. Daartoe verklein ik de originele afbeelding. De originele grote afbeelding van de poes heb ik vanzelfsprekend ergens veilig op mijn harde schijf staan. Photoshop toont na het verkleinen de volgende informatie:

Bij width en height zie je dat de afbeelding nu een resolutie heeft van 1920 x 1280 pixels. En je ziet dat de bestandsgroote kleiner is. Het leuke is dat Photoshop ook aangeeft wat die grootte was voor ik de resolutie veranderde. De bestandsgrootte is nu dus 7,03 mb.

Ik ga nu de dots/pixels per inch aanpassen (jammer en verwarrend dat Photoshop dat de resolutie noemt).

Je ziet dat de pixels per inch nu op 72 staat. De bestandsgrootte is echter niet veranderd. Die is nog steeds 7,03 mb en de resolutie is dus ook nog de gewenst 1920 x 1280 pixels. Dit is dus een goede afbeelding voor een beeldvullende opname op een Full HD monitor (nogmaals, DPI is daarbij dus niet relevant).

Afbeelding op website

Maar ik wil de afbeelding niet beeldvullend, ik ga het immers gebruiken bij een tekst op een website. Ik kan natuurlijk gewoon de hierboven gemaakte afbeelding gebruiken. De website software zal de afbeelding automatisch verkleinen naar een passend formaat. Dat ik de afbeelding toch verklein naar het gewenste formaat maakt echter de bestandgrootte ook kleiner, van 7 naar 1 mb.

Ik heb breedte van de resolutie teruggebracht naar 740 pixels breed. Vanzelfsprekend houd ik daarbij het slotje links gesloten, de zogenaamde aspect ratio of beeldverhouding. De verkleining gebeurt daardoor evenredig. Als je dus bijvoorbeeld de breedte twee keer kleiner maakt, wordt de hoogte ook automatisch twee keer kleiner. Verklein of vergroot je niet op die wijze, dan krijg je verkeerde verhoudingen. Zie hieronder

Afdrukken

Printers en drukkers werken met dots per inch. In plaats van pixels en lampjes zijn het inktdruppeltjes. In principe maakt dat niet uit. Wat wel uitmaakt voor de kwaliteit van de afdruk zijn het aantal inktdruppeltjes op een vaste afstand. Met andere woorden, hoe dicht de inktdruppeltjes bij elkaar staan.

Bij 72 druppels in een centimeter is een afbeelding vanzelfsprekend minder scherp dan bij 300 druppels in diezelfde centimeter. Stel je hebt  een afbeelding met een van 900 x 900 pixels. Die wil je afdrukken een printer met 300 dots per inch. Dan zal je afbeelding dus 3 bij 3 inch worden (900 druppeltjes op een lijntje van 300 druppels per inch). Wanneer je wilt weten hoe groot de afbeelding kan worden bij een afbeelding met minder handige resolutie moet je gaan rekenen. In een programma gaat dat vanzelfsprekend makkelijker:

Ik hebben de afbeelding van het tijdschrift gepakt, ter illustratie. Eerst het linkerplaatje. Naast het woordje pixel kun je bij Photoshop op een pijltje klikken om een menu te openen. Daar zet ik de eenheid van pixel naar centimenters. Op het rechterplaatje zie je het resultaat. Bij een ander programma zal het anders gaan, maar de informatie is vanzelfsprekend identiek. Zoals gezegd bij 300 dpi krijg je een afbeelding van ongeveer A3 (42 x 29,7 cm).

LET OP. Bij een monitor gaat het dus alleen om resolutie. Ga je afdrukken, dan speelt resolutie in combinatie met DPI.

Neem je genoegen met een minder mooie afdruk, bijvoorbeeld 150 dpi, dan kun je de afbeelding vanzelfsprekend groter afdrukken (bij afdrukken gaat het om de verhouding resolutie en DPI). Ik pak weer even de afbeelding van 900 x 900 pixels als voorbeeld. Bij 300 dpi (300 druppels op een inch) gaf dat een afbeelding van 3 bij 3 inch. Dezelfde afbeelding bij 150 dpi geeft dan een afbeelding van 6 bij 6 inch (de 6 x 150 = 900). Bij 75 dpi wordt dat 12 bij 12 inch oftewel 30,48 bij 30,48 cm (1 inch = 2,54 cm)

Tweede samenvatting

• Resolutie (breedte x hoogte in pixels) bepaalt de bestandsgrootte
• Verkleinen van de bestandsgrootte kan alleen door resolutie te verkleinen en/of de bewaarkeuze (gecomprimeerde jpg, png, tiff)
• DPI is de (af)drukkwaliteit en grootte van een afbeelding op een printer of bij de drukker
  • 300 dpi betekent 300 inktdruppeltjes op een inch. Het zorgt voor een scherper afbeelding
  • Tezamen met de resolutie van de afbeelding bepaalt DPI de grootte van een afdruk (print)

Aanvullende informatie

• Een pixel van een afbeelding in bijvoorbeeld Photoshop is een definitie van een kleur, zeg maar een kleurcode. Om een RGB-plaatje af te drukken heb je drie inktdruppeltjes nodig (rood, groen en blauw). Hetzelfde geldt voor het tonen op een monitor. Wanneer bij resolutie van een monitor gesproken wordt over resolutie, gaat het dus eigenlijk over 3 lampjes. Dus 1920 pixels van een monitor zijn eigenlijk 3 x 1920 lampjes.
• Op verschillende sites vertellen ze over pixeldichtheid en andere zaken. Dat is fijn en als je het interessant lijkt moet je het zeker lezen. Maar bovenstaande uitleg verandert er nauwelijks door.  In feite komt het erop neer dat monitoren vroeger een heel lage resolutie hadden. Je kon bij wijze van spreken de pixels (lichtjes) tellen. Met de komst van smartphones en andere kleine schermen verbeterde de techniek. Er kunnen nu heel veel pixels op een klein oppervlak. Op een iPhone 11+ scherm van 6,23 cm zijn dat 2436 x 1125 pixels. Die pixels staan zo dicht bij elkaar dat men is gaan werken met de term pixeldichtheid. Nog steeds geldt dat je voor bijvoorbeeld beeldvullend op je monitor de resolutie aanhoudt en dpi vergeet. Als je het heel technisch wilt maken, zou je met pixeldichtheid kunnen werken. Maar de software helpt, zelfs als je een afbeelding van bijvoorbeeld 1218 x 562,5 pixels op een iphone 11+ toont. Met het blote oog kun je immers die pixels niet zien.
• Camera- en smartphone-fabrikanten vermelden vrijwel altijd naast resolutie ook een dpi bij een foto. Die dpi zie je ook als je op je computer naar de details van een foto kijkt. Maar het is in feite flauwekul en dus eigenlijk belastende informatie. Mijn camera heeft een sensor met een resolutie van 5472 x 3648 pixels. Dat is het enige werkelijke gegeven dat telt. Pas als ik de foto wil afdrukken speelt DPI een rol, die bepaalt dan hoe groot ik de foto kan afdrukken. Dat wordt bij 72 dpi een grote foto van lage kwaliteit of bij 300 dpi een kleine foto van scherper kwaliteit.
• Een rare analogie om het verschil tussen resolutie en DPI anders te vertellen. Beschouw resolutie als een jerry can van 10 liter en wat je erin doet als DPI. Het maakt niet uit of je er water in doet of whiskey, meer dan 10 liter krijg je er niet in. Je monitor heeft, net als de sensor van je camera, nu eenmaal een bepaalde afmeting (resolutie). Pas als je met de inhoud iets wilt doen komt er meer bij kijken. Heeft de drukker grote glazen, dan kun je met die 10 liter wellicht 20 glazen vullen. Bij kleinere glazen misschien wel 50 glazen.
• De resolutie van sensor en monitor is dus een vast gegeven. Hoe groot wordt met mijn camera (5472 x 3648 pixels) de afbeelding bij een afdruk op een 72 dpi printer? Het antwoord is 5472 / 72 = 76 inch = 193 cm breed en 3648 / 72 = 50,66 inch = 128,7 cm hoog. Hetzelfde bestand van mijn camera kan ik ook afdrukken op een 300 dpi printer. Dan wordt de afdruk dus kleiner: 46,33 x 30,89 centimeter (dat is iets groter dan A3 en iets kleiner dan A3+ ).