Il mito della risoluzione Web a 72 PPI

Scritto da Steve Patterson.

Se sei stato in giro per computer e immagini digitali per un po’, soprattutto se sei un web designer o un fotografo che pubblica le tue foto online, hai senza dubbio sentito dire che la risoluzione corretta per le immagini visualizzate sul web, o sugli schermi di computer in generale, è di 72 pixel per pollice (ppi).,

Potresti anche aver sentito dire che mentre 72 ppi è corretto per le immagini visualizzate su un Mac, un PC basato su Windows ha bisogno della risoluzione impostata su 96 ppi.

Alcuni dicono che è ” ppi “(pixel per pollice), altri sostengono che è” dpi ” (punti per pollice), e il tutto diventerebbe molto confuso se non fosse per un piccolo fatto – è tutta una sciocchezza completa! In questo tutorial, impareremo perché semplicemente non esiste una risoluzione standard del Web o dello schermo e perché, se le tue immagini sono destinate al web, non devi preoccuparti della risoluzione dell’immagine!

Un po ‘ di storia…,

L’origine della risoluzione dello schermo 72 ppi risale alla metà del 1980, quando Apple ha rilasciato i suoi primi computer Macintosh. Questi computer includevano un display da 9 pollici integrato con una risoluzione dello schermo di 72 pixel per pollice. Perché 72 pixel per pollice? È perché gli schermi Macintosh sono stati specificamente progettati per funzionare in perfetta armonia con le stampanti ImageWriter di Apple, che avevano una risoluzione di stampa di 144 punti per pollice – esattamente il doppio della risoluzione dello schermo., Ciò ha reso facile scalare la visualizzazione dello schermo alla pagina stampata, il che significava che il testo e la grafica potevano essere visualizzati in anteprima sullo schermo alle dimensioni esatte che apparivano quando venivano stampati. Più tardi, come Apple ha iniziato a fare display più grandi per il Macintosh, hanno fatto in modo di mantenere le risoluzioni dello schermo impostate sugli stessi 72 pixel per pollice in modo che gli utenti avrebbero sempre vedere un’anteprima accurata sullo schermo del documento stampato (fintanto che stavano usando una stampante ImageWriter).

Ma la risoluzione dello schermo 72 pixel per pollice era uno standard solo con Apple, e non durò., Le società di terze parti che vendono monitor per Macintosh non si attenevano allo standard e nemmeno i monitor per PC concorrenti. Oggi, quasi tre decenni dopo, la tecnologia è notevolmente migliorata e i giorni degli schermi con una risoluzione di soli 72 ppi sono ormai lontani. Anche Apple, la società che ha iniziato il tutto, ora vende i loro display con risoluzioni molto più elevate. Nessuno sta facendo 72 schermi ppi più. Nessuno sta usando 72 schermi ppi più., Eppure, anche se quella vecchia tecnologia è molto indietro di noi, abbiamo ancora un sacco di gente continua a credere che abbiamo bisogno di impostare la risoluzione delle nostre immagini a 72 pixel per pollice in Photoshop prima di caricarli sul web. La maggior parte delle persone pensa che il motivo sia che le immagini vengano visualizzate correttamente sullo schermo, quindi iniziamo le cose imparando un modo semplice per dimostrare che il monitor del computer, insieme a ogni monitor del computer moderno, ha in realtà una risoluzione molto superiore a 72 ppi.,

Mettendo alla prova lo standard 72 PPI

Come tutti gli altri in questi giorni, il display del computer (che si tratti di un monitor standalone, un sistema all-in-one come un iMac o parte di un laptop) ha una risoluzione dello schermo superiore a 72 pixel per pollice e non devi prendere la mia parola. Puoi facilmente testarlo da solo. Tutto ciò che serve è un righello o un metro a nastro. Ora, quando un negozio ti vende un monitor per computer, di solito ti dicono le sue dimensioni in base alla sua larghezza diagonale, con alcune dimensioni comuni di 17 pollici, 19 pollici, 24 pollici e così via., Va bene, ma per il nostro test qui, non dobbiamo preoccuparci di quel numero. Quello che dobbiamo scoprire è la larghezza effettiva, in pollici, dello schermo. Per farlo, basta afferrare il righello o il metro a nastro e misurare l’area dello schermo da sinistra a destra. Assicurarsi che si sta misurando solo l’area dello schermo stesso. Non includere qualsiasi bordo intorno allo schermo. Abbiamo bisogno di larghezza effettiva dello schermo (monitor del computer foto da ):

