DPI Myte
Størrelsen af et billede i et website layout er vigtigt. Fra korrekt justering til at få lige den rigtige mængde hvidt rum, er det vigtigt at dimensionere fotos og grafik korrekt på forhånd for at skabe et afbalanceret udseende.
Billeder på nettet måles i pixels . Men mange mennesker går gennem besværet med at indstille deres billeder til 72 punkter pr. Tomme (
Misforståelsen om opløsning i digitale billeder, der er bundet til nettet, er, at de skal opfylde et bestemt antal prikker pr. Tomme.
I print påvirker pixler pr. Tomme og prikker pr. Tomme størrelsen af et billede på en side. DPI gælder ikke for layout på internettet.
Når nogen konverterer et billede til 72 DPI , tilføjer de et ekstra trin uden nogen fordel. Websider måles i pixels, ikke virkelige enheder som inches.
Når nogen spørger dig om et webbillede, der er, siger to inches bredt, vurderer de hvordan det ser ud på deres egen skærm. Uden at ændre billedets pixeldimensioner, vil billedet vises større eller mindre på forskellige skærme - og ville endda se anderledes ud på samme skærm ved en anden opløsningsindstilling.
Pixelstørrelse afhænger af konteksten
En pixel (som er kort for "billedelement") er den mindste måleenhed på et gitter, der viser et digitalt billede. DPI måler, hvor store pixler eller punkter der er, når de udskrives.
Billedet nedenfor vises i forskellige DPI s.
36 DPI
150 DPI
3.096 DPI
Download og åbne dem i et billedredigeringsprogram for at se selv. Alle tre ser det samme, fordi de blev ændret, ikke resampled.
Ændring af størrelse Pixelstørrelser; Resampling Ændrer Pixel Count
Der er to måder at forstørre et billede på: Tilføj flere pixels eller gøre pixels større. På samme måde kan du reducere billedets størrelse ved at fjerne billedpunkter eller krympe pixels. Men krympning og barbering er to forskellige processer.
Vist ovenstående, ændrer størrelsen på et billede, størrelsen af dets pixels, ikke dens antal pixels. Vi øger eller mindsker ikke antallet af pixels, kun ændrer, hvor store disse pixels er, når de udskrives. Det er et omvendt forhold: billeder med større pixels vil have en lavere pixeldensitet (færre pixels i samme antal tommer), når de udskrives.
Vist ovenstående ændrer resampling billedets størrelse ved at øge eller formindske antallet af pixels. Billeder med flere pixels vil indeholde mere information og ofte gøre for rigere grafik.
Webdesign er bekymret for resampling, ikke ændring af størrelse, fordi hver pixel på en webside altid vil være den samme størrelse. En webside, der måler 800 pixel bredt, kan rumme billeder op til 800 pixels bred. At gøre hver pixel bredere ændrer ikke, at layoutet kun kan indeholde 800 af dem.
Du kan ikke få vist et billede større på skærmen ved at ændre størrelsen på pixlerne, fordi hver pixel på samme skærm altid vil være den samme størrelse.
Ændring og resampling i Photoshop
Photoshops billedstørrelse-boks ( Billede, Üí Billedstørrelse ) styrer både størrelsen og resampling af billeder.
Afkrydsningsfeltet "Resample" ændrer, hvor mange pixels der passer til en lineær tommer - bogstaveligt talt pixlerne pr. Tommer. Hvis vi slukker for resampling, ville den eneste måde at ændre billedets størrelse være at forstørre pixlerne til udskrivning.
Når resampling-boksen ikke er markeret, ændrer billedets fysiske størrelse, når du udskriver, men ikke antallet af pixels. Når der udskrives, vises et billede større eller mindre. På en webside ville det være den samme størrelse.
Et eksperiment
At finde ud af, om DPI betyder noget i weblayouter, kan laves ved et lille eksperiment. Hvis vi ændrer et billede fra 300 x 100 pixel ved 72 DPI til 300 x 100 pixel ved 144 DPI, hvor mange pixels ville vi have?
- Lav et billede 300 pixel bredt og 100 pixel højt, med 72 dpi .
- Lad os lave nogle matte. Hvor mange pixels ville det være?
- Rediger nu billedet til 300 x 100 pixel ved 144 dpi .
- Lad os gøre lidt mere matematik. Hvor mange pixels er det?
Svarene er:
- 300 x 100 = 30.000
- 300 x 100 er stadig 30.000
Pixel pr. Tommer på skærmen
Antallet af pixels per inch er stadig relevant online, men DPI-indstillinger påvirker ikke, hvordan et billede vises.
Computer skærme kan fysisk måles i tommer, og hver viser et vist antal pixels. Lad os f.eks. Sige, at en 19 "skærm viser 1280 x 1024 pixels. Brugeren kan ændre den for at vise 1600 x 1200 pixel og dermed øge sin PPI (dvs. tilføje flere pixels i samme antal inches.) Den vigtige forskel i print er, at du kan styre billedets pixel pr. Tomme.
Du kan prøve dette på de fleste moderne computere. På en Mac, gå til Apple Menu, Üí Systemindstillinger , og klik derefter på "Displays" for at se de forskellige opløsninger, hvor du kan indstille din skærm. For Windows skal du højreklikke på skrivebordet og vælge "Tilpas" og derefter vælge "Skærmindstillinger." Skift skærmopløsningen (antal pixels) og se, da emnerne på din Mac eller pc-skrivebord bliver større eller mindre.
Det er klart, at din skærm ikke ændres i størrelse. Men hvis du holder en linjal på skærmen, vil du se, at størrelsen af ikoner og vinduer er omvendt proportional med antallet af viste pixels. For eksempel, en 13 "bærbar computer, en 17" CRT skærm og en 21 "fladskærm kan alle præsentere et skrivebord, der måler 1024 x 768 pixels. Flere pixels betyder mindre ikoner; færre pixel betyder større ikoner. Flere pixels i samme skærm giver dig en højere pixeldensitet; færre pixel er lavere.
Forskellen bliver mere mærkbar med andre typer skærme:
- Et digitalt billboard, der måler 47 x 12 fod, kan kun bruge 888 x 240 pixels (ca. 1,6 PPI).
- En iPhone skærm i dag måler 2 x 3 tommer og rummer 320 x 480 pixel (ca. 160 PPI) .
En enkelt PNG-fil, der måler 100 x 100 pixels, passer til både 888 x 240 billboard og 320 x 480 iPhone. Men det ser ud til at være meget større på billboardet, fordi bordets pixels er 100 gange større end iPhone'erne (1,6 versus 160).
Illustrationen nedenfor viser to enheder med forskellige pixeldimensioner.
Det samme billede vises på to forskellige skærme. Forskellene i hvert displayets PPI gør billedet på den højre side vist større, selv om det har færre pixler samlet.
Du kan teste dette selv:
- Opret en JPG, der måler 960 x 100 pixel, med en pixeldensitet.
- Mål det med hånden med en linjal.
- Se på det samme billede på en computer med en større eller mindre skærm. Hvis du for eksempel har lavet billedet på en 20 "skærm, skal du teste det på en 13" bærbar computer.
- Udskriv det samme antal pixels ved forskellige pixeldensiteter for at se forskellige størrelser på papir.
Resultatet er, at dette ene billede ville have det samme antal pixels, men en anden bredde i inches. Webstedets layout vises i forskellige størrelser, på trods af identisk kode. (I et ekstremt tilfælde skal du se hele siden på en iPhone; 960 pixels er monteret på tre tommer eller mindre, uden at selve filen ændres.)
Hvorfor 72 er signifikant
Mange filformater, herunder JPG, TIF og PSD, gemmer et billedets pixeldensitetsindstilling. Hvis du gemmer en JPG ved 200 pixel / tommer, forbliver den på 200.
Andre formater, herunder GIF og PNG, kasserer pixeldensiteten. Hvis du gemmer et 200 DPI billede som en PNG, vil det slet ikke gemme DPI. Mange billedredaktører, herunder Adobe Photoshop, antager, at et billede er 72
Halvfjerds er et magisk nummer i trykning og typografi. I 1737 brugte Pierre Fournier enheder kaldet ciceros til at måle type. Seks ciceros var 0,998 tommer.
Omkring 1770 brugt François-Ambroise Didot lidt større ciceros til at passe til den franske standardfod. Didots pica var 0,176 inches lang og opdelt jævnt i 12 trin. I dag kalder vi dem point.
I 1886 etablerede det amerikanske punktsystem en "pica" som 0,166 tommer. Seks af disse er 0,996 tommer.
Ingen af enhederne stødte langt fra 12 point per pica: 6 picas per inch = 72 point per inch. Det var en vigtig standard i 1984, da Apple forberedte sig til at introducere den første Macintosh-computer. Mac'ens grænseflade blev designet til at hjælpe folk med at relatere computeren til den fysiske verden. Software ingeniører brugte metaforen af et skrivebord til at beskrive den banefulde drift af en computer, lige ned til "papir", "mappe" og "skraldespand" ikoner.
Hver pixel på den originale Macs 9-tommer (diagonale) og 512 x 342 pixel skærmen måles nøjagtigt 1 x 1 point. Hold en linjal til glasset, og du vil se, at 72 pixel ville faktisk fylde 1 tommer. På denne måde, hvis du udskriver et billede eller et stykke tekst og holder det ved siden af skærmen, vil både billedet og hard copy være den samme størrelse.
Men tidlige digitale billeder var klumpede og hakkede. Da skærmteknologi og hukommelse blev forbedret, kunne computere vise flere pixels på samme størrelsesskærm. Matchning af en udskrift til skærmen blev endnu mindre sikker, når raster- og vektorapps tillod brugere at zoome ind og undersøge pixels nøje. I midten af 1990'erne kunne Microsoft Windows skifte mellem 72 og 96 pixels per tomme på skærmen. Dette gjorde mindre skriftstørrelser mere læselige, fordi flere pixels var tilgængelige pr. Punktstørrelse.
I dag forstår designere og klienter, at størrelsen af varer på skærmen ikke er absolut. Forskelle i skærmstørrelse og zoomfunktionalitet er almindelige. Men 72 er stadig standard.
Højere Screen PPI betyder bedre læsbarhed ved mindre punktstørrelser
Skærme med højere PPI er gode til læsbarhed. Flere pixels per inch gør letterformularer lettere at læse. Det betyder også, at billeder og tekst skal være større (i pixels) for at kunne læses.
Teksteksemplet ovenfor er blevet ændret fra to forskellige skærm-PPI-indstillinger. Den øverste række har mindre pixels (dvs. en højere PPI på skærmen), så 8 point er den mindste læsbare skriftstørrelse. Tekst i den nederste række er næppe læselig under 10 point.
Da pc-skærme overgik pixeldensiteten af Mac-skærme i midten af 1990'erne, byggede websites bygget på Windows mindre skrifttypestørrelser, meget til utilfredshed hos Mac-brugere. I dag nyder skærme til begge platforme pixeldensiteter, der er høje nok til at gøre forskellene mumlet.
Elastiske web billeder med moderne browsere
Vi ved nu, at DPI alene ikke ændrer billedets størrelse på internettet, og vi har ingen kontrol over hvilken enhed et billede vises på. Så er et billedets pixeldimensioner det eneste der betyder noget? Ja ... for nu.
Fluidbreddelayouter, som ændrer sig i forhold til browserens størrelse, kan bedre rumme en række enheder og skærme. Moderne browsere, fra FireFox 3, Safari 3 og Internet Explorer 7 og op, er bedre end ældre versioner ved scaling billeder på flugt. Det max-width CSS-ejendomme tvinger billeder til at passe til deres beholder, men ikke vokse forbi deres faktiske størrelse. For eksempel:
p { width: 25% } / * En fjerdedel af indholdsområdet * / img { max-width: 100% }
p { width: 50% } / * Halvdelen af indholdsområdet * / img { max-width: 100% }
p { width: 75% } / * Tre fjerdedele af indholdsområdet * / img { max-width: 100% }
/ * Ingen bredde indstillet til stykket * / img { max-width: 100% }
Her ses et billede på 800 pixel passer ind i fire forskellige stykke elementer. Hvis sidebredden var fleksibel, ville størrelsen på dit browservindue udvide billedet - men ikke forbi de oprindelige dimensioner på 800 x 323 pixel. Det ville aldrig blive forvrænget eller "pixelleret" fra overudvidelse.
Forberedelse af billeder til internettet betyder planlægning i pixels. Hvis nogen spørger om en 2-tommers grafik til internettet, ikke for udskrivning, spørg dem, "Hvor store er dine pixels?"
Skrevet udelukkende til WDD af Ben Gremillion . Ben er en freelance webdesigner der løser kommunikationsproblemer med bedre design.
I hvilke medier tæller opløsningen? Hvad er den bedste måde at dimensionere onlinebilleder på? Del dine ideer nedenfor.