De mythe van DPI
De grootte van een afbeelding in de lay-out van een website is belangrijk. Van een goede uitlijning tot het verkrijgen van precies de juiste hoeveelheid witruimte, het vooraf dimensioneren van foto's en afbeeldingen is essentieel voor het creëren van een gebalanceerde look.
Afbeeldingen op internet worden gemeten in pixels . Toch gaan veel mensen door de moeite van het instellen van hun afbeeldingen tot 72 dots per inch (
De misvatting over resolutie in digitale afbeeldingen die voor het web zijn bestemd, is dat ze aan een bepaald aantal dots per inch moeten voldoen.
In gedrukte vorm hebben pixels per inch en dots per inch invloed op de grootte van een afbeelding op een pagina. DPI is niet van toepassing op de lay-out op internet.
Wanneer iemand een afbeelding converteert naar 72 DPI , voegen ze een extra stap toe zonder voordeel. Webpagina's worden gemeten in pixels, geen echte eenheden zoals inches.
Wanneer iemand je vraagt om een webafbeelding van bijvoorbeeld twee centimeter breed, schatten ze hoe deze op hun eigen monitor zou verschijnen. Zonder de pixelafmetingen van de afbeelding te wijzigen, zou die afbeelding op verschillende monitoren groter of kleiner lijken en zou deze er zelfs anders uitzien op dezelfde monitor met een andere resolutie-instelling.
Pixelafmeting is afhankelijk van de context
Een pixel (wat een afkorting is voor "beeldelement") is de kleinste maateenheid op een raster dat een digitaal beeld weergeeft. DPI meet hoe groot die pixels of punten zijn wanneer ze worden afgedrukt.
De onderstaande afbeelding wordt weergegeven in verschillende DPI 's.
36 DPI
150 DPI
3.096 DPI
Download en open ze in een beeldbewerker om het zelf te zien. Alle drie zien er hetzelfde uit omdat ze van grootte zijn veranderd, niet opnieuw zijn bemonsterd.
Grootte van pixelgroottes wijzigen; Resampling Verandert Pixeltelling
Er zijn twee manieren om een afbeelding te vergroten: voeg meer pixels toe of maak de pixels groter. Op dezelfde manier kunt u de afbeeldingsgrootte verkleinen door pixels of krimpende pixels af te scheren. Maar krimpen en scheren zijn twee verschillende processen.
Zoals hierboven is weergegeven, verandert het formaat van een afbeelding de grootte van de pixels, niet het aantal pixels. We vergroten of verkleinen het aantal pixels niet, maar veranderen alleen hoe groot die pixels zijn bij het afdrukken. Het is een omgekeerde relatie: afbeeldingen met grotere pixels hebben een lagere pixeldichtheid (minder pixels in hetzelfde aantal inches) wanneer ze worden afgedrukt.
Zoals hierboven is weergegeven, verandert de grootte van de afbeelding met resamplen door het aantal pixels te verhogen of te verlagen. Afbeeldingen met meer pixels bevatten meer informatie en zorgen vaak voor rijkere afbeeldingen.
Bij webontwerp gaat het om resampling, niet om resizing, omdat elke pixel in een webpagina altijd dezelfde grootte zal hebben. Een webpagina met een breedte van 800 pixels biedt plaats aan afbeeldingen tot 800 pixels breed. Elke pixel breder maken verandert niets aan het feit dat de lay-out er slechts 800 kan bevatten.
Je kunt een afbeelding op het scherm niet groter laten lijken door de grootte van de pixels aan te passen, omdat elke pixel op hetzelfde scherm altijd dezelfde grootte zal hebben.
Resizing en Resampling in Photoshop
Het vak Afbeeldingsformaat van Photoshop ( Afbeelding, Üí Afbeeldingsformaat ) bestuurt zowel de grootte als de resampling van afbeeldingen.
Het selectievakje "Resample" verandert hoeveel pixels passen in een lineaire inch-letterlijk de pixels per inch. Als we resampling uitschakelen, is de enige manier om de grootte van de afbeelding te wijzigen, het vergroten van de pixels voor afdrukken.
Als het resampling-vakje niet was aangevinkt, zou het wijzigen van het vak "resolutie" de fysieke grootte van het beeld wijzigen als het wordt afgedrukt, maar niet het aantal pixels. Wanneer afgedrukt, zou een afbeelding groter of kleiner lijken. Op een webpagina zou het dezelfde grootte hebben.
Een experiment
Uitzoeken of DPI van belang is in weblay-outs kan worden gedaan door een klein experiment. Als we een afbeelding van 300 x 100 pixels bij 72 DPI tot 300 x 100 pixels bij 144 DPI wijzigen, hoeveel pixels zouden we dan hebben?
- Maak een afbeelding van 300 pixels breed en 100 pixels lang bij 72 DPI .
- Laten we wat rekenwerk doen. Hoeveel pixels zou dat zijn?
- Verander het formaat van de afbeelding naar 300 x 100 pixels bij 144 DPI .
- Laten we wat meer wiskunde doen. Hoeveel pixels is dat?
De antwoorden zijn:
- 300 x 100 = 30.000
- 300 x 100 is nog steeds 30.000
Pixels per inch op scherm
Het aantal pixels per inch is nog steeds online relevant, maar DPI-instellingen hebben geen invloed op hoe een afbeelding wordt weergegeven.
Computerbeeldschermen kunnen fysiek in inches worden gemeten en elk geeft een bepaald aantal pixels weer. Stel dat een 19-inch monitor 1280 x 1024 pixels weergeeft. De gebruiker kan dit wijzigen om 1600 x 1200 pixels weer te geven, waardoor de PPI wordt verhoogd (dwz meer pixels in hetzelfde aantal inch worden toegevoegd.) Het belangrijke verschil in afdruk is dat u de pixels per inch van een afbeelding kunt regelen.
Je kunt dit op de meeste moderne computers proberen. Ga op een Mac naar Apple Menu, Üí Systeemvoorkeuren en klik vervolgens op "Beeldschermen" om de verschillende resoluties weer te geven waarop u uw monitor kunt instellen. Klik voor Windows met de rechtermuisknop op het bureaublad en selecteer 'Aanpassen' en kies vervolgens 'Weergave-instellingen'. Wijzig de schermresolutie (aantal pixels) en kijk hoe de items op uw Mac- of pc-bureaublad groter of kleiner worden.
Het is duidelijk dat je monitor niet in omvang verandert. Maar als u een liniaal op het scherm houdt, ziet u dat de grootte van pictogrammen en vensters omgekeerd evenredig is met het aantal weergegeven pixels. Bijvoorbeeld een 13-inch laptop, een 17-inch CRT-monitor en een 21-inch flatpanel-monitor kunnen alle een desktop met een resolutie van 1024 x 768 pixels presenteren. Meer pixels betekent kleinere pictogrammen; minder pixels betekent grotere pictogrammen. Meer pixels op dezelfde monitor geven u een hogere pixeldichtheid; minder pixels is lager.
Het verschil wordt meer merkbaar met andere soorten beeldschermen:
- Een digitaal reclamebord van 47 bij 12 voet zou mogelijk slechts 888 x 240 pixels (ongeveer 1,6 PPI) gebruiken.
- Vandaag een iPhone-scherm meet 2 x 3 inch en bevat 320 x 480 pixels (ongeveer 160 PPI) .
Een enkel PNG-bestand van 100 x 100 pixels past op zowel het billboard van 888 x 240 als de 320 x 480 iPhone. Maar op het billboard lijkt het veel groter omdat de pixels van het bord 100 keer groter zijn dan die van de iPhone (1,6 tegen 160).
De onderstaande afbeelding toont twee apparaten met verschillende pixelafmetingen.
Hetzelfde beeld wordt op twee verschillende schermen weergegeven. De verschillen in de PPI van elk beeldscherm laten het beeld op het rechterdisplay groter lijken, hoewel het over het algemeen minder pixels heeft.
Je kunt dit zelf testen:
- Maak een JPG van 960 x 100 pixels bij elke pixeldichtheid.
- Meet het met de hand met een liniaal.
- Bekijk dezelfde afbeelding op een computer met een groter of kleiner beeldscherm. Als u bijvoorbeeld de afbeelding op een 20-inch scherm hebt gemaakt, test u deze op een 13-inch laptop.
- Print hetzelfde aantal pixels bij verschillende pixeldichtheden om verschillende formaten op papier te zien.
Het resultaat is dat dit ene beeld hetzelfde aantal pixels zou hebben maar een andere breedte in inches. De lay-out van de website zou in verschillende formaten verschijnen, ondanks dezelfde code. (Voor een extreem geval, kijk naar de hele pagina op een iPhone; 960 pixels is aangebracht tot drie inch of minder, zonder dat het bestand zelf wordt gewijzigd.)
Waarom 72 is belangrijk
Veel bestandsindelingen, waaronder JPG, TIF en PSD, slaan de pixeldichtheidsinstelling van een afbeelding op. Als u een JPG op 200 pixels / inch opslaat, blijft deze op 200 staan.
Andere indelingen, waaronder GIF en PNG, verwijderen de pixeldichtheid. Als u een 200 DPI-afbeelding opslaat als PNG, wordt die DPI helemaal niet opgeslagen. Veel afbeeldingseditors, waaronder Adobe Photoshop, nemen aan dat een afbeelding 72 is
Tweeënzeventig is een magisch getal in afdrukken en typografie. In 1737 gebruikte Pierre Fournier eenheden genaamd ciceros om het type te meten. Zes ciceros waren 0.998 inches.
Rond 1770 gebruikte François-Ambroise Didot iets grotere cicero's om in de standaard Franse "voet" te passen. De pica van Didot was 0,1776 centimeter lang en gelijkmatig verdeeld in 12 incrementen. Vandaag noemen we ze punten.
In 1886 vestigde het Amerikaanse puntensysteem een "pica" op 0,16 inch. Zes hiervan zijn 0.996 inch.
Geen van de eenheden is ooit ver afgedwaald van 12 punten per pica: 6 picas per inch = 72 punten per inch. Het was een belangrijke standaard in 1984, toen Apple zich voorbereidde op de introductie van de eerste Macintosh-computer. De interface van de Mac is ontworpen om mensen te helpen de computer te relateren aan de fysieke wereld. Software-ingenieurs gebruikten de metafoor van een bureau om de geheimzinnige werking van een computer te beschrijven, tot en met de pictogrammen "papier", "map" en "prullenbak".
Elke pixel op het 9-inch (diagonaal) en 512 x 342 pixelscherm van de originele Mac heeft exact 1 x 1 punt gemeten. Houd een liniaal op het glas en je zou zien dat 72 pixels eigenlijk 1 inch zou vullen. Op deze manier, als u een afbeelding of stuk tekst hebt afgedrukt en naast het scherm hebt gehouden, zijn zowel de afbeelding als de afdruk dezelfde grootte.
Maar vroege digitale foto's waren onhandig en gekarteld. Naarmate de schermtechnologie en het geheugen verbeterden, konden computers meer pixels weergeven op hetzelfde formaatbeeldscherm. Het afstemmen van een afdruk op het scherm werd nog minder zeker wanneer raster- en vector-apps gebruikers in staat stelden om in te zoomen en de pixels van dichtbij te bekijken. Tegen het midden van de jaren negentig kon Microsoft Windows op het scherm tussen 72 en 96 pixels per inch schakelen. Hierdoor werden kleinere lettergrootten leesbaarder omdat er meer pixels per puntgrootte beschikbaar waren.
Tegenwoordig begrijpen ontwerpers en klanten dat de afmetingen van items op het scherm niet absoluut zijn. Verschillen in schermgrootte en zoomfunctionaliteit zijn alledaags. Maar 72 is nog steeds de standaard.
PPI op hoger scherm betekent betere leesbaarheid bij kleinere puntformaten
Schermen met een hogere PPI zijn geweldig voor de leesbaarheid. Meer pixels per inch maken lettervormen gemakkelijker te lezen. Het betekent ook dat afbeeldingen en tekst groter (in pixels) leesbaar moeten zijn.
Het bovenstaande tekstvoorbeeld is verkleind uit twee verschillende PPI-scherminstellingen. De bovenste rij heeft kleinere pixels (dwz een hogere PPI op het scherm), dus 8 punten is de kleinst leesbare lettergrootte. Tekst op de onderste rij is nauwelijks leesbaar onder 10 punten.
Omdat pc-monitors de pixeldichtheid van Mac-monitoren in het midden van de jaren negentig overtroffen, beschikten op Windows gebaseerde websites over een kleinere lettergrootte, tot grote ontsteltenis van Mac-gebruikers. Tegenwoordig genieten schermen voor beide platforms van pixeldichtheden die hoog genoeg zijn om de verschillen te verbloemen.
Elastische webafbeeldingen met moderne browsers
We weten nu dat DPI alleen de grootte van een afbeelding op het web niet verandert en we hebben geen controle over op welk apparaat een afbeelding wordt weergegeven. Dus, zijn de pixeldimensies van een afbeelding het enige dat telt? Ja, voor nu.
Vloeiende-breedteplay-outs, die veranderen in overeenstemming met de grootte van de browser, kunnen beter geschikt zijn voor een reeks apparaten en monitoren. Moderne browsers, van FireFox 3, Safari 3 en Internet Explorer 7 en hoger, zijn beter dan oudere versies om afbeeldingen snel te schalen. De max-width CSS-eigenschappen dwingen afbeeldingen om in hun container te passen, maar groeien niet voorbij hun werkelijke grootte. Bijvoorbeeld:
p { width: 25% } / * Een kwart van het inhoudsgebied * / img { max-width: 100% }
p { width: 50% } / * De helft van het inhoudsgebied * / img { max-width: 100% }
p { width: 75% } / * Driekwart van het inhoudsgebied * / img { max-width: 100% }
/ * Geen breedte ingesteld voor de alinea * / img { max-width: 100% }
Hier zien we één 800-pixel-breed beeld passen in vier alinea-elementen van verschillende grootte. Als de paginabreedte flexibel was, zou het vergroten / verkleinen van uw browservenster de afbeelding uitbreiden, maar niet voorbij zijn oorspronkelijke 800 x 323 pixelafmetingen. Het zou nooit worden vervormd of "gepixeld" door overexpansie.
Afbeeldingen voorbereiden voor internet betekent plannen in pixels. Als iemand vraagt om een 2-inch afbeelding voor internet, niet voor afdrukken, vraagt u hem: "Hoe groot zijn uw pixels?"
Exclusief geschreven voor WDD door Ben Gremillion . Ben is een freelance webdesigner die communicatieproblemen met beter ontwerp oplost.
In welke media telt resolutie? Wat is de beste manier om online afbeeldingen te vergroten? Deel uw ideeën hieronder.