Klik hier om af te drukken.


Resolutie en DPI, het basis verhaal

resolutie en dpi

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 gevaarlijk. Een vriend vertelt me dat hij afbeeldingen voor websites altijd naar 96 dpi brengt om ze kleiner te maken, waardoor zijn webpagina sneller getoond wordt. 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

lampjes van monitor [1]

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, 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 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:

Resolutie en DPI - afb. 1 [2]

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 1080 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:

Resolutie en DPI - afb. 2 [3]

Bij width en height zie je dat de afbeelding nu een resolutie heeft van 1920 x 1080 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).

beeldvullend op 1920 - afb. 3 [4]

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 1080 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.

Resolutie naar 740 - afb. 4 [5]

Ik heb 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

beeldverhouding afb. 5 [6]

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. Heb je een afbeelding van 900 x 900 pixels en ga je die afdrukken op 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 rekeken. In een programma gaat dat vanzelfsprekend makkelijker:

DPI - afb. 6 [7]

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

Aanvullende informatie