Den 72 PPI webb- och skärmupplösningsmyten

Anonim

Om du har varit med om datorer och digitala bilder ett tag, särskilt om du är en webbdesigner eller en fotograf som publicerar dina bilder online, har du utan tvekan hört det säga att rätt upplösning för bilder som visas på webben, eller på datorskärmar i allmänhet är 72 pixlar per tum (ppi).

Du har kanske till och med hört att det sa att medan 72 ppi är korrekt för bilder som visas på en Mac, behöver en Windows-baserad dator upplösningen inställd till 96 ppi.

Vissa säger att det är "ppi" ( pixlar per tum), andra hävdar att det är "dpi" ( punkter per tum), och det hela skulle bli väldigt förvirrande om det inte var för ett litet faktum - det är helt tull! I den här tutorialen lär vi oss varför det helt enkelt inte finns något sådant som en vanlig webb- eller skärmupplösning och varför, om dina bilder är avsett för webben, behöver du inte oroa dig för bildupplösning alls!

Lite historia …

Ursprunget till skärmupplösningen på 72 ppi går helt tillbaka till mitten av 1980-talet när Apple släppte sina första Macintosh-datorer. Dessa datorer inkluderade en inbyggd 9-tums skärm med en skärmupplösning på 72 pixlar per tum. Varför 72 pixlar per tum? Det beror på att Macintosh-skärmarna var specifikt utformade för att fungera i perfekt harmoni med Apples ImageWriter-skrivare, som hade en utskriftsupplösning på 144 punkter per tum - exakt dubbelt så mycket som upplösningen på skärmen. Detta gjorde det enkelt att skala skärmbilden till den tryckta sidan, vilket innebar att din text och grafik kunde förhandsvisas på skärmen i den exakta storleken som de skulle visas när de skrivs ut. Senare, när Apple började göra större skärmar för Macintosh, såg de till att hålla skärmupplösningarna inställda på samma 72 pixlar per tum så att användarna alltid skulle se en exakt förhandsvisning på skärmen av det tryckta dokumentet (så länge de var med en ImageWriter-skrivare).

Men skärmupplösningen på 72 pixlar per tum var en standard bara med Apple, och den varade inte. Tredjepartsföretag som säljer bildskärmar för Macintosh höll sig inte till standarden och inte heller konkurrerande datorskärmar. Idag, nästan tre decennier senare, har tekniken förbättrats kraftigt och dagarna på skärmar med en upplösning på bara 72 ppi är länge borta. Till och med Apple, företaget som startade det hela, säljer nu sina skärmar med mycket högre upplösningar. Ingen gör 72 ppi skärmar längre. Ingen använder 72 ppi-skärmar längre. Och ändå, även om den gamla tekniken ligger långt bakom oss, har vi fortfarande en hel del människor som fortsätter att tro att vi måste ställa in upplösningen på våra bilder till 72 pixlar per tum i Photoshop innan vi laddar upp dem på webben. De flesta tror att orsaken är så att bilderna visas ordentligt på skärmen, så låt oss börja saker genom att lära dig ett enkelt sätt att bevisa att din datorskärm, tillsammans med alla moderna datorskärmar, faktiskt har en upplösning som är mycket högre än 72 ppi.

Testa 72 PPI-standarden

Som alla andra i dag har datorns skärm (oavsett om det är en fristående bildskärm, ett allt-i-ett-system som en iMac eller en del av en bärbar dator) en skärmupplösning högre än 72 pixlar per tum, och du har inte att ta mitt ord för det. Du kan enkelt testa det själv. Allt du behöver är en linjal eller måttband. Nu, när en butik säljer dig en datorskärm, berättar de vanligtvis dess storlek baserat på dess diagonala bredd, med några vanliga storlekar som är 17 tum, 19 tum, 24 tum, och så vidare. Det är bra, men för vårt test här behöver vi inte bry oss om det numret. Vad vi behöver ta reda på är den faktiska bredden, i tum, på din skärm. För att göra det, grepp bara din linjal eller måttband och mät skärmområdet från vänster till höger. Se till att du bara mäter själva skärmområdet. Ta inte med någon av gränserna runt skärmen. Vi behöver skärmens faktiska bredd (datorskärmfoto från Shutterstock):

Mät skärmens bredd (inte inklusive yttergränsen).

