Stærð myndar í vefútgáfu er mikilvæg. Frá réttri leiðréttingu til að fá bara rétt magn af hvítu plássi, límvatnsmyndum og grafík rétt fyrirfram er nauðsynlegt að skapa jafnvægi.

Myndir á vefnum eru mældar í punktum . Samt fara margir í gegnum vandræði að setja myndirnar í 72 punkta á tommu ( DPI). Aðferðin við að límta myndir á vefnum er oft misskilið.

Misskilningur um upplausn í stafrænum myndum sem bundnar eru á vefnum er að þeir verða að mæta ákveðnum fjölda punkta á tommu.

Í prenti hafa pixlar á tommu og punktar á tommu áhrif á stærð myndar á síðu. DPI gildir ekki um skipulag á vefnum.

Þegar einhver breytir mynd í 72 DPI , þá bætast þeir við auka skref án góðs. Vefsíður eru mældir í dílar, ekki raunverulegir einingar eins og tommur.

Þegar einhver biður þig um mynd á vefnum sem er tvisvar á breidd, meta þau hvernig það virðist á eigin skjá. Án þess að breyta stærð pixla myndarinnar virðist þessi mynd vera stærri eða minni á mismunandi skjái - og myndi jafnvel líta öðruvísi út á sama skjá í mismunandi upplausnarmöguleikum.

Stærð pixla fer eftir samhengi

A pixla (sem er stutt fyrir "myndarþáttur") er minnsti mælieiningin á rist sem sýnir stafræna mynd. DPI mælir hversu stórir punktar, eða punktar, eru þegar þau eru prentuð.

Myndin að neðan er sýnd í mismunandi DPI s.

sýni mynd á 36 DPI
36 DPI

sýni mynd á 150 DPI
150 DPI

sýni mynd á 3096 DPI
3.096 DPI

Hlaða niður og opnaðu þau í myndaritari til að sjá fyrir sjálfan þig. Allir þrír líta á sömu vegna þess að þeir voru stærðar, ekki resampled.

Breyta stærð breytinga Pixel stærðir; Resampling Breytingar Pixel Count

Það eru tvær leiðir til að stækka mynd: bæta við fleiri punkta eða gera pixlana stærri. Sömuleiðis geturðu dregið úr stærð myndar með því að raka niður punktum eða minnka punktar. En skreppa og rakstur eru tvær mismunandi ferli.

resizing gerir pixlar stærri til að gera myndir, vel, stærri

Hér að ofan, sem breytir stærð myndar, breytir stærð dílanna, ekki fjölda punkta. Við erum ekki að hækka eða minnka fjölda punkta, aðeins breyta því hversu stórir punktar þessar eru þegar þær eru prentaðar. Það er öfugt samband: myndir með stærri punkta munu hafa lægri pixlaþéttleika (færri punktar á sama tommu) þegar þær eru prentaðar.


resampling bætir dílar til að gera myndirnar stærri

Sýnd hér að framan breytir resampling stærð myndarinnar með því að auka eða minnka fjölda punkta. Myndir með fleiri punkta munu innihalda fleiri upplýsingar og gera oft til að fá meiri grafík.

Vefhönnun snertir resampling, ekki stærð, því að hver pixla á vefsíðu mun alltaf vera í sömu stærð. Vefsíðan sem mælir 800 punkta breitt er hægt að hýsa myndir allt að 800 punktar á breidd. Að gera alla pixla breiðari breytist ekki sú staðreynd að skipulagið getur aðeins geymt 800 af þeim.

Þú getur ekki gert mynd að birtast stærri á skjánum með því að breyta stærð dílar þess vegna þess að hver pixill á sama skjá mun alltaf vera í sömu stærð.

Breyta stærð og endurmóta í Photoshop

Image Stærð kassi Photoshop ( Mynd, Üí Myndastærð ) stjórnar bæði stærð og endurstillingu mynda.