Misurare la larghezza dello schermo (non compreso il bordo esterno).,

Una volta misurata la larghezza, l’altra cosa che devi assicurarti è che il tuo monitor sia impostato sulla sua risoluzione nativa, che è il numero effettivo di pixel che lo schermo può visualizzare da sinistra a destra e dall’alto verso il basso. Ad esempio, un monitor con una risoluzione nativa di 1920 x 1080 (comunemente indicato in questi giorni come “full HD”) contiene 1920 pixel da sinistra a destra e 1080 pixel dall’alto verso il basso., Attualmente sto utilizzando un monitor con una risoluzione nativa del display di 2560 x 1440, ma il mio laptop ha una risoluzione nativa del display di 1920 x 1200, quindi varia, il che significa che dovrai conoscere la risoluzione nativa del tuo monitor specifico e assicurarti che sia ciò su cui hai impostato il monitor nelle opzioni di visualizzazione del tuo sistema operativo.,

Ora che hai misurato sul vostro schermo larghezza effettiva e hai fatto in modo che il monitor è in esecuzione al suo nativo risoluzione del display, per scoprire che il suo schermo risoluzione (in pixel per pollice), basta prendere il primo numero nativo risoluzione del display, che indica la larghezza dello schermo in pixel, e lo si divide per la larghezza dello schermo in pollici. Ad esempio, la mia risoluzione nativa del display è 2560 x 1440, quindi prenderò quel primo numero, 2560, che è la larghezza dello schermo in pixel, e lo dividerò per la larghezza in pollici, che nel mio caso era 23.,4 (o piuttosto vicino, comunque). Usando la comoda calcolatrice integrata del mio sistema operativo, 2560 ÷ 23.4 = 109.4, che arrotonderò a 109. Quindi, proprio da questo test semplice e veloce, ho confermato che la mia risoluzione dello schermo è di 109 pixel per pollice, non 72 pixel per pollice. Il tuo test con il tuo schermo potrebbe darti un risultato diverso dal mio, ma a meno che tu non stia ancora usando uno di quei computer Macintosh originali della metà degli anni ’80, sarà molto più alto di 72 ppi.

Se ti piace, puoi fare la stessa cosa con l’altezza dello schermo., Basta prendere il righello o il metro a nastro e misurare l’altezza effettiva dello schermo in pollici (ancora una volta evitando l’area di confine intorno ad esso):

Misurare l’altezza dello schermo (escluso il bordo esterno).

Quindi, prendi il secondo numero dalla risoluzione nativa del display dello schermo, che ti dà l’altezza in pixel, e dividerlo per l’altezza in pollici. Ancora una volta, la mia risoluzione nativa del display è 2560 x 1440, quindi prenderò quel secondo numero, 1440, e lo dividerò per la mia altezza dello schermo misurata che era di 13,2 pollici. Usando la mia calcolatrice, 1440 ÷ 13.2 = 109.,09 che ancora una volta arrotonderò a 109. Come possiamo vedere, dovresti ottenere praticamente lo stesso risultato usando la larghezza o l’altezza dello schermo. Nel mio caso, entrambi hanno funzionato a 109 pixel per pollice, non 72 pixel per pollice.