När du har uppmätt bredden är det andra du behöver se till att din bildskärm är inställd på dess ursprungliga skärmupplösning, vilket är det faktiska antalet pixlar som skärmen kan visa från vänster till höger och från topp till botten. Till exempel innehåller en bildskärm med en inbyggd skärmupplösning på 1920 x 1080 (ofta kallad dessa dagar "full HD") 1920 pixlar från vänster till höger och 1080 pixlar från topp till botten. Jag använder för närvarande en bildskärm med en inbyggd skärmupplösning på 2560 x 1440, men min bärbara dator har en inbyggd skärmupplösning på 1920 x 1200 så det varierar, vilket betyder att du måste känna till den ursprungliga skärmupplösningen för din specifika skärm och se till att det är det du har monitorn inställd på i operativsystemets visningsalternativ.

Nu när du har uppmätt skärmens faktiska bredd och du har sett till att din bildskärm körs med dess ursprungliga skärmupplösning för att ta reda på vad den faktiska skärmupplösningen är (i pixlar per tum) tar du helt enkelt det första numret skärmupplösning, som anger skärmens bredd i pixlar och dela den med skärmens bredd i tum. Till exempel är min ursprungliga skärmupplösning 2560 x 1440, så jag tar det första numret, 2560, som är skärmens bredd i pixlar, och jag delar den med bredden i tum, som i mitt fall var 23.4 (eller ganska nära, i alla fall). Med hjälp av mitt operativa systems praktiska inbyggda kalkylator, 2560 ÷ 23.4 = 109.4, som jag kommer att avrunda till 109. Så precis från detta snabba och enkla test har jag bekräftat att min skärmupplösning är 109 pixlar per tum, inte 72 pixlar per tum. Ditt eget test med din skärm kan ge dig ett annat resultat än mitt, men om du fortfarande använder en av de ursprungliga Macintosh-datorerna från mitten av 80-talet kommer den att vara mycket högre än 72 ppi.

Om du vill kan du göra samma sak med skärmens höjd. Ta bara din linjal eller måttband och mät skärmens faktiska höjd i tum (återigen undvika gränsområdet runt den):

Mät höjden på din skärm (inte inklusive den yttre gränsen).

Ta sedan det andra numret från skärmens ursprungliga skärmupplösning, som ger dig höjden i pixlar och dela det med höjden i tum. Återigen är min ursprungliga skärmupplösning 2560 x 1440 så jag tar det andra numret, 1440, och delar det med min uppmätta skärmhöjd som var 13, 2 tum. Med min miniräknare, 1440 ÷ 13.2 = 109.09, vilket återigen kommer jag att avrunda till 109. Som vi ser bör du få ungefär samma resultat med antingen bredden eller höjden på skärmen. I mitt fall fungerade de båda till 109 pixlar per tum, inte 72 pixlar per tum.

Som jämförelse, låt oss kontrollera den faktiska skärmupplösningen på min bärbara dator. Det är en MacBook Pro (naturligtvis gjord av Apple, företaget som gav oss den ursprungliga 72 ppi-standarden för många år sedan). Min MacBook Pro har en inbyggd skärmupplösning på 1920 x 1200, så precis som jag gjorde tidigare tar jag det första numret, 1920, vilket ger mig skärmbredden i pixlar, och jag delar den med bredden på skärmen i tum, som i detta fall är 14, 4. Så 1920 ÷ 14, 4 = 133, 3, vilket jag avrundar till 133 pixlar per tum . Det är mycket högre än 72 och ännu högre än min fristående bildskärm. Jag gör samma sak med höjden, tar höjden i pixlar (1200) och delar den med höjden i tum (9). 1200 ÷ 9 = 133, 3, återigen avrundat till 133 pixlar per tum.

Två olika skärmar, var och en med två olika skärmupplösningar (109 ppi och 133 ppi), båda betydligt högre än 72 ppi, vilket enligt många människor idag förblir branschstandardupplösningen för att visa bilder på webben och på skärmen. Om min skärm, din skärm och alla andras skärm har en upplösning högre än 72 ppi, för att inte tala om det faktum att båda mina skärmar hade mycket olika upplösningar från varandra och din skärm kan ha en annan upplösning också, då är det klart, inte bara finns det ingen officiell standard längre för skärmupplösning, men även om det fanns skulle det inte längre vara 72 ppi. Dessa dagar, som de ursprungliga Macintosh-datorerna den var designad för, är historia.

Kortkoder, åtgärder och filter Plugin: Fel i kortkod (ads-essentials-middle)

Bildupplösning påverkar utskriftsstorlek, inte skärmstorlek