Myndastærðarsýningarsýning Photoshop með resampling á

Gátreitinn "Resample" breytir því hversu mörg punktar passa í línulegan tommu - bókstaflega punkta á tommu. Ef við slökktum á endurstillingu er eini leiðin til að breyta stærð myndarinnar að stækka punktar þess til prentunar.


Myndasýningarsýningarsýning Photoshop með resampling burt

Með resampling kassanum vinstri óhindrað, breyting á "upplausn" kassi myndi breyta stærð líkamans stærð þegar prentað, en ekki fjöldi punkta hans. Þegar prentað er, virðist myndin vera stærri eða minni. Á vefsíðu myndi það vera í sömu stærð.

Tilraunir

Átta sig á því hvort litið sé á PÁI í vefskipulagi með smá tilraun. Ef við breytum mynd frá 300 x 100 dílar á 72 DPI til 300 x 100 punkta á 144 DPI, hversu mörg punktar eigum við?

    • Gerðu mynd 300 pixlar á breidd og 100 pixlar á hæð, í 72 DPI .
    • Við skulum gera stærðfræði. Hversu mörg punktar væri það?
    • Nú breyttu myndinni í 300 x 100 punkta í 144 dpi .
    • Við skulum gera meira stærðfræði. Hversu mörg punktar er það?

      Svörin eru:

      • 300 x 100 = 30.000
      • 300 x 100 er enn 30.000

      Pixlar á hvern tommu á skjánum

      Fjöldi punkta á tommu er enn á netinu á netinu, en PÁ-stillingarnar hafa ekki áhrif á hvernig mynd birtist.

      Tölva skjáir geta verið líkamlega mældar í tommur, og hver sýnir ákveðinn fjölda punkta. Til dæmis, segjum að 19 "skjárinn sýnir 1280 x 1024 punkta. Notandinn gæti breytt því til að sýna 1600 x 1200 punkta og auka þannig PPI (þ.e. að bæta við fleiri punkta í sama fjölda tommu.) Mikilvægur munur á prenti er að þú getur stjórnað pixla myndar á tommu.

      Þú getur prófað þetta á flestum nútíma tölvum. Á Mac, farðu í Apple Valmynd, í System Preferences , og smelltu síðan á "Sýna" til að sjá ýmsar ályktanir þar sem þú getur stillt skjáinn þinn. Fyrir Windows, hægri-smelltu á skjáborðið og veldu "Sérsníða" og veldu síðan "Skjástillingar." Breyttu skjáupplausninni (fjöldi punkta) og horfðu þar sem hlutirnir á Mac eða tölvuborðinu verða stærri eða minni.

      Ljóst er að skjárinn þinn breytist ekki í stærð. En ef þú heldur reglu á skjánum muntu sjá að stærð táknanna og glugganna er í öfugu hlutfalli við fjölda pixla sem birtast. Til dæmis, 13 "fartölvu, 17" CRT skjár og 21 "flatskjár skjár getur allir lagt fram skrifborð sem mælir 1024 x 768 punkta. Fleiri punkta þýðir minni tákn; færri punkta þýðir stærri tákn. Fleiri punkta á sama skjá gefur þér hærri pixlaþéttleika; færri punktar eru lægri.

      Dæmi um sömu myndir á mismunandi skjái

      Munurinn verður áberandi með öðrum gerðum sýna:

      Ein PNG-skrá sem mælir 100 x 100 punkta myndi passa bæði 888 x 240 auglýsingaskilti og 320 x 480 iPhone. En það virðist miklu stærra á auglýsingaskilti vegna þess að pixlar borðsins eru 100 sinnum stærri en iPhone (1,6 á móti 160).

      Myndin hér fyrir neðan sýnir tvær tæki með mismunandi punktavídd.

      Dæmi um sömu punktamyndsmynd á tveimur mismunandi skjám

      Sama mynd birtist á tveimur mismunandi skjám. Mismunurinn á PPI hvers skjás gerir myndina á hægri skjánum kleift að birtast stærri, þrátt fyrir að það hafi færri punkta í heild.

      Þú getur prófað þetta sjálfur:

      • Búðu til JPG sem mælir 960 x 100 dílar, á hvaða pixlþéttleika sem er.
      • Mæla það með hendi með höfðingja.
      • Horfðu á sama mynd á tölvu með stærri eða minni skjá. Til dæmis, ef þú bjóst til myndina á 20 "skjá, prófaðu hana á 13" fartölvu.
      • Prenta sama fjölda punkta á mismunandi þéttleika pixla til að sjá mismunandi stærðir á pappír.

      Niðurstaðan er sú að þessi mynd myndi hafa sama fjölda punkta en mismunandi breidd í tommum. Vefsýningin birtist í mismunandi stærðum, þrátt fyrir sömu kóða. (Fyrir sérstakt tilfelli, skoðaðu alla síðuna á iPhone; 960 punktar eru búnar að þremur tommum eða minna, án þess að skráin sjálf sé breytt.)

      Af hverju er 72 mikilvæg?

      Mörg skráarsnið, þ.mt JPG, TIF og PSD, geyma myndatökuþéttleika myndarinnar. Ef þú vistar JPG við 200 dílar / tommu mun það vera áfram á 200.

      Önnur snið, þ.mt GIF og PNG, farga þéttleika pixla. Ef þú vistar 200 DPI mynd sem PNG, mun það ekki spara það DPI yfirleitt. Margir ritstjórar, þar á meðal Adobe Photoshop, gera ráð fyrir að mynd sé 72 DPI ef upplýsingarnar eru ekki geymdar. (Athugið: "Save for Web" á Photoshop er að henda óþarfa prentupplýsingum, þ.mt dílar / tommu frá myndastærðarsíðum.)

      Sjötíu og tvö er galdur númer í prentun og leturfræði. Árið 1737 notaði Pierre Fournier einingar sem nefndu ciceros til að mæla tegund. Sex ciceros voru 0,998 tommur.

      Um 1770, François-Ambroise Didot notaði örlítið stærri ciceros til að passa við staðlaða franska "fótur". Didot's pica var 0.1776 tommur langur og skipt jafnt í 12 stig. Í dag kallum við þau stig.

      Árið 1886 stofnaði American Point System "pica" sem 0,166 tommur. Sex af þessum eru 0,996 tommur.

      Ekkert af einingunum féll alltaf langt frá 12 stigum á pica: 6 picas á tommu = 72 punkta á tommu. Það var mikilvægur staðall árið 1984, þegar Apple var reiðubúinn að kynna fyrsta Macintosh tölvuna. Tengi Mac er hannað til að hjálpa fólki að tengjast tölvunni við líkamlega heiminn. Hugbúnaðarverkfræðingar notuðu metaforið á skrifborði til að lýsa því hvernig tölvukerfi hófst, niður í "pappír", "möppu" og "rusl".

      Hver pixla á 9 tommu (skautum) upprunalegu Mac og 512 x 342 pixla skjánum mældist nákvæmlega 1 x 1 stig. Haltu höfðingja á glerið og þú vilt sjá að 72 pixlar myndu í raun fylla 1 tommu. Á þennan hátt, ef þú prentaðir mynd eða texta og hélt það við hliðina á skjánum, bæði myndin og afritið yrðu í sömu stærð.

      En snemma stafræn myndir voru clunky og jagged. Eins og skjár tækni og minni bætt, tölvur voru fær um að sýna fleiri punkta á sömu stærð skjár. Samsvörun við prentun á skjánum varð ennþá viss þegar raster og vektorforrit leyfa notendum að þysja inn og skoða pixla náið. Um miðjan 1990 gæti Microsoft Windows skipt á milli 72 og 96 punkta á tommu á skjánum. Þetta gerði smærri leturstærð meira læsileg vegna þess að fleiri punkta voru tiltækir á punktastærð.

      Í dag skiljum hönnuðir og viðskiptavinir að stærðir hlutanna á skjánum séu ekki alger. Mismunur á skjástærð og aðdráttaraðgerð er algeng. En 72 er enn sjálfgefið.

      Hærri Skjár PPI þýðir betri læsileiki við minni punkta stærðir

      Skjár með meiri PPI er frábært fyrir læsileiki. Fleiri punkta á tommu gera bókstafstafanir auðveldara að lesa. Það þýðir einnig að myndir og texti verða að vera stærri (í punktum) til að hægt sé að lesa.

      dæmi um texta á mismunandi stöðum punktar og ályktanir

      Textasýnið hér að ofan hefur verið breytt úr tveimur mismunandi stillingum á skjánum. Efsta röðin er með minni punkta (þ.e. hærri PPI á skjánum), þannig að 8 stig eru minnstu læsilegir leturstærðir. Texti í neðri röðinni er varla læsileg undir 10 stigum.

      Eins og tölvuskjáir hafa yfirgefið pixlaþéttleika Mac-skjáa á miðjum níunda áratugnum hrósuðu vefsíður sem byggðust á Windows á smærri leturstærð, miklu að ótti Mac-notenda. Í dag, skjár fyrir báta umhverfi njóta pixel þéttleika nógu hátt til að gera muninn moot.

      Teygjanlegt vefur myndir með nútíma vafra

      Við vitum nú að DPI einn breytir ekki stærð myndarinnar á vefnum og við höfum ekki stjórn á því hvaða tæki mynd birtist á. Svo eru pixlar myndarinnar það eina sem skiptir máli? Já ... fyrir núna.

      Vökvastærðarsnið, sem breytist í samræmi við stærð vafrans, geti betur mætt ýmsum tækjum og fylgist með. Nútíma vafrar, frá FireFox 3, Safari 3 og Internet Explorer 7 og upp, eru betri en eldri útgáfur á myndum í fljúgandi myndum. The max-width CSS eign öflir myndir til að passa ílátið en ekki vaxa framhjá raunverulegri stærð þeirra. Til dæmis:

      sýnishorn mynd 800 pixlar á breidd

      p { width: 25% } / * Fjórðungur efnis svæðisins * /
      img { max-width: 100% }


      sýnishorn mynd 800 pixlar á breidd

      p { width: 50% } / * Helmingur efnisins * /
      img { max-width: 100% }


      sýnishorn mynd 800 pixlar á breidd

      p { width: 75% } / * Þrír fjórðu af innihaldssvæðinu * /
      img { max-width: 100% }


      sýnishorn mynd 800 pixlar á breidd

      / * Engin breidd sett fyrir málsgreinina * /
      img { max-width: 100% }


      Hér sjáum við eina 800 pixla breitt mynd passa inn í fjórar mismunandi stærðir málsgreinar. Ef breidd blaðsins væri sveigjanlegt, þá breytti stærð vafra gluggans myndina en ekki framhjá upphaflegu stærðinni 800 x 323 pixla. Það myndi aldrei verða brenglast, eða "pixellated" frá yfirþenslu.

      Að undirbúa myndir fyrir vefinn þýðir að skipuleggja í punktum. Ef einhver biður um 2 tommu grafík fyrir vefinn, ekki til prentunar skaltu spyrja þá, "Hversu stór eru pixlar þínar?"


      Skrifað eingöngu fyrir WDD eftir Ben Gremillion . Ben er sjálfstæður vefur hönnuður sem leysir samskiptavandamál með betri hönnun.

      Í hvaða fjölmiðlum teljast upplausn? Hver er besta leiðin til að stækka myndir á netinu? Deila hugmyndunum þínum hér að neðan.