Per confronto, controlliamo la risoluzione effettiva dello schermo del mio laptop. È un MacBook Pro (realizzato ovviamente da Apple, la società che ci ha dato lo standard originale 72 ppi molti anni fa)., Il mio MacBook Pro ha una risoluzione nativa del display di 1920 x 1200, quindi proprio come ho fatto prima, prenderò quel primo numero, 1920, che mi dà la larghezza dello schermo in pixel, e lo dividerò per la larghezza dello schermo in pollici, che in questo caso è 14.4. Quindi, 1920 ÷ 14.4 = 133.3, che arrotonderò a 133 pixel per pollice. Questo è molto più alto di 72 e persino più alto del mio monitor standalone. Farò la stessa cosa con l’altezza, prendendo l’altezza in pixel (1200) e dividendola per l’altezza in pollici (9). 1200 ÷ 9 = 133,3, nuovamente arrotondato a 133 pixel per pollice.,

Due diversi display, ognuno con due diverse risoluzioni dello schermo (109 ppi e 133 ppi), entrambi notevolmente superiori a 72 ppi che, secondo molti oggi, rimane la risoluzione standard del settore per la visualizzazione di immagini sul web e sullo schermo., Se il mio schermo, il tuo schermo e lo schermo di tutti gli altri hanno una risoluzione superiore a 72 ppi, per non parlare del fatto che entrambi i miei schermi avevano risoluzioni molto diverse l’una dall’altra e anche il tuo schermo potrebbe avere una risoluzione diversa, allora chiaramente, non solo non esiste più uno standard ufficiale per la risoluzione dello schermo, ma anche se ci fosse, non sarebbe più 72 ppi. Quei giorni, come i computer Macintosh originali è stato progettato per, sono storia.,

La risoluzione dell’immagine influisce sulle dimensioni di stampa, non sulle dimensioni dello schermo

Se il fatto che i monitor dei computer oggi abbiano tutti risoluzioni dello schermo superiori a 72 ppi non ti ha convinto che non esiste più una cosa come uno standard di risoluzione dello schermo 72 ppi, ecco un altro fatto importante da considerare. Se in precedenza hai letto il nostro tutorial sulla risoluzione dell’immagine, le dimensioni in pixel e le dimensioni del documento, sai già che la risoluzione dell’immagine non ha assolutamente nulla a che fare con il modo in cui l’immagine appare sullo schermo. In effetti, un’immagine digitale, da sola, non ha alcuna risoluzione intrinseca. Sono solo pixel., Ha un certo numero di pixel da sinistra a destra e un certo numero dall’alto verso il basso. La larghezza e l’altezza di un’immagine, in pixel, è nota come le sue dimensioni in pixel, e questo è tutto ciò di cui uno schermo di computer si preoccupa.

La dimensione alla quale un’immagine appare sullo schermo dipende solo da due cose: le dimensioni in pixel dell’immagine e la risoluzione dello schermo. Finché hai impostato lo schermo alla sua risoluzione nativa come abbiamo discusso in precedenza, verrà visualizzata un’immagine pixel per pixel., In altre parole, ogni pixel nell’immagine occuperà esattamente un pixel sullo schermo. Ad esempio, un’immagine di 640×480 pixel riempirebbe un’area di 640×480 pixel dello schermo. Un banner di 800 pixel su un sito web apparirebbe largo 800 pixel sullo schermo. Ne ‘piu’, ne ‘ meno. E non importa quale sia la risoluzione dell’immagine impostata in Photoshop, che si tratti di 72 ppi, 300 ppi o 3000 ppi, non avrà alcun effetto su quanto grande o piccola l’immagine appare sullo schermo.

Questo perché la risoluzione dell’immagine influisce solo su una cosa: la dimensione dell’immagine quando viene stampata., Impostando la risoluzione in Photoshop, diciamo alla stampante, non allo schermo, quanti pixel nell’immagine da spremere in un pollice di carta. Più pixel si sta comprimendo in ogni centimetro di carta, più piccola sarà l’immagine quando viene stampata. E in generale, più pixel stai stampando per pollice, maggiore è la qualità di stampa.