Om det faktum att datorskärmar i dag alla har skärmupplösningar högre än 72 ppi inte har övertygat dig om att det inte finns något sådant längre som en 72 ppi skärmupplösningsstandard, är här ett annat viktigt faktum att tänka på. Om du tidigare läst igenom vår bildupplösning, pixeldimensioner och dokumentstorleksstudier, vet du redan att bildupplösning har ingenting att göra med hur din bild visas på skärmen. En digital bild har i själva verket ingen inbyggd upplösning alls. Det är bara pixlar. Den har ett visst antal pixlar från vänster till höger och ett visst antal från topp till botten. Bredden och höjden på en bild, i pixlar, är känd som dess pixeldimensioner, och det är allt en datorskärm bryr sig om.

Storleken på vilken en bild visas på din skärm beror bara på två saker - bildens pixeldimensioner och skärmens upplösningsupplösning. Så länge du har ställt in skärmen på den ursprungliga visningsupplösningen som vi diskuterade tidigare, kommer en bild att visas pixel för pixel. Med andra ord kommer varje pixel i bilden att ta upp exakt en pixel på skärmen. Till exempel skulle en 640x480 pixelbild fylla ett 640x480 pixelområde på skärmen. Ett 800 pixel bredt banner på en webbplats visas 800 pixlar bred på skärmen. Inte mer inte mindre. Oavsett vad du ställer in bildens upplösning i Photoshop, oavsett om det är 72 ppi, 300 ppi eller 3000 ppi, kommer det inte att ha någon effekt på hur stor eller liten bild som visas på skärmen.

Det beror på att bildupplösning bara påverkar en sak - bildens storlek när den skrivs ut . Genom att ställa in upplösningen i Photoshop berättar vi skrivaren, inte skärmen, hur många pixlar i bilden som ska pressas in i en tum papper. Ju fler pixlar du pressar i varje tum papper, desto mindre kommer bilden att visas när den skrivs ut. Och generellt sett, ju fler pixlar du skriver ut per tum, desto högre är utskriftskvaliteten.

Vi kan enkelt ta reda på hur stort ett foto kommer att skrivas ut baserat på en viss bildupplösning. Ta bara bredden på fotot i pixlar och dela det med din bildupplösning, ta sedan höjden på fotot i pixlar och dela det också med bildupplösningen. Om vi ​​tar en bild på 640 x 480 pixlar, som ett exempel, och ställer in sin upplösning på 72 ppi i Photoshop, kan vi dela fotot bredd och höjd med dess upplösning för att bestämma att det kommer att skriva ut på papper med ungefär 8, 9 x 6, 7 tum. Om vi ​​ökar sin upplösning i Photoshop till, till exempel, 240 ppi, vilket är en vanligare utskriftsupplösning, så om vi gör matematiken igen och delar pixelbredden och höjden med 240 ppi, vet vi att fotot skulle skriva ut i en storlek på 2, 7 x 2 tum, vilket är mycket mindre än om vi hade skrivit ut det med 72 ppi men den totala utskriftskvaliteten skulle vara mycket bättre. Men vad som är viktigare att förstå här är att genom att ändra upplösningen påverkar vi inte på något sätt bildens utseende på skärmen.

För att se tydligare hur upplösning påverkar utskriftsstorlek och inte skärmstorlek, här är en bild som jag har öppnat i Photoshop. Den här lilla killen har också försökt att förstå allt detta 72 ppi webbupplösnings grejer, men det ser ut som om han kanske tänker över det lite (tänker barnfoto från Shutterstock):

Bildupplösning är verkligen inte så komplicerad, men definitivt en A för ansträngning.

Jag öppnar Photoshops bildstorlek-dialogruta genom att gå upp till Bild- menyn i menyfältet längst upp på skärmen och välja Bildstorlek :

Gå till Bild> Bildstorlek.

Längst upp i dialogrutan Bildstorlek finns avsnittet Pixeldimensioner som visar bildens bredd och höjd i pixlar. Här kan vi se att mitt foto har både en bredd och höjd på 500 pixlar, vilket gör det till en anständig storlek för visning på webben. Detta är den enda delen av dialogrutan Bildstorlek som din datorskärm bryr sig om - bildens faktiska pixeldimensioner:

Avsnittet Pixeldimensioner visar oss bredden och höjden i pixlar.

