Als je al een tijdje op computers en digitale afbeeldingen bent geweest, vooral als je een webdesigner of een fotograaf bent die je foto's online publiceert, heb je ongetwijfeld gehoord dat de juiste resolutie voor afbeeldingen die op internet worden weergegeven, of op computerschermen is dit in het algemeen 72 pixels per inch (ppi).
Je hebt misschien zelfs gehoord dat hoewel 72 ppi correct is voor afbeeldingen die op een Mac worden weergegeven, een Windows-pc de resolutie moet instellen op 96 ppi.
Sommigen zeggen dat het "ppi" ( pixels per inch) is, anderen beweren dat het "dpi" ( dots per inch) is, en het hele ding zou erg verwarrend zijn als het niet om één klein feit ging - het is allemaal complete onzin! In deze zelfstudie leren we waarom er gewoon niet zoiets bestaat als een standaardweb- of schermresolutie en waarom u zich, als uw afbeeldingen voor internet zijn bestemd, helemaal geen zorgen hoeft te maken over de afbeeldingsresolutie!
Een beetje geschiedenis …
De oorsprong van de schermresolutie van 72 ppi dateert al uit het midden van de jaren 80 toen Apple zijn eerste Macintosh-computers uitbracht. Deze computers hadden een ingebouwd 9 inch-scherm met een schermresolutie van 72 pixels per inch. Waarom 72 pixels per inch? Dit komt omdat de Macintosh-schermen specifiek zijn ontworpen om in perfecte harmonie te werken met Apple's ImageWriter-printers, die een printresolutie hadden van 144 dots per inch - precies twee keer de resolutie van het scherm. Dit maakte het gemakkelijk om de schermweergave naar de afgedrukte pagina te schalen, wat betekende dat uw tekst en afbeeldingen op het scherm konden worden bekeken op exact dezelfde grootte als ze zouden verschijnen als ze werden afgedrukt. Later, toen Apple grotere schermen voor de Macintosh begon te maken, zorgden ze ervoor dat de schermresoluties op dezelfde 72 pixels per inch werden ingesteld, zodat gebruikers altijd een nauwkeurig voorbeeld op het scherm van het afgedrukte document zouden zien (zolang ze met behulp van een ImageWriter-printer).
Maar de schermresolutie van 72 pixels per inch was alleen een standaard bij Apple en bleef niet lang bestaan. Externe bedrijven die monitors voor de Macintosh verkopen, hebben zich niet aan de norm gehouden en concurrerende pc-monitors ook niet. Vandaag, bijna drie decennia later, is de technologie sterk verbeterd en zijn de dagen van schermen met een resolutie van slechts 72 ppi al lang voorbij. Zelfs Apple, het bedrijf dat de hele zaak is begonnen, verkoopt nu hun beeldschermen met veel hogere resoluties. Niemand maakt meer 72 ppi-schermen. Niemand gebruikt 72 ppi-schermen meer. En toch, hoewel die oude technologie ver achter ons ligt, blijven veel mensen geloven dat we de resolutie van onze afbeeldingen in Photoshop op 72 pixels per inch moeten instellen voordat ze naar het web worden geüpload. De meeste mensen denken dat de reden is dat de afbeeldingen correct op het scherm worden weergegeven, dus laten we beginnen met het leren van een eenvoudige manier om te bewijzen dat uw computermonitor, samen met elke moderne computermonitor, een resolutie heeft die veel hoger is dan 72 ppi.
De 72 PPI-standaard op de proef stellen
Net als iedereen tegenwoordig heeft het beeldscherm van uw computer (of het nu een zelfstandige monitor is, een alles-in-één systeem zoals een iMac of een deel van een laptop) een schermresolutie van meer dan 72 pixels per inch, en u hebt geen om mijn woord te geloven. Je kunt het eenvoudig zelf testen. Het enige dat u nodig hebt is een liniaal of meetlint. Wanneer een winkel u een computermonitor verkoopt, vertellen ze u meestal de grootte op basis van de diagonale breedte, met enkele gangbare maten 17 inch, 19 inch, 24 inch, enzovoort. Dat is prima, maar voor onze test hier hoeven we ons niet druk te maken om dat aantal. Wat we moeten weten, is de werkelijke breedte, in inches, van uw scherm. Om dat te doen, pak je gewoon je liniaal of meetlint en meet je je schermgebied van links naar rechts. Zorg ervoor dat u alleen het schermgebied zelf meet. Voeg geen rand toe rond het scherm. We hebben de werkelijke breedte van het scherm nodig (computermonitorfoto van Shutterstock):
Meet de breedte van uw scherm (exclusief de buitenrand).
Nadat u de breedte hebt gemeten, moet u er ook voor zorgen dat uw monitor is ingesteld op de oorspronkelijke schermresolutie, wat het werkelijke aantal pixels is dat uw scherm van links naar rechts en van boven naar beneden kan weergeven. Een monitor met een native schermresolutie van 1920 x 1080 (tegenwoordig tegenwoordig 'full HD' genoemd) bevat 1920 pixels van links naar rechts en 1080 pixels van boven naar beneden. Ik gebruik momenteel een monitor met een native schermresolutie van 2560 x 1440, maar mijn laptop heeft een native schermresolutie van 1920 x 1200, dus deze varieert, wat betekent dat u de native schermresolutie van uw specifieke monitor moet weten en zorg ervoor dat dit is waarop u de monitor hebt ingesteld in de weergaveopties van uw besturingssysteem.
Nu u de werkelijke breedte van uw scherm hebt gemeten en ervoor hebt gezorgd dat uw monitor op de oorspronkelijke schermresolutie werkt, neemt u gewoon het eerste nummer van de native om erachter te komen wat de werkelijke schermresolutie is (in pixels per inch) schermresolutie, die u de breedte van uw scherm in pixels vertelt en deze door de breedte van uw scherm in inches deelt. Mijn oorspronkelijke schermresolutie is bijvoorbeeld 2560 x 1440, dus ik neem dat eerste getal, 2560, wat de breedte van het scherm in pixels is, en ik deel het door de breedte in inches, wat in mijn geval was 23.4 (of toch redelijk dichtbij). Met behulp van de handige ingebouwde rekenmachine van mijn besturingssysteem, 2560 ÷ 23.4 = 109.4, die ik zal afronden op 109. Dus, alleen met deze snelle en eenvoudige test, heb ik bevestigd dat mijn schermresolutie 109 pixels per inch is, niet 72 pixels per inch. Je eigen test met je scherm kan je een ander resultaat geven dan de mijne, maar tenzij je nog steeds een van die originele Macintosh-computers uit het midden van de jaren 80 gebruikt, zal het veel hoger zijn dan 72 ppi.
Als je wilt, kun je hetzelfde doen met de hoogte van je scherm. Neem gewoon uw liniaal of meetlint en meet de werkelijke hoogte van het scherm in inches (vermijd nogmaals het randgebied eromheen):
Meet de hoogte van uw scherm (exclusief de buitenrand).
Neem vervolgens het tweede cijfer uit de oorspronkelijke schermresolutie van uw scherm, die u de hoogte in pixels geeft, en deel het door de hoogte in inches. Nogmaals, mijn oorspronkelijke schermresolutie is 2560 x 1440, dus ik neem dat tweede getal, 1440, en deel het door mijn gemeten schermhoogte van 13, 2 inch. Met behulp van mijn rekenmachine, 1440 ÷ 13.2 = 109.09, wat ik weer zal afronden op 109. Zoals we kunnen zien, zou u ongeveer hetzelfde resultaat moeten krijgen met behulp van de breedte of hoogte van uw scherm. In mijn geval werkten ze allebei uit tot 109 pixels per inch, niet 72 pixels per inch.
Laten we ter vergelijking de werkelijke schermresolutie van mijn laptop bekijken. Het is een MacBook Pro (natuurlijk gemaakt door Apple, het bedrijf dat ons vele jaren geleden de originele 72 ppi-standaard gaf). Mijn MacBook Pro heeft een native schermresolutie van 1920 x 1200, dus net als voorheen, neem ik dat eerste getal, 1920, dat me de schermbreedte in pixels geeft en ik deel het door de breedte van de scherm in inches, in dit geval 14.4. Dus, 1920 ÷ 14.4 = 133.3, wat ik afrond tot 133 pixels per inch . Dat is veel hoger dan 72 en zelfs hoger dan mijn zelfstandige monitor. Ik zal hetzelfde doen met de hoogte, de hoogte nemen in pixels (1200) en deze delen door de hoogte in inches (9). 1200 ÷ 9 = 133, 3, opnieuw afgerond op 133 pixels per inch.
Twee verschillende schermen, elk met twee verschillende schermresoluties (109 ppi en 133 ppi), beide aanzienlijk hoger dan 72 ppi, wat volgens veel mensen vandaag de dag de standaardresolutie voor het bekijken van afbeeldingen op het web en op het scherm blijft. Als mijn scherm, uw scherm en het scherm van alle anderen een resolutie hebben hoger dan 72 ppi, om nog maar te zwijgen van het feit dat mijn beide schermen zeer verschillende resoluties van elkaar hadden en uw scherm mogelijk ook een andere resolutie heeft, dan duidelijk niet alleen is er geen officiële standaard meer voor schermresolutie, maar zelfs als die er was, zou deze niet langer 72 ppi zijn. Die dagen zijn, net als de originele Macintosh-computers waarvoor het is ontworpen, verleden tijd.
Plug-in shortcodes, acties en filters: fout in shortcode (ads-essentials-middle)
Beeldresolutie beïnvloedt de afdrukgrootte, niet de schermgrootte
Als het feit dat computerschermen tegenwoordig allemaal schermresoluties van meer dan 72 ppi hebben, u niet heeft overtuigd dat er niet meer zoiets bestaat als een standaard voor schermresolutie van 72 ppi, is hier nog een belangrijk feit. Als je eerder onze tutorial Beeldresolutie, Pixelafmetingen en Documentgrootte hebt gelezen, weet je al dat beeldresolutie absoluut niets te maken heeft met hoe je afbeelding op je scherm verschijnt. In feite heeft een digitaal beeld op zichzelf helemaal geen inherente resolutie. Het zijn alleen pixels. Het heeft een bepaald aantal pixels van links naar rechts en een bepaald aantal van boven naar beneden. De breedte en hoogte van een afbeelding, in pixels, staan bekend als de pixelafmetingen, en dat is alles waar een computerscherm om geeft.
De grootte waarmee een afbeelding op uw scherm verschijnt, hangt slechts van twee dingen af: de pixelafmetingen van de afbeelding en de weergaveresolutie van uw scherm. Zolang u uw scherm hebt ingesteld op de oorspronkelijke weergaveresolutie zoals we eerder hebben besproken, wordt een afbeelding pixel voor pixel weergegeven. Met andere woorden, elke pixel in de afbeelding neemt precies één pixel op uw scherm in beslag. Een afbeelding van 640 x 480 pixels vult bijvoorbeeld een gebied van 640 x 480 pixels van uw scherm. Een banner met een breedte van 800 pixels op een website zou 800 pixels breed op het scherm verschijnen. Niet meer niet minder. En ongeacht waar u de resolutie van de afbeelding in Photoshop op instelt, of het nu 72 ppi, 300 ppi of 3000 ppi is, het heeft helemaal geen effect op hoe groot of klein de afbeelding op het scherm verschijnt.
Dat komt omdat de afbeeldingsresolutie slechts één ding beïnvloedt: de grootte van de afbeelding wanneer deze wordt afgedrukt . Door de resolutie in Photoshop in te stellen, vertellen we de printer, niet het scherm, hoeveel pixels in de afbeelding in een centimeter papier moeten worden geperst. Hoe meer pixels u in elke centimeter papier drukt, hoe kleiner de afbeelding wordt weergegeven wanneer deze wordt afgedrukt. Over het algemeen geldt: hoe meer pixels u per inch afdrukt, hoe hoger de afdrukkwaliteit.
We kunnen eenvoudig uitzoeken hoe groot een foto wordt afgedrukt op basis van een bepaalde beeldresolutie. Neem eenvoudig de breedte van de foto in pixels en deel deze door uw afbeeldingsresolutie, neem vervolgens de hoogte van de foto in pixels en deel deze ook door de afbeeldingsresolutie. Als we een afbeelding van 640 x 480 pixels nemen als voorbeeld en de resolutie instellen op 72 ppi in Photoshop, kunnen we de breedte en hoogte van de foto delen door de resolutie om te bepalen dat deze ongeveer 8, 9 x op papier wordt afgedrukt 6, 7 inch. Als we de resolutie in Photoshop verhogen tot bijvoorbeeld 240 ppi, wat een meer algemene afdrukresolutie is, dan weten we dat de foto opnieuw zou afdrukken als we de wiskunde doen, waarbij de pixelbreedte en -hoogte worden gedeeld door 240 ppi. van 2, 7 x 2 inch, wat veel kleiner is dan als we het hadden afgedrukt op 72 ppi, maar de algehele afdrukkwaliteit zou veel beter zijn. Maar wat belangrijker is om hier te begrijpen, is dat we door het wijzigen van de resolutie op geen enkele manier de weergave van het beeld op het scherm beïnvloeden.
Om duidelijker te zien hoe resolutie de afdrukgrootte beïnvloedt en niet de schermgrootte, is hier een afbeelding die ik open heb in Photoshop. Deze kleine man heeft ook geprobeerd al deze 72 ppi webresolutie-dingen te begrijpen, maar het lijkt erop dat hij het een beetje overdenkt (denkt kinderfoto van Shutterstock):
De beeldresolutie is echt niet zo ingewikkeld, maar zeker een A voor inspanning.
Ik open het dialoogvenster Afbeeldingsgrootte van Photoshop door naar het menu Afbeelding in de menubalk bovenaan het scherm te gaan en Afbeeldingsgrootte te kiezen:
Ga naar Afbeelding> Afbeeldingsgrootte.
Boven aan het dialoogvenster Afbeeldingsgrootte bevindt zich de sectie Pixelafmetingen die ons de breedte en hoogte van de afbeelding in pixels vertelt. Hier kunnen we zien dat mijn foto zowel een breedte als een hoogte van 500 pixels heeft, waardoor het een behoorlijke grootte heeft voor weergave op het web. Dit is het enige deel van het dialoogvenster Afbeeldingsgrootte waar uw computerscherm om geeft - de werkelijke pixelafmetingen van de afbeelding:
Het gedeelte Pixelafmetingen toont ons de breedte en hoogte in pixels.
Onder de pixelafmetingen bevindt zich de sectie Documentgrootte die ons vertelt hoe groot de afbeelding op dit moment op papier zou verschijnen als we deze zouden afdrukken. Dit gedeelte behandelt uitsluitend het afdrukformaat en heeft helemaal geen effect op hoe de afbeelding op het scherm verschijnt. Het is ook de thuisbasis van de allerbelangrijkste resolutie- optie (de reden dat we er allemaal zijn!), Wat logisch is omdat de resolutie de afdrukgrootte beïnvloedt, niet de schermgrootte. Zoals we kunnen zien, is Photoshop doorgegaan en heeft de resolutie van mijn foto ingesteld op 72 pixels per inch (ja, zelfs Photoshop draagt bij aan de mythe van 72 ppi), en direct boven de optie Resolutie, in de vakken Breedte en Hoogte, kan zien dat bij 72 ppi mijn foto van 500 x 500 pixels zou afdrukken op 6, 944 x 6, 944 inch op papier (500 ÷ 72 = 6.944):
Het gedeelte Documentgrootte toont ons het afdrukformaat op basis van de huidige resolutie. Het heeft geen effect op de schermgrootte.
Laten we kijken wat er gebeurt als ik de afbeeldingsresolutie verhoog. Voordat ik dat doe, schakel ik echter snel de optie Afbeelding opnieuw instellen onder aan het dialoogvenster uit zodat de afbeelding de oorspronkelijke pixelafmetingen behoudt wanneer ik de resolutie wijzig:
Schakel het selectievakje Resample Image uit.
Met Resample Image uitgeschakeld, zal ik de resolutie verhogen van 72 pixels per inch tot 240 pixels per inch . We kunnen in het gedeelte Pixelafmetingen bovenaan zien dat het verhogen van de resolutie de werkelijke pixelafmetingen niet heeft gewijzigd. Het is nog steeds 500 x 500 pixels, wat betekent dat het nog steeds een gebied van 500 x 500 pixels op het scherm inneemt. Maar met 240 ppi zou het nu op papier afdrukken met een formaat van slechts 2, 083 x 2, 083 inch (500 × 240 = 2.083). Het wijzigen van de resolutie veranderde het afdrukformaat van de foto, maar verder niets:
De afbeelding zou nu kleiner worden afgedrukt, maar zou exact dezelfde pixelgrootte van 500 x 500 op het scherm blijven.
Ik zal de beeldresolutie opnieuw verhogen, dit keer tot iets geks zoals 500 pixels per inch, om de wiskunde echt gemakkelijk te maken. Een afbeelding van 500 x 500 pixels, ingesteld op een resolutie van 500 pixels per inch, zou worden afgedrukt als een afbeelding van 1 x 1 inch op papier (500 ÷ 500 = 1). Nogmaals, de werkelijke pixelafmetingen van de afbeelding zijn niet gewijzigd. Zelfs bij 500 ppi zou mijn afbeelding op het scherm niet groter of kleiner lijken dan bij 72 ppi of 240 ppi, of bij elke resolutie omdat het nog steeds een afbeelding van 500 x 500 pixels is, ongeacht de resolutie-instelling, en de pixelafmetingen zijn al uw computerscherm geeft om:
Bij 500 ppi zou de afbeelding inderdaad zeer klein worden afgedrukt, maar zou deze nog steeds als een afbeelding van 500 x 500 pixels op het scherm verschijnen.
Ten slotte volgt hier een vergelijking van de afbeelding zoals deze wordt weergegeven bij alle drie de bovenstaande resoluties. Ik heb de afbeelding kleiner gemaakt (het is nu slechts 200 x 200 pixels), dus ik kan alle drie versies naast elkaar passen, maar de eerste versie links werd opgeslagen met 72 ppi. De versie in het midden werd opgeslagen op 240 ppi en de versie aan de rechterkant werd opgeslagen op 500 ppi:
Een 72 ppi (links), 240 ppi (midden) en 500 ppi (rechts) versie van de afbeelding.
Zoals we duidelijk kunnen zien, heeft de resolutie helemaal geen effect op hoe het beeld er op het scherm uitziet. Alle drie versies nemen elk een ruimte in van exact 200 x 200 pixels, ongeacht de resolutie-instelling. De kwaliteit van elke versie is ook exact hetzelfde. Elke versie zou in een heel andere grootte afdrukken vanwege de verschillende resolutie-instellingen, maar het maakt geen enkel verschil uit de schermgrootte of de beeldkwaliteit.
Hoewel het twijfelachtig is dat deze 72 ppi web- en schermresolutie-onzin binnenkort zal verdwijnen, hoop ik dat deze tutorial op zijn minst het gemakkelijker heeft gemaakt om te zien waarom het op dit moment in feite onzin is. Computermonitors hebben tegenwoordig allemaal schermresoluties van meer dan 72 ppi en de optie voor beeldresolutie in Photoshop heeft alleen invloed op de afdrukgrootte van een foto, niet op de schermgrootte.
Elke foto met pixelafmetingen die klein genoeg zijn om op internet te worden weergegeven, is voor iedereen te klein om een versie van goede kwaliteit met een nuttige grootte te downloaden en af te drukken, dus met al deze redenen in gedachten, als uw foto alleen op het scherm wordt bekeken, of het is op internet, in een e-mail of wat het ook is, er is gewoon geen logische reden waarom u de resolutie zou moeten instellen op 72 ppi in Photoshop. Tenzij u de foto afdrukt, hoeft u zich helemaal geen zorgen te maken over de afbeeldingsresolutie. En daar hebben we het!