DPI: n myytti
Sivuston asettelun kuvan koko on tärkeä. Oikeasta kohdistuksesta oikean määrän valkotasoon saakka, valokuvien ja grafiikan koon määrittäminen etukäteen on välttämätön tasapainoisen ulkoasun luomiseksi.
Verkossa olevat kuvat mitataan pikseleinä . Silti monet ihmiset menevät vaikeuksiin asettaa kuvat 72 pistettä tuumaa kohden (
Digitaalisten kuvien resurssien väärinkäsitys verkkoon sidottuna on, että niiden on täytettävä tietty määrä pisteitä tuumaa kohden.
Tulostettuna pikseliä tuumaa kohti ja pisteitä tuumaa kohden vaikuttavat kuvan sivun kokoon. DPI ei koske verkkoasennusta.
Kun joku muuntaa kuvan 72 DPI: ksi , he lisäävät ylimääräisen askeleen ilman hyötyä. Web-sivut mitataan pikseleissä, eivät todellisia yksiköitä, kuten tuumaa.
Kun joku pyytää verkkokuvaa, joka on esimerkiksi kaksi tuumaa leveä, he arvioivat, miten se näyttäisi omalla monitorillaan. Kuvan kuvan pikselimittareita muuttamatta tämä kuva näyttäisi suuremmalta tai pienemmältä eri näytöissä - ja näyttäisi jopa erilaiselta samalla näytöllä eri tarkkuusasetuksilla.
Pikselin koko riippuu kontekstista
Pikseli (joka on lyhyt "kuvaelementille") on pienin mittayksikkö ruudukossa, joka näyttää digitaalisen kuvan. DPI mittaa, kuinka suuret nämä pikselit tai pisteet ovat, kun ne tulostetaan.
Alla oleva kuva näkyy eri DPI s: ssä.
36 DPI
150 DPI
3 096 DPI
Lataa ja avaa heidät kuvankäsittelyohjelmassa nähdäksesi itsesi. Kaikki kolme näyttävät samanlaisilta, koska ne koottiin uudelleen, eivät resampled.
Muutosten koon muuttaminen Pixel-koot; Resampling muuttuu Pixel Count
Kuvan suurentamiseen on kaksi tapaa: lisää pikseleitä tai pienennä pikseleitä. Samoin voit pienentää kuvan koon parsimalla pikseleitä tai pienentämällä pikseleitä. Mutta kutistuminen ja parranajo ovat kahta eri prosessia.
Kuvan yläpuolella näkyvä koko muuttaa sen pikselien kokoa, ei pikselien määrää. Emme lisää tai vähennä pikseleiden lukumäärää, vaan muutetaan vain, kuinka suuret nämä pikselit tulostetaan. Se on käänteinen suhde: suuremmilla kuvapisteillä varustetuilla kuvilla on pienempi pikselitiheys (vähemmän pikseleitä samassa määrin tuumina) tulostettaessa.
Yllä esitetyllä tavalla resampling muuttaa kuvan kokoa lisäämällä tai vähentämällä sen pikselimäärä. Kuvat, joissa on useampia pikseleitä, sisältävät enemmän tietoa ja usein rikkaampi grafiikka.
Web-suunnittelussa on kyse resamplingista, eikä kokoa, koska jokainen web-sivun pikseli on aina samankokoinen. Web-sivu, joka mittaa 800 pikseliä leveä, mahtuu jopa 800 pikselin leveisiin kuviin. Jokaisen pikselin laajentaminen ei muuta sitä tosiasiaa, että ulkoasun koko voi olla vain 800.
Et pysty tekemään kuvaa näyttävämmäksi näytöllä muuttamalla sen pikseleitä, koska jokaisella pikselillä samassa näytössä on aina sama koko.
Muokkaus ja resampling Photoshopissa
Photoshopin kuvakoko-ruutu ( Kuva, Kuvan koko ) ohjaa sekä kuvan kokoa että resamplingia.
Resample-valintaruutu muuttaa kuinka monta pikseliä sopii lineaariseen tuuma-kirjaimellisesti pikseliä tuumaa kohden. Jos sammutamme resamplingin, ainoa tapa muuttaa kuvan kokoa olisi laajentaa pikseliä tulostukseen.
Kun resampling box ei ole valittu, muuttaminen "resoluutiolla" -ruutu muuttaisi kuvan fyysistä kokoa tulostettaessa, mutta ei pikselien määrää. Kun tulostettu, kuva näyttää suuremmalta tai pienemmältä. Web-sivulla olisi sama koko.
Kokeilu
Havainnollistaa, voidaanko DPI: n asioita web-asetteluissa tehdä pienellä kokeella. Jos muokkaamme kuvaa 300 x 100 kuvapistettä 72 DPI: stä 300 x 100 pikseliin 144 DPI: llä, kuinka monta pikseliä meillä olisi?
- Tee kuva 300 pikseliä leveä ja 100 pikseliä pitkä, 72 dpi .
- Tehdään jotain matematiikkaa. Kuinka monta pikseliä se olisi?
- Muuta koko kuva 300 x 100 pikseliä kohden 144 DPI .
- Tehdään muutama matematiikka. Kuinka monta pikseliä se on?
Vastaukset ovat:
- 300 x 100 = 30 000
- 300 x 100 on vielä 30 000
Pikseliä tuumaa näytöllä
Pikseliä tuumaa kohti on edelleen relevantti verkossa, mutta DPI-asetukset eivät vaikuta kuvan näyttämiseen.
Tietokonenäytöt voidaan mitata fyysisesti tuumina ja kukin näyttää tietyn määrän pikseleitä. Sanomme esimerkiksi, että 19 "monitorilla on 1280 x 1024 pikseliä. Käyttäjä voi muuttaa sen näyttämään 1600 x 1200 pikseliä, mikä nostaa sen PPI: tä (eli lisäämällä useampia pikseleitä samaan määrään tuumaa.) Tärkeä tulosero on, että voit hallita kuvan pikseliä tuumaa kohti.
Voit kokeilla tätä nykyaikaisimmilla tietokoneilla. Siirry Mac-tietokoneeseen Apple-valikossa, valitse Järjestelmäasetukset ja napsauta sitten "Näytöt" nähdäksesi eri resoluutiot, joilla voit asettaa näytön. Napsauta Windowsia hiiren kakkospainikkeella työpöydällä ja valitse "Muokkaa" ja valitse sitten Näyttöasetukset. Muuta näytön tarkkuutta (pikseleiden määrä) ja katsele, kun Mac- tai PC-työpöydän kohteet ovat suurempia tai pienempiä.
Tietenkin monitori ei muutu kokonaan. Mutta jos sinulla on hallitsija näytölle, näet, että kuvakkeiden ja ikkunoiden koko on kääntäen verrannollinen näyttökertojen määrään. Esimerkiksi 13 tuuman kannettava tietokone, 17 tuuman CRT-näyttö ja 21 "litteä näyttö voivat kaikki esittää työpöydän, joka mittaa 1024 x 768 pikseliä. Enemmän pikseleitä tarkoittavat pienempiä kuvakkeita pienemmät pikselit tarkoittavat suurempia kuvakkeita. Useammat pikselit samassa monitorissa antavat sinulle korkeamman pikselitiheyden; vähemmän pikseleitä on pienempi.
Ero näkyy paremmin muiden näyttötyyppien kanssa:
- 47 x 12 metrin mittainen digitaalinen mainostaulu voi käyttää vain 888 x 240 pikseliä (noin 1,6 PPI).
- IPhone-näyttö tänään mittaa 2 x 3 tuumaa ja pitää 320 x 480 pikseliä (noin 160 PPI) .
Yhden PNG-tiedoston, joka mittaa 100 x 100 pikseliä, sopisi sekä 888 x 240 -mainostauluun että 320 x 480 -puhelimeen. Mutta se näyttää paljon suurempi mainostaululla, koska hallituksen pikselit ovat 100 kertaa suurempia kuin iPhone (1.6 vs. 160).
Alla olevassa kuvassa on kaksi laitetta, joilla on eri pikselimitat.
Sama kuva näytetään kahdella eri näytöllä. Erot kunkin näytön PPI: ssa tekevät kuvan oikealla näytöllä suuremmaksi, vaikka siinä onkin vähemmän kuvapisteitä.
Voit testata tämän itse:
- Luo JPG, joka mittaa 960 x 100 pikseliä, missä tahansa pikselitiheydessä.
- Mittaa se käsin hallitsija.
- Katso samaa kuvaa tietokoneelta, jossa on suurempi tai pienempi näyttö. Jos esimerkiksi olet luonut kuvan 20 tuuman näytöllä, testaa se 13 tuuman kannettavassa tietokoneessa.
- Tulosta sama määrä pikseleitä eri pikselitiheydellä nähdäksesi eri kokoisia papereita.
Tuloksena on, että tällä kuvalla olisi sama määrä pikseleitä, mutta eri leveys tuumina. Verkkosivuston asettelu näyttäisi erikokoisina, vaikka sama koodi. (Ääritapauksessa katso koko iPhonen sivu, 960 pikseliä on kolme tuumaa tai vähemmän, ilman että tiedostoa itse muutettaisiin.)
Miksi 72 on merkittävä
Monet tiedostomuodot, kuten JPG, TIF ja PSD, tallentavat kuvan pikselitiheysasetuksen. Jos tallennat JPG: n 200 pikseliä / tuuma, se pysyy 200: ssa.
Muut formaatit, mukaan lukien GIF ja PNG, heikentävät pikselitiheyttä. Jos tallennat 200 DPI-kuvan PNG: ksi, se ei tallenna sitä DPI: tä lainkaan. Monet kuvankäsittelytoimet, kuten Adobe Photoshop, olettavat, että kuva on 72
Seitsemänkymmentäkaksi on maaginen numero painatuksessa ja typografiassa. Vuonna 1737 Pierre Fournier käytti yksiköitä nimeltä ciceros mittaamaan tyyppiä. Kuusi ciceros oli 0,998 tuumaa.
Noin 1770, François-Ambroise Didot käytti hieman suurempia ciceroja, jotka sopivat ranskalaiseen "jalkaan". Didot's pica oli pituudeltaan 0,1776 tuumaa ja jakautui tasaisesti 12 askelta. Tänään kutsumme heille pisteitä.
Vuonna 1886 American Point System perusti "pican" 0,166 tuumaa. Kuusi niistä on 0,996 tuumaa.
Kukaan yksiköistä ei koskaan harhannut kaukana 12 pistettä picaa kohden: 6 picas per inch = 72 pistettä tuumaa kohden. Se oli tärkeä standardi vuoteen 1984 mennessä, jolloin Apple oli valmis ottamaan käyttöön ensimmäisen Macintosh-tietokoneen. Macin käyttöliittymä on suunniteltu auttamaan ihmisiä yhdistämään tietokone fyysiseen maailmaan. Ohjelmiston insinöörit käyttivät kirjoituspisteen metaforaa kuvaamaan tietokoneen kauhistuttavia töitä, aivan "paperille", "kansioon" ja "roskakoriin".
Alkuperäisen Macin 9 tuuman (diagonaalinen) ja 512 x 342 pikselin ruudulla kukin pikseli mitattiin täsmälleen 1 x 1 pisteen. Pidä viivaaja lasille ja näet, että 72 pikseliä todella täyttäisi 1 tuuman. Tällä tavalla, jos olet tulostanut kuvan tai tekstin ja pidä sitä näytön vieressä, niin kuva ja paperiversio olisivat samankokoisia.
Mutta aikaiset digitaaliset kuvat olivat tyrmätyviä ja jumittuja. Näytötekniikan ja muistin parantuessa tietokoneet pystyivät näyttämään useampia pikseleitä samaan kokoiseen näyttöön. Tulosteiden sovittaminen näytölle vähentyi entisestään, kun rasterointi- ja vektorisovellukset antoivat käyttäjille mahdollisuuden zoomata tarkasti pikseleitä. 1990-luvun puolivälissä Microsoft Windows voi vaihtaa 72 ja 96 pikseliä tuumaa näytön välillä. Tämä teki pienemmät fonttikoot helpommin, koska pikseleitä oli saatavilla pistekokoa kohden.
Nykyään suunnittelijat ja asiakkaat ymmärtävät, että näytön koot eivät ole ehdoton. Erot näytön koosta ja zoomauksesta ovat yleisiä. Mutta 72 on edelleen oletusarvo.
Suurempi näyttö PPI tarkoittaa parempaa luettavuutta pienemmissä pisteissä
Näytöt, joissa on korkeampi PPI, ovat luettavia. Enemmän pikseliä tuumaa helpottavat kirjaimen muotoa. Se tarkoittaa myös sitä, että kuvien ja tekstin on oltava suurempia (pikseleinä) luettavaksi.
Yllä olevaa tekstinäytettä on koottu kahdesta eri näytön PPI-asetuksesta. Ylin rivi on pienempi pikseli (eli korkeampi PPI näytössä), joten 8 pistettä on pienin luettavissa oleva fonttikoko. Tekstin alarivillä on tuskin luettavissa alle 10 pistettä.
Koska PC-näytöt ylittivät Mac-monitorien pikselitiheyden 1990-luvun puolivälissä, Windowsissa rakennetuilla verkkosivustoilla on pienempi fonttikoko, mikä on paljon Mac-käyttäjien huijausta. Nykyään näytöt molemmille alustoille pitävät pikselitiheyksissä riittävän korkeina, jotta erot erottuvat.
Elastiset web-kuvat moderneilla selaimilla
Tiedämme nyt, että DPI ei yksinään muuta kuvan kokoa verkossa, eikä meillä ole valtaa, millä laitteella kuvaa näytetään. Joten, ovat kuvan pikseli mitat ainoa asia, joka on tärkeä? Kyllä ... nyt.
Nesteen leveysasettelut, jotka muuttuvat selaimen koon mukaan, voivat paremmin vastata erilaisiin laitteisiin ja näyttöihin. Nykyaikaiset selaimet, FireFox 3, Safari 3 ja Internet Explorer 7 ja uudemmat, ovat parempia kuin vanhemmat versiot skaalalla kuvia lennossa. max-width CSS property forces images to fit their container but not grow past their actual size. CSS-ominaisuus pakottaa kuvia sovittamaan säiliöönsä, mutta ei kasva niiden todellisen koon yli. Esimerkiksi:
p { width: 25% } / * Neljäsosa sisällön alueesta * / img { max-width: 100% }
p { width: 50% } / * Puolet sisältöalueesta * / img { max-width: 100% }
p { width: 75% } / * Kolme neljäsosaa sisältöalueesta * / img { max-width: 100% }
/ * Ei leveyttä asetettu kohtaan * / img { max-width: 100% }
Tässä näemme yhden 800-pikselin laajan kuvan sopivat neljään eri kokoiseen elementtiin. Jos sivun leveys oli joustava, selaimen ikkunan koon muuttaminen laajentaisi kuvaa - mutta ei alkuperäisten 800 x 323 pikselimittojen ohi. Se ei koskaan muuttuisi vääristyneeksi, tai "pixellated", yli-laajentumisesta.
Web-kuvien valmisteleminen tarkoittaa pikselien suunnittelua. Jos joku pyytää 2 tuuman graafista verkkoa, ei tulosta, kysy heiltä, "Kuinka suuri pikselit ovat?"
Kirjoitettu yksinomaan WDD: lle Ben Gremillion . Ben on freelance-web-suunnittelija, joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.
Missä mediassa resoluutio laskee? Mikä on paras tapa koota online-kuvia? Jaa ajatuksesi alla.