Storleken på en bild i en webbplatslayout är viktig. Från korrekt inriktning för att få precis rätt mängd vitt utrymme, är det viktigt att du gör bilder och grafik korrekt innan det är viktigt för att skapa ett balanserat utseende.

Bilder på webben mäts i pixlar . Men många människor går genom besväret att sätta sina bilder till 72 punkter per tum ( DPI). Processen med att dimensionera bilder för webben är ofta missförstådd.

Missuppfattningen om upplösning i digitala bilder som är bundna till webben är att de måste möta ett visst antal punkter per tum.

I utskrift påverkar pixlar per tum och prickar per tum storleken på en bild på en sida. DPI gäller inte layout på webben.

När någon konverterar en bild till 72 DPI , lägger de till ett extra steg utan någon fördel. Webbsidor mäts i pixlar, inte i verkliga enheter som inches.

När någon frågar dig om en webbbild som är två inches bred beräknar de hur det skulle visas på sin egen bildskärm. Utan att ändra bildens pixeldimensioner skulle bilden se större eller mindre på olika bildskärmar - och skulle även se annorlunda ut på samma skärm vid en annan upplösningsinställning.

Pixelstorlek beror på kontext

En pixel (som är kort för "bildelement") är den minsta måttenheten på ett galler som visar en digital bild. DPI mäter hur stora de pixlarna eller prickarna är när de skrivs ut.

Bilden nedan visas i olika DPI s.

provfoto vid 36 DPI
36 DPI

provfoto vid 150 DPI
150 DPI

provfoto vid 3096 DPI
3,096 DPI

Hämta och öppna dem i en bildredigerare för att se själv. Alla tre ser på samma sätt eftersom de ändrades, inte resampleras.

Ändra storlek Pixels storlek; Resampling ändrar pixelräkning

Det finns två sätt att förstora en bild: lägg till fler pixlar eller göra pixlarna större. På samma sätt kan du minska bildens storlek genom att raka bort pixlar eller krympande pixlar. Men krympning och rakning är två olika processer.

resizing gör pixlar större för att göra bilder, bra, större

Ovanstående, ändra storlek på en bild ändrar storleken på dess pixlar, inte dess antal pixlar. Vi ökar eller minskar inte antalet pixlar, bara ändrar hur stora pixlarna är när de skrivs ut. Det är ett inverterat förhållande: bilder med större pixlar kommer att ha en lägre pixeldensitet (färre pixlar i samma antal tum) när de skrivs ut.


resampling lägger till pixlar för att göra bilder större

Ovanstående, ändrar omstämpling bildens storlek genom att öka eller minska antalet pixlar. Bilder med fler pixlar innehåller mer information och ger ofta rikare grafik.

Webbdesign handlar om resampling, inte resizing, eftersom varje pixel på en webbsida alltid kommer att vara lika stor. En webbsida som mäter 800 pixlar bred kan rymma bilder upp till 800 pixlar breda. Att göra varje pixel bredare förändrar inte det faktum att layouten endast kan innehålla 800 av dem.

Du kan inte göra en bild större på skärmen genom att ändra storlek på dess pixlar eftersom varje pixel på samma skärm alltid kommer att vara lika stor.

Ändra storlek och resampling i Photoshop

Photoshops bildstorleksfält ( Bild, Üí Bildstorlek ) styr både storleken och resampling av bilder.

Photoshops bildstorleksdialogruta med resampling på

Checkboxen "Resample" ändrar hur många pixlar som passar in i en linjär tum-bokstavligen pixlarna per tum. Om vi ​​stänger av resampling skulle det enda sättet att ändra bildens storlek vara att förstora pixlarna för utskrift.


Photoshops bildstorleksdialogruta med resampling av

Med resampling-rutan lämnad obelagd ändras ändringen av bildens fysiska storlek när den skrivs ut, men inte dess antal pixlar. När det skrivs ut ser en bild större eller mindre ut. På en webbsida skulle det vara samma storlek.

Ett experiment

Att avgöra om DPI spelar in i weblayouter kan göras med ett litet experiment. Om vi ​​ändrar en bild från 300 x 100 pixlar på 72 DPI till 300 x 100 pixlar vid 144 DPI, hur många pixlar skulle vi ha?

    • Gör en bild 300 pixlar bred och 100 pixlar lång, vid 72 dpi .
    • Låt oss göra lite matte. Hur många pixlar skulle det vara?
    • Ändra storlek på bilden till 300 x 100 pixlar vid 144 dpi .
    • Låt oss göra lite mer matte. Hur många pixlar är det?

      Svaren är:

      • 300 x 100 = 30 000
      • 300 x 100 är fortfarande 30 000

      Pixlar per tum på skärmen

      Antal pixlar per tum är fortfarande relevant online, men DPI-inställningar påverkar inte hur en bild visas.

      Datorskärmar kan mätas fysiskt i tum, och varje visar ett visst antal pixlar. Till exempel, låt oss säga en 19 "bildskärm visar 1280 x 1024 pixlar. Användaren kan ändra den för att visa 1600 x 1200 pixlar, vilket ökar sin PPI (dvs. att lägga till fler pixlar i samma antal inches.) Den viktiga skillnaden i utskrift är att du kan styra bildens pixlar per tum.

      Du kan prova detta på de flesta moderna datorer. På en Mac, gå till Apple-menyn, Üí Systeminställningar och klicka sedan på "Display" för att se de olika upplösningarna där du kan ställa in bildskärmen. För Windows, högerklicka på skrivbordet och välj "Anpassa" och välj sedan "Skärminställningar." Ändra skärmupplösningen (antal pixlar) och titta på när objekten på din Mac eller PC-skrivbord blir större eller mindre.

      Självklart ändras inte din bildskärm i storlek. Men om du håller en linjal på skärmen ser du att storleken på ikoner och fönster är omvänd proportionell mot antalet pixlar som visas. Till exempel en 13-tums bärbar dator, en 17-tums CRT-skärm och en 21-tums plattskärm kan alla presentera ett skrivbord som mäter 1024 x 768 pixlar. Fler pixlar betyder mindre ikoner; färre pixlar betyder större ikoner. Fler pixlar i samma bildskärm ger dig en högre pixeldensitet; färre pixlar är lägre.

      Exempel på samma bilder på skärmar av olika storlek

      Skillnaden blir mer märkbar med andra typer av skärmar:

      En enda PNG-fil som mäter 100 x 100 pixlar skulle passa både 888 x 240 skylt och 320 x 480 iPhone. Men det verkar mycket större på skylten eftersom styrelsens pixlar är 100 gånger större än iPhone: s (1,6 vs. 160).

      Illustrationen nedan visar två enheter med olika pixeldimensioner.

      Exempel på samma bitmappsbild på två olika skärmar

      Samma bild visas på två olika skärmar. Skillnaderna i varje visnings PPI gör att bilden på den högra visningen visas större, även om den har färre pixlar totalt.

      Du kan testa detta själv:

      • Skapa en JPG som mäter 960 x 100 pixlar, med vilken pixeldensitet som helst.
      • Mät det för hand med en linjal.
      • Titta på samma bild på en dator med en större eller mindre bildskärm. Om du till exempel skapade bilden på en 20-tums skärm, testa den på en 13-tums bärbar dator.
      • Skriv ut samma antal pixlar vid olika pixeldensiteter för att se olika storlekar på papper.

      Resultatet är att den här bilden skulle ha samma antal pixlar men en annan bredd i tum. Webbsidans layout visas i olika storlekar, trots identisk kod. (För ett extremt fall, titta på hela sidan på en iPhone; 960 pixlar är monterade på tre inches eller mindre, utan att själva filen ändras.)

      Varför 72 är signifikant

      Många filformat, inklusive JPG, TIF och PSD, lagrar bildens pixeldensitetsinställning. Om du sparar en JPG vid 200 pixlar / tum kvarstår den vid 200.

      Andra format, inklusive GIF och PNG, kasserar pixeldensitet. Om du sparar en 200 DPI-bild som en PNG, kommer den inte att spara den DPI alls. Många bildredigerare, inklusive Adobe Photoshop, antar att en bild är 72 DPI om informationen inte lagras. (Obs! Photoshops funktion för "Spara för webben" tar bort onödig utskriftsinformation, inklusive pixlar / tum från dialogrutan Bildstorlek.)

      Sjuttiotvå är ett magiskt nummer i tryck och typografi. År 1737 använde Pierre Fournier enheter som heter ciceros för att mäta typen. Sex ciceros var 0,998 tum.

      Omkring 1770 använde François-Ambroise Didot något större ciceros för att passa den vanliga franska "foten". Didots pica var 0,176 tum lång och delades jämnt i 12 steg. Idag kallar vi dem poäng.

      I 1886 etablerade det amerikanska punktsystemet ett "pica" som 0,166 tum. Sex av dessa är 0,996 tum.

      Ingen av enheterna avled aldrig långt från 12 poäng per pica: 6 picas per tum = 72 poäng per tum. Det var en viktig standard 1984, när Apple var beredd att introducera den första Macintosh-datorn. Mac-gränssnittet var utformat för att hjälpa människor att relatera datorn till den fysiska världen. Programvarutekniker använde metaforen på ett skrivbord för att beskriva en datorens banafunktioner, rakt ner till "papper," "mapp" och "skräp" -ikoner.

      Varje pixel på den ursprungliga Mac-skärmen med 9 tum (diagonal) och 512 x 342 pixlar mätt exakt 1 x 1 poäng. Håll en linjal till glaset, och du skulle se att 72 pixlar skulle faktiskt fylla 1 tum. På det här sättet, om du tryckte ut en bild eller texttext och höll den bredvid skärmen, skulle både bild och hårddisk vara lika stor.

      Men tidiga digitala bilder var klumpiga och skarpa. När skärmteknik och minne förbättrats kunde datorerna visa fler pixlar på samma bildskärm. Matchar en utskrift till skärmen blev ännu mindre säker när raster- och vektorapp tillåter användare att zooma in och undersöka pixlarna noggrant. I mitten av 1990-talet kunde Microsoft Windows växla mellan 72 och 96 pixlar per tum på skärmen. Detta gjorde mindre teckenstorlekar mer läsbara eftersom fler pixlar var tillgängliga per punktstorlek.

      Idag förstår designers och kunder att storleken på objekt på skärmen inte är absolut. Skillnader i skärmstorlek och zoomfunktion är vanliga. Men 72 är fortfarande standard.

      Högre skärm PPI betyder bättre läsbarhet vid mindre punktstorlekar

      Skärmar med högre PPI är bra för läsbarhet. Fler pixlar per tum gör brevformar enklare att läsa. Det betyder också att bilder och text måste vara större (i pixlar) för att kunna läsas.

      exempel på text vid olika punktstorlekar och upplösningar

      Textprovet ovan har ändrats från två olika skärm-PPI-inställningar. Den övre raden har mindre pixlar (dvs. en högre PPI på skärmen), så 8 poäng är den minsta läsbara teckensnittstorleken. Text i den nedre raden är knappt läsbart under 10 poäng.

      Eftersom PC-skärmar överträffade pixeldensiteten hos Mac-skärmarna i mitten av 1990-talet skräddarsydde webbplatser som byggdes på Windows mindre fontstorlekar, mycket till missnöje för Mac-användare. Idag kan skärmarna för båda plattformarna njuta av pixeldensiteter som är tillräckligt höga för att göra skillnaderna snabba.

      Elastiska webbbilder med moderna webbläsare

      Vi vet nu att DPI ensam inte ändrar en bilds storlek på webben, och vi har ingen kontroll över vilken enhet en bild visas på. Så, är en bilds pixeldimensioner det enda som betyder något? Ja ... för nu.

      Vågbreddslayouter, som ändras enligt webbläsarens storlek, kan bättre rymma en rad enheter och bildskärmar. Moderna webbläsare, från FireFox 3, Safari 3 och Internet Explorer 7 och upp, är bättre än äldre versioner vid skalande bilder på flyg. De max-width CSS-egenskapen tvingar bilderna för att passa sin behållare men växer inte över deras faktiska storlek. Till exempel:

      provfoto 800 pixlar bred

      p { width: 25% } / * En fjärdedel av innehållsområdet * /
      img { max-width: 100% }


      provfoto 800 pixlar bred

      p { width: 50% } / * Halva av innehållsområdet * /
      img { max-width: 100% }


      provfoto 800 pixlar bred

      p { width: 75% } / * Tre fjärdedelar av innehållsområdet * /
      img { max-width: 100% }


      provfoto 800 pixlar bred

      / * Ingen bredd inställd för stycket * /
      img { max-width: 100% }


      Här ser vi en 800 pixel bred bild passar in i fyra stycken av olika storlek. Om sidbreddet var flexibelt skulle storleken på ditt webbläsarfönster expandera bilden - men inte förbi de ursprungliga 800 x 323 pixeldimensionerna. Det skulle aldrig bli förvrängt eller "pixellerat" från överexpansion.

      Förberedelser av bilder för webben innebär planering i pixlar. Om någon frågar efter en 2-tums grafik för webben, inte för utskrift, fråga dem, "Hur stora är dina pixlar?"


      Skriven uteslutande för WDD av Ben Gremillion . Ben är en frilans webbdesigner som löser kommunikationsproblem med bättre design.

      I vilka medier räknas upplösningen? Vad är det bästa sättet att stora onlinebilder? Dela dina idéer nedan.