Myten om DPI
Størrelsen på et bilde i et nettsted layout er viktig. Fra riktig justering for å få akkurat den rette mengden hvit plass, er det viktig å lagre bilder og grafikk på forhånd, for å skape et balansert utseende.
Bilder på nettet måles i piksler . Likevel går mange mennesker gjennom problemer med å sette bildene sine til 72 punkter per tomme (
Misforståelsen om oppløsning i digitale bilder som er bundet til nettet, er at de må møte et visst antall punkter per tomme.
I utskrift påvirker piksler per tomme og prikker per tomme størrelsen på et bilde på en side. DPI gjelder ikke for layout på nettet.
Når noen konverterer et bilde til 72 DPI , legger de til et ekstra trinn uten fordel. Websider måles i piksler, ikke virkelige enheter som tommer.
Når noen spør deg om et webbilde som er to inches bredt, beregner de hvordan det vil vises på egen skjerm. Uten å endre bildens pikseldimensjoner, vil bildet vise seg større eller mindre på forskjellige skjermer - og ville til og med se forskjellig ut på samme skjerm ved en annen oppløsning.
Pixelstørrelse avhenger av kontekst
En piksel (som er kort for "bildeelement") er den minste måleenheten på et rutenett som viser et digitalt bilde. DPI måler hvor stor de piksler, eller punktene, er når de skrives ut.
Bildet nedenfor vises i forskjellige DPI s.
36 DPI
150 DPI
3.096 DPI
Last ned og åpne dem i et bilderedigeringsprogram for å se selv. Alle tre ser det samme fordi de ble endret, ikke resamplert.
Endre størrelse Endringer Pixel Størrelser; Resampling Endrer Pixel Count
Det er to måter å forstørre et bilde på: Legg til flere piksler eller få piksler større. På samme måte kan du redusere størrelsen på et bilde ved å rake piksler eller krympe piksler. Men krymping og barbering er to forskjellige prosesser.
Vist ovenfor, endrer størrelsen på et bilde, endres størrelsen på pikslene, ikke antall piksler. Vi øker eller reduserer ikke antall piksler, bare endrer hvor stor de piksler er når de skrives ut. Det er et invers forhold: bilder med større piksler vil ha en lavere pixeldensitet (færre piksler i samme antall tommer) når de skrives ut.
Vist ovenfor, endrer resampling størrelsen på bildet ved å øke eller redusere antall piksler. Bilder med flere piksler vil inneholde mer informasjon og gjør ofte for rikere grafikk.
Webdesign er opptatt av resampling, ikke resizing, fordi hver piksel på en nettside alltid vil være i samme størrelse. En nettside som måler 800 piksler bredt, kan ta imot bilder opptil 800 piksler bredt. Å gjøre hver piksel bredere endrer ikke det faktum at utformingen kun kan inneholde 800 av dem.
Du kan ikke få et bilde til å vises større på skjermen ved å endre størrelsen på pikslene fordi hver piksel på samme skjerm alltid vil ha samme størrelse.
Endre størrelse og Resampling i Photoshop
Photoshop's Image Size-boksen ( Bilde, Üí Bildestørrelse ) styrer både størrelsen og resampling av bilder.
Avkrysningsruten "Resample" endrer hvor mange piksler som passer inn i en lineær tomme-bokstavelig talt piksler per tomme. Hvis vi slår av resampling, vil den eneste måten å endre størrelsen på bildet være å forstørre bildene for utskrift.
Med resampling-boksen igjen ukontrollert, vil endring av "oppløsning" -boksen endre bildens fysiske størrelse når den skrives ut, men ikke antall piksler. Når det skrives ut, vises et bilde større eller mindre. På en nettside vil det være den samme størrelsen.
Et eksperiment
Å finne ut om DPI er viktig i weboppsett kan gjøres ved et lite eksperiment. Hvis vi endrer et bilde fra 300 x 100 piksler på 72 DPI til 300 x 100 piksler ved 144 DPI, hvor mange piksler ville vi ha?
- Lag et bilde 300 piksler bredt og 100 piksler høyt, med 72 DPI .
- La oss gjøre litt matte. Hvor mange piksler ville det være?
- Endre størrelsen på bildet til 300 x 100 piksler ved 144 DPI .
- La oss gjøre litt mer matte. Hvor mange piksler er det?
Svarene er:
- 300 x 100 = 30.000
- 300 x 100 er fortsatt 30 000
Piksler per tomme på skjermen
Antall piksler per tomme er fortsatt relevant online, men DPI-innstillinger påvirker ikke hvordan et bilde vises.
Datamaskere kan fysisk måles i tommer, og hver viser et visst antall piksler. For eksempel, la oss si at en 19 "skjerm viser 1280 x 1024 piksler. Brukeren kan endre den til å vise 1600 x 1200 piksler, og dermed øke sin PPI (dvs. legge til flere piksler i samme antall inches.) Den viktige forskjellen i utskrift er at du kan styre et bilde piksler per tomme.
Du kan prøve dette på de fleste moderne datamaskiner. På en Mac, gå til Apple-menyen, Üí Systemvalg , og klikk deretter på "Displays" for å se de forskjellige oppløsningene der du kan stille inn skjermen. For Windows, høyreklikk på skrivebordet og velg "Tilpass", og velg deretter "Skjerminnstillinger." Endre skjermoppløsningen (antall piksler) og se på når elementene på Mac eller PC-skrivebordet blir større eller mindre.
Tydeligvis endres ikke skjermen i størrelse. Men hvis du holder en linjal på skjermen, ser du at størrelsen på ikoner og vinduer er omvendt proporsjonal med antall piksler som vises. For eksempel, en 13 "laptop, en 17" CRT skjerm og en 21 "flatskjerm kan alle presentere et skrivebord som måler 1024 x 768 piksler. Flere piksler betyr mindre ikoner; færre piksler betyr større ikoner. Flere piksler i samme skjerm gir deg høyere pixeldensitet; færre piksler er lavere.
Forskjellen blir mer merkbar med andre typer skjermer:
- Et digitalt billboard som måler 47 x 12 fot, kan bare bruke 888 x 240 piksler (ca. 1,6 PPI).
- En iPhone-skjerm i dag måler 2 x 3 tommer og har 320 x 480 piksler (ca 160 PPI) .
En enkelt PNG-fil som måler 100 x 100 piksler, passer på både 888 x 240 billboard og 320 x 480 iPhone. Men det ser ut til å være mye større på billboardet fordi styrets piksler er 100 ganger større enn iPhone-er (1,6 versus 160).
Illustrasjonen nedenfor viser to enheter med forskjellige pikselmål.
Det samme bildet vises på to forskjellige skjermer. Forskjellene i hver visnings PPI gjør at bildet på høyre side vises større, selv om det har færre piksler totalt.
Du kan teste dette selv:
- Opprett en JPG som måler 960 x 100 piksler, med en hvilken som helst pixeldensitet.
- Mål det for hånd med en linjal.
- Se på det samme bildet på en datamaskin med en større eller mindre skjerm. For eksempel, hvis du opprettet bildet på en 20-tommers skjerm, test det på en 13-tommers bærbar PC.
- Skriv ut samme antall piksler ved forskjellige pikseldensiteter for å se forskjellige størrelser på papir.
Resultatet er at dette bildet ville ha samme antall piksler, men en annen bredde i tommer. Nettstedet layout vil vises i forskjellige størrelser, til tross for identisk kode. (For et ekstremt tilfelle, se på hele siden på en iPhone; 960 piksler er montert på tre tommer eller mindre, uten at selve filen blir endret.)
Hvorfor 72 er betydelig
Mange filformater, inkludert JPG, TIF og PSD, lagrer et bilde pikseldensitetsinnstilling. Hvis du lagrer en JPG ved 200 piksler / tommer, forblir den på 200.
Andre formater, inkludert GIF og PNG, kaster bort piksel tetthet. Hvis du lagrer et 200 DPI-bilde som en PNG, vil det ikke lagre DPI i det hele tatt. Mange bildeditorer, inkludert Adobe Photoshop, antar at et bilde er 72
Syttito er et magisk nummer i utskrift og typografi. I 1737 brukte Pierre Fournier enheter kalt ciceros til å måle type. Seks ciceros var 0,998 tommer.
Omkring 1770 brukte François-Ambroise Didot litt større ciceros til å passe til den franske "foten". Didots pica var 0,176 inches lang og delt jevnt i 12 trinn. I dag kaller vi dem poeng.
I 1886 etablerte det amerikanske punktsystemet et "pica" som 0,166 tommer. Seks av disse er 0,996 tommer.
Ingen av enhetene har strayed langt fra 12 poeng per pica: 6 picas per tomme = 72 poeng per tomme. Det var en viktig standard i 1984, da Apple var forberedt på å introdusere den første Macintosh-datamaskinen. Mac-grensesnittet ble utviklet for å hjelpe folk å forholde seg til datamaskinen til den fysiske verden. Programvareingeniører brukte metaforen til et skrivebord for å beskrive den baneformede driften av en datamaskin, helt ned til "papir", "mappe" og "søppel" ikoner.
Hver piksel på den opprinnelige Macens 9-tommers (diagonale) og 512 x 342 pixel skjerm målt nøyaktig 1 x 1 poeng. Hold en linjal til glasset, og du vil se at 72 piksler faktisk ville fylle 1 tommer. På denne måten, hvis du har skrevet ut et bilde eller et stykke tekst og holdt det ved siden av skjermen, vil både bildet og kopien være av samme størrelse.
Men tidlige digitale bilder var klumpete og hakkede. Som skjermteknologi og minne forbedret, kunne datamaskiner vise flere piksler på samme størrelse skjerm. Å passe en utskrift på skjermen ble enda mindre sikker når raster- og vektorappene tillot brukere å zoome inn og undersøke piksler nøye. I midten av 1990-tallet kunne Microsoft Windows bytte mellom 72 og 96 piksler per tomme på skjermen. Dette gjorde mindre skriftstørrelser mer lesbare fordi flere piksler var tilgjengelige per punktstørrelse.
I dag forstår designere og kunder at størrelsen på elementene på skjermen ikke er absolutt. Forskjeller i skjermstørrelse og zoomfunksjonalitet er vanlige. Men 72 er fortsatt standard.
Høyere skjerm PPI betyr bedre lesbarhet ved mindre punktstørrelser
Skjermer med høyere PPI er gode for lesbarhet. Flere piksler per tomme gjør brevformularer enklere å lese. Det betyr også at bilder og tekst må være større (i piksler) for å kunne leses.
Teksteksemplet ovenfor har blitt endret fra to forskjellige PPI-innstillinger for skjerm. Den øverste raden har mindre piksler (dvs. høyere PPI på skjermen), så 8 poeng er den minste lesbare skriftstørrelsen. Tekst i den nederste raden er knapt leselig under 10 poeng.
Da PC-skjermer overgikk pikseldensiteten til Mac-skjermer i midten av 1990-tallet, skryte nettsteder som ble bygget på Windows, mindre skriftstørrelser, mye til forferdelsen til Mac-brukere. I dag har skjermene for begge plattformene pikseldensiteter som er høy nok til å gjøre forskjellene mulige.
Elastiske webbilder med moderne nettlesere
Vi vet nå at DPI alene ikke endrer et bilde størrelse på nettet, og vi har ingen kontroll over hvilken enhet et bilde vises på. Så er et bilde piksel dimensjoner det eneste som betyr noe? Ja ... for nå.
Fluidbreddeoppsett, som endres i henhold til nettleserens størrelse, kan bedre imøtekomme en rekke enheter og skjermer. Moderne nettlesere, fra FireFox 3, Safari 3 og Internet Explorer 7 og opp, er bedre enn eldre versjoner ved å skalere bilder i fly. De max-width CSS-egenskapen tvinger bilder til å passe til beholderen, men ikke vokse forbi deres faktiske størrelse. For eksempel:
p { width: 25% } / * En fjerdedel av innholdsområdet * / img { max-width: 100% }
p { width: 50% } / * Halvparten av innholdsområdet * / img { max-width: 100% }
p { width: 75% } / * Tre fjerdedeler av innholdsområdet * / img { max-width: 100% }
/ * Ingen bredde angitt for avsnittet * / img { max-width: 100% }
Her ser vi et bilde på 800 piksler passe inn i fire forskjellige stykkelementer. Hvis sidebredden var fleksibel, ville størrelsen på nettleservinduet utvide bildet - men ikke forbi de opprinnelige 800 x 323 pixeldimensjonene. Det ville aldri bli forvrengt, eller "pixellert" fra over-utvidelse.
Forbereder bilder på nettet betyr planlegging i piksler. Hvis noen spør om en 2-tommers grafikk for Internett, ikke for utskrift, spør dem: "Hvor stor er dine piksler?"
Skrevet utelukkende for WDD av Ben Gremillion . Ben er en freelance webdesigner som løser kommunikasjonsproblemer med bedre design.
I hvilket medie teller oppløsningen? Hva er den beste måten å formatere onlinebilder på? Del dine ideer nedenfor.