Under pixeldimensionerna finns avsnittet Dokumentstorlek som berättar hur stor bilden för närvarande skulle visas på papper om vi skulle skriva ut den. Detta avsnitt behandlar uteslutande utskriftsstorlek och har ingen effekt på hur bilden visas på skärmen. Det händer också att det är allt det viktiga upplösningsalternativet (anledningen till att vi alla är här!), Vilket är vettigt eftersom upplösningen påverkar utskriftsstorleken, inte skärmstorleken. Som vi kan se har Photoshop gått vidare och ställt in upplösningen på mitt foto till 72 pixlar per tum (ja, till och med Photoshop bidrar till myten om 72 ppi), och direkt ovanför alternativet Upplösning, i rutorna Bredd och Höjd, vi kan se att på 72 ppi skulle mitt foto på 500 x 500 pixlar skriva ut på 6.944 x 6.944 tum på papper (500 ÷ 72 = 6.944):

Avsnittet Dokumentstorlek visar oss utskriftsstorleken baserat på den aktuella upplösningen. Det har ingen effekt på skärmstorleken.

Låt oss se vad som händer om jag ökar bildupplösningen. Innan jag gör det kommer jag dock att snabbt avmarkera alternativet Resample Image nära botten av dialogrutan så att bilden behåller sina ursprungliga pixeldimensioner när jag ändrar upplösningen:

Avmarkera alternativet Resample Image.

När Resample Image är avmarkerat kommer jag att öka upplösningen från 72 pixlar per tum till 240 pixlar per tum . Vi kan se i Pixel Dimensions-avsnittet upptill att öka upplösningen inte har förändrat de faktiska pixeldimensionerna. Det är fortfarande 500 x 500 pixlar, vilket innebär att det fortfarande tar upp ett 500 x 500 pixelområde på skärmen. Men med 240 ppi skulle det nu skrivas ut på papper i en storlek på bara 2, 083 x 2, 083 tum (500 ÷ 240 = 2, 083). Genom att ändra upplösningen ändrades bildens utskriftsstorlek, men inget annat:

Bilden skulle nu skriva ut mindre men förbli exakt samma storlek 500 x 500 pixlar på skärmen.

Jag kommer igen att öka bildupplösningen, den här gången till något galet som 500 pixlar per tum, bara för att göra matematiken riktigt enkel. En bild på 500 x 500 pixlar, inställd på en upplösning på 500 pixlar per tum, skulle skriva ut som en bild på 1 x 1 tum på papper (500 500 = 1). Återigen har bildens faktiska pixeldimensioner inte förändrats. Även vid 500 ppi verkar min bild inte vara större eller mindre på skärmen som med 72 ppi, eller 240 ppi, eller med vilken upplösning som helst, eftersom det fortfarande är en bild på 500 x 500 pixlar oavsett upplösningsinställning, och dess pixeldimensioner är all din datorskärm bryr sig om:

Vid 500 ppi skulle bilden skriva ut mycket liten men verkar fortfarande som en 500 x 500 pixelbild på skärmen.

Slutligen, här är en sida-vid-sida-jämförelse av bilden som den ser ut vid alla tre av ovanstående resolutioner. Jag har gjort bilden mindre (den är nu bara 200 x 200 pixlar) så jag kan passa alla tre versionerna bredvid varandra, men den första versionen till vänster sparades med 72 ppi. Versionen i mitten sparades med 240 ppi och versionen till höger sparades med 500 ppi:

En bild på 72 ppi (vänster), 240 ppi (mitten) och 500 ppi (höger).

Som vi tydligt kan se har upplösningen inte någon effekt på hur bilden ser ut på skärmen. Alla tre versionerna tar vardera ett utrymme på exakt 200 x 200 pixlar oavsett upplösningsinställning. Kvaliteten på varje version är också exakt densamma. Varje version skulle skriva ut i en mycket annan storlek på grund av olika upplösningsinställningar, men det gör ingen skillnad på skärmstorleken eller bildkvaliteten.

Medan det är tveksamt att denna 72 ppi webb- och skärmupplösningens nonsens kommer att försvinna när som helst snart, hoppas jag att denna tutorial åtminstone har gjort det lättare att se varför det i själva verket är nonsens vid denna punkt. Datorskärmar i dag har alla skärmupplösningar högre än 72 ppi, och alternativet för bildupplösning i Photoshop påverkar bara ett fotos utskriftsstorlek, inte skärmstorleken.

Alla foton med pixeldimensioner som är tillräckligt små för att kunna visas på webben skulle vara för små för att någon kan ladda ner och skriva ut en version av god kvalitet i en användbar storlek, så med alla dessa skäl i åtanke, om ditt foto bara visas på skärmen, oavsett om det är på webben, i ett e-postmeddelande, eller vad som än är fallet, det finns helt enkelt inget logiskt skäl till varför du skulle behöva ställa in upplösningen till 72 ppi i Photoshop. Om du inte skriver ut fotot behöver du inte oroa dig för bildupplösning alls. Och där har vi det!