Possiamo facilmente capire quanto grande una foto verrà stampata in base a una determinata risoluzione dell’immagine., Basta prendere la larghezza della foto in pixel e dividerla per la risoluzione dell’immagine, quindi prendere l’altezza della foto in pixel e dividerla per la risoluzione dell’immagine pure. Se prendiamo un’immagine 640 x 480 pixel, ad esempio, e impostiamo la sua risoluzione su 72 ppi in Photoshop, possiamo dividere la larghezza e l’altezza della foto per la sua risoluzione per determinare che stamperà su carta a circa 8,9 x 6,7 pollici., Se aumentiamo la sua risoluzione in Photoshop a, diciamo, 240 ppi, che è una risoluzione di stampa più comune, quindi di nuovo se facciamo i conti, dividendo la larghezza e l’altezza dei pixel per 240 ppi, sappiamo che la foto stamperebbe a una dimensione di 2,7 x 2 pollici, che è molto più piccola che se l’avessimo stampata a 72 ppi, ma la qualità di stampa complessiva sarebbe molto migliore. Ma ciò che è più importante capire qui è che cambiando la risoluzione, non stiamo, in alcun modo, influenzando l’aspetto dell’immagine sullo schermo.,

Per vedere più chiaramente come la risoluzione influisce sulle dimensioni di stampa e non sulle dimensioni dello schermo, ecco un’immagine che ho aperto in Photoshop. Questo piccolo ragazzo ha anche cercato di dare un senso a tutta questa roba di risoluzione Web 72 ppi, ma sembra che potrebbe pensarci un po ‘ (pensando alla foto del bambino da ):

La risoluzione dell’immagine non è davvero così complicata, ma sicuramente una A per lo sforzo.,

Aprirò la finestra di dialogo Dimensione immagine di Photoshop salendo al menu Immagine nella barra dei menu nella parte superiore dello schermo e scegliendo Dimensione immagine:

Andando su Immagine> Dimensione immagine.

Nella parte superiore della finestra di dialogo Dimensione immagine c’è la sezione Dimensioni pixel che ci dice la larghezza e l’altezza dell’immagine in pixel. Qui possiamo vedere che la mia foto ha sia una larghezza che un’altezza di 500 pixel, rendendolo una dimensione decente per la visualizzazione sul web., Questa è l’unica parte della finestra di dialogo Dimensione immagine che interessa lo schermo del computer – le dimensioni effettive in pixel dell’immagine:

La sezione Dimensioni pixel ci mostra la larghezza e l’altezza in pixel.

Sotto le dimensioni in pixel c’è la sezione Dimensione documento che ci dice quanto grande l’immagine apparirebbe attualmente sulla carta se dovessimo stamparla. Questa sezione si occupa esclusivamente delle dimensioni di stampa e non ha alcun effetto sul modo in cui l’immagine appare sullo schermo. Capita anche di essere a casa per l’opzione di risoluzione tutto-importante (il motivo per cui siamo tutti qui!,), che ha senso perché la risoluzione influisce sulle dimensioni di stampa, non sulle dimensioni dello schermo. Come possiamo vedere, Photoshop è andato avanti e impostare la risoluzione della mia foto a 72 pixel per pollice (sì, anche Photoshop è contribuire a 72 ppi mito), e direttamente sopra l’opzione di Risoluzione, nelle caselle Larghezza e Altezza, possiamo vedere che a 72 ppi, la mia 500 x 500 pixel foto stampate a 6.944 x 6.944 pollici su carta (500 ÷ 72 = 6.944):

Il Formato del Documento sezione ci mostra il formato di stampa basato sulla risoluzione corrente. Non ha alcun effetto sulle dimensioni dello schermo.,

Vediamo cosa succede se aumento la risoluzione dell’immagine. Prima di farlo, però, sto andando a rapidamente deselezionare l’opzione Ricampiona Immagine vicino alla parte inferiore della finestra di dialogo, in modo che l’immagine mantiene le dimensioni originali quando cambio la risoluzione:

Deselezionando l’opzione Ricampiona Immagine.

Con Resample Image deselezionato, aumenterò la risoluzione da 72 pixel per pollice a 240 pixel per pollice. Possiamo vedere nella sezione Dimensioni in pixel in alto che l’aumento della risoluzione non ha modificato le dimensioni in pixel effettive., È ancora 500 x 500 pixel, il che significa che occuperebbe ancora un’area di 500 x 500 pixel sullo schermo. Ma a 240 ppi, ora stampa su carta con una dimensione di soli 2.083 x 2.083 pollici (500 ÷ 240 = 2.083). La modifica della risoluzione ha cambiato la dimensione di stampa della foto, ma nient’altro:

L’immagine ora viene stampata più piccola ma rimarrà esattamente la stessa dimensione di 500 x 500 pixel sullo schermo.

Aumenterò di nuovo la risoluzione dell’immagine, questa volta a qualcosa di pazzo come 500 pixel per pollice, solo per rendere la matematica davvero facile., Un’immagine da 500 x 500 pixel, impostata su una risoluzione di 500 pixel per pollice, viene stampata come immagine da 1 x 1 pollice su carta (500 ÷ 500 = 1). Ancora una volta, le dimensioni effettive in pixel dell’immagine non sono cambiate., Anche a 500 ppi, la mia immagine appare non più grande o più piccola schermata che sarebbe a 72 ppi, o 240 ppi, o a qualsiasi risoluzione, perché è ancora un 500 x 500 pixel dell’immagine indipendentemente dall’impostazione della risoluzione, e le sue dimensioni in pixel sono tutte per il vostro schermo del computer si preoccupa di:

A 500 ppi, l’immagine si stampa in realtà molto piccola, ma sarebbe ancora apparire come un 500 x 500 pixel dell’immagine sullo schermo.

Infine, ecco un confronto side-by-side dell’immagine come appare a tutte e tre le risoluzioni di cui sopra., Ho reso l’immagine più piccola (ora è solo 200 x 200 pixel) in modo da poter adattare tutte e tre le versioni l’una accanto all’altra, ma la prima versione a sinistra è stata salvata a 72 ppi. La versione in mezzo salvato 240 ppi, e la versione a destra è stato salvato a 500 ppi:

A 72 ppi (a sinistra), 240 ppi (al centro) e 500 ppi (a destra) versione dell’immagine.

Come possiamo vedere chiaramente, la risoluzione non ha alcun effetto su come l’immagine appare sullo schermo., Tutte e tre le versioni occupano ciascuno uno spazio di esattamente 200 x 200 pixel indipendentemente dall’impostazione della risoluzione. Anche la qualità di ogni versione è esattamente la stessa. Ogni versione stamperebbe a dimensioni molto diverse a causa delle diverse impostazioni di risoluzione, ma non fa alcuna differenza per le dimensioni dello schermo o per la qualità dell’immagine.

Mentre è dubbio che questo web 72 ppi e risoluzione dello schermo sciocchezze andrà via in qualunque momento presto, spero che questo tutorial ha almeno reso più facile capire perché è, infatti, sciocchezze a questo punto., I monitor dei computer in questi giorni hanno tutti risoluzioni dello schermo superiori a 72 ppi e l’opzione di risoluzione dell’immagine in Photoshop influisce solo sulle dimensioni di stampa di una foto, non sulle dimensioni dello schermo.

le foto con dimensioni in pixel abbastanza piccolo per la visualizzazione sul web sarebbe troppo piccolo per chiunque di scaricare e stampare un buono di qualità versione in un formato utile, quindi, con tutti questi motivi nella mente, se la tua foto sarà solo essere visualizzati sullo schermo, sia su web, e-mail, o qualunque sia il caso può essere, semplicemente non c’è alcuna ragione logica perché è necessario impostare la risoluzione a 72 ppi in Photoshop., A meno che tu non stia stampando la foto, non devi preoccuparti della risoluzione dell’immagine. E ci siamo!

Ottieni tutti i nostri tutorial di Photoshop come PDF! Scaricarli oggi!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *