Se ti occupi di computer e immagini digitali da un po ', specialmente se sei un web designer o un fotografo che pubblica le tue foto online, senza dubbio hai sentito dire che la risoluzione corretta per le immagini visualizzate sul web, o sugli schermi dei 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 richiede una risoluzione impostata su 96 ppi.
Alcuni sostengono che sia "ppi" ( pixel per pollice), altri sostengono che sia "dpi" ( punti per pollice), e il tutto diventerebbe molto confuso se non fosse per un piccolo fatto - è tutto senza senso! In questo tutorial impareremo perché non esiste semplicemente una risoluzione standard per lo schermo o il Web e perché, se le tue immagini sono destinate al Web, non devi preoccuparti affatto della risoluzione delle immagini!
Un po 'di storia …
L'origine della risoluzione dello schermo a 72 ppi risale alla metà degli anni '80, quando Apple ha rilasciato i suoi primi computer Macintosh. Questi computer includevano un display da 9 pollici incorporato con una risoluzione dello schermo di 72 pixel per pollice. Perché 72 pixel per pollice? È perché gli schermi Macintosh sono stati appositamente 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 ridimensionare la visualizzazione dello schermo alla pagina stampata, il che significava che il testo e la grafica potevano essere visualizzati in anteprima sullo schermo alla dimensione esatta in cui sarebbero apparsi una volta stampati. Successivamente, quando Apple ha iniziato a realizzare schermi più grandi per Macintosh, si sono assicurati di mantenere le risoluzioni dello schermo impostate sugli stessi 72 pixel per pollice in modo che gli utenti vedessero sempre un'anteprima sullo schermo accurata del documento stampato (purché fossero utilizzando una stampante ImageWriter).
Ma la risoluzione dello schermo di 72 pixel per pollice era uno standard solo con Apple e non è durata. Le società di terze parti che vendono monitor per Macintosh non si sono attenute allo standard, né 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. Perfino Apple, la società che ha dato il via al tutto, ora vende i suoi display con risoluzioni molto più elevate. Nessuno sta più facendo schermi a 72 ppi. Nessuno sta più usando schermi a 72 ppi. Eppure, anche se quella vecchia tecnologia è molto indietro, abbiamo ancora un sacco di persone che continuano a credere che dobbiamo impostare la risoluzione delle nostre immagini su 72 pixel per pollice in Photoshop prima di caricarle sul Web. Molte persone pensano 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 tuo computer, insieme a ogni monitor di computer moderno, ha in realtà una risoluzione molto superiore a 72 ppi.
Mettere alla prova lo standard 72 PPI
Come tutti gli altri in questi giorni, lo schermo del tuo computer (che si tratti di un monitor autonomo, 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 hai di crederci sulla parola. Puoi facilmente provarlo tu stesso. 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 abbiamo bisogno di preoccuparci di quel numero. Quello che dobbiamo scoprire è la larghezza effettiva, in pollici, del tuo schermo. Per farlo, prendi semplicemente il tuo righello o metro e misura l'area dello schermo da sinistra a destra. Assicurati di misurare solo l'area dello schermo stessa. Non includere alcun bordo attorno allo schermo. Abbiamo bisogno della larghezza effettiva dello schermo (foto del monitor del computer di Shutterstock):
Misura la larghezza dello schermo (escluso il bordo esterno).
Dopo aver misurato la larghezza, l'altra cosa che devi accertare è che il tuo monitor sia impostato sulla sua risoluzione di visualizzazione 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 di visualizzazione nativa di 1920 x 1080 (comunemente denominato in questi giorni "full HD") contiene 1920 pixel da sinistra a destra e 1080 pixel dall'alto verso il basso. Attualmente sto usando un monitor con una risoluzione del display nativa di 2560 x 1440, ma il mio laptop ha una risoluzione del display nativa di 1920 x 1200, quindi varia, il che significa che dovrai conoscere la risoluzione del display nativa del tuo monitor specifico e assicurati che sia impostato sul monitor nelle opzioni di visualizzazione del tuo sistema operativo.
Ora che hai misurato la larghezza effettiva del tuo schermo e ti sei assicurato che il monitor funzioni alla sua risoluzione del display nativa, per scoprire qual è la sua risoluzione effettiva (in pixel per pollice), prendi semplicemente il primo numero dal nativo risoluzione dello schermo, che indica la larghezza dello schermo in pixel e dividerlo per la larghezza dello schermo in pollici. Ad esempio, la mia risoluzione del display nativa è 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 il pratico calcolatore integrato nel mio sistema operativo, 2560 ÷ 23.4 = 109.4, che arrotonderò a 109. Quindi, proprio da questo test rapido e semplice, ho confermato che la mia risoluzione dello schermo è di 109 pixel per pollice, non 72 pixel per pollice. Il tuo test con lo schermo può darti un risultato diverso dal mio, ma a meno che tu non stia ancora utilizzando 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 la misura di nastro e misurare l'altezza effettiva dello schermo in pollici (ancora una volta evitando l'area del bordo attorno ad esso):
Misura l'altezza dello schermo (escluso il bordo esterno).
Quindi, prendi il secondo numero dalla risoluzione del display nativa dello schermo, che ti dà l'altezza in pixel e dividerlo per l'altezza in pollici. Ancora una volta, la mia risoluzione del display nativa è 2560 x 1440, quindi prenderò quel secondo numero, 1440, e lo dividerò per la mia altezza dello schermo misurata che era 13, 2 pollici. Usando la mia calcolatrice, 1440 ÷ 13.2 = 109.09 che arrotonderò nuovamente 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 a 72 pixel per pollice.
Per fare un confronto, controlliamo l'effettiva risoluzione dello schermo del mio laptop. È un MacBook Pro (creato ovviamente da Apple, la società che ci ha fornito lo standard originale a 72 ppi molti anni fa). Il mio MacBook Pro ha una risoluzione del display nativa 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 del schermo in pollici, che in questo caso è 14, 4. Quindi, 1920 ÷ 14.4 = 133.3, che arrotonderò a 133 pixel per pollice . È molto più alto di 72 e persino più alto del mio monitor autonomo. 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 display diversi, ciascuno con due diverse risoluzioni dello schermo (109 ppi e 133 ppi), entrambi notevolmente superiori a 72 ppi che, secondo molti oggi, rimangono la risoluzione standard del settore per la visualizzazione di immagini sul Web e sullo schermo. Se il mio schermo, il tuo schermo e quello 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 tra loro e il tuo schermo potrebbe avere anche una risoluzione diversa, quindi chiaramente, no solo non esiste più uno standard ufficiale per la risoluzione dello schermo, ma anche se ci fosse, non sarebbe più di 72 ppi. Quei giorni, come i computer Macintosh originali per cui è stato progettato, sono la storia.
Plug-in codici brevi, azioni e filtri: errore nello shortcode (ads-essentials-middle)
La risoluzione dell'immagine influenza le dimensioni di stampa, non le dimensioni dello schermo
Se il fatto che oggi i monitor dei computer abbiano tutti risoluzioni dello schermo superiori a 72 ppi non ti ha convinto che non esiste più uno standard di risoluzione dello schermo a 72 ppi, ecco un altro fatto importante da considerare. Se in precedenza hai letto il nostro tutorial Risoluzione dell'immagine, Dimensioni pixel e Dimensione 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 dimensioni in pixel, ed è tutto ciò che interessa allo schermo di un computer.
La dimensione alla quale un'immagine appare sullo schermo dipende solo da due cose: le dimensioni in pixel dell'immagine e la risoluzione di visualizzazione dello schermo. Finché hai impostato lo schermo alla sua risoluzione di visualizzazione nativa, come abbiamo discusso in precedenza, quindi un'immagine verrà visualizzata pixel per pixel. In altre parole, ogni pixel nell'immagine occuperà esattamente un pixel sullo schermo. Ad esempio, un'immagine di 640x480 pixel riempirebbe un'area di 640x480 pixel dello schermo. Un banner largo 800 pixel su un sito Web apparirebbe largo 800 pixel sullo schermo. Ne più ne meno. E indipendentemente da ciò che imposti la risoluzione dell'immagine in Photoshop, che si tratti di 72 ppi, 300 ppi o 3000 ppi, non avrà alcun effetto su quanto grande o piccola l'immagine appaia 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 devono spremere in un pollice di carta. Più pixel spremi in ogni pollice di carta, più piccola apparirà l'immagine quando verrà stampata. E in generale, più pixel stai stampando per pollice, maggiore è la qualità di stampa.
Possiamo facilmente capire quanto verrà stampata una foto 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 anche per la risoluzione dell'immagine. Se prendiamo un'immagine di 640 x 480 pixel, come esempio, e impostiamo la sua risoluzione su 72 ppi in Photoshop, allora 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 la matematica, dividendo la larghezza e l'altezza dei pixel per 240 ppi, sappiamo che la foto verrebbe stampata in una dimensione di 2, 7 x 2 pollici, che è molto più piccolo di se lo avessimo stampato 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 in che modo la risoluzione influisce sulla dimensione di stampa e non sulla dimensione dello schermo, ecco un'immagine che ho aperto in Photoshop. Questo ragazzino ha anche cercato di dare un senso a tutte queste cose di risoluzione web a 72 ppi, ma sembra che potrebbe pensarci un po '(pensando alla foto del bambino di Shutterstock):
La risoluzione delle immagini non è davvero così complicata, ma sicuramente una A per sforzo.
Aprirò la finestra di dialogo Dimensione immagine di Photoshop andando al menu Immagine nella barra dei menu nella parte superiore dello schermo e scegliendo Dimensione immagine :
Andare a Immagine> Dimensione immagine.
Nella parte superiore della finestra di dialogo Dimensione immagine è presente la sezione Dimensioni pixel che indica 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, rendendola di dimensioni decenti per la visualizzazione sul web. Questa è l'unica parte della finestra di dialogo Dimensione immagine a cui interessa lo schermo del tuo 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 l'immagine al momento sarebbe stampata su carta se dovessimo stamparla. Questa sezione tratta esclusivamente delle dimensioni di stampa e non ha alcun effetto sul modo in cui l'immagine appare sullo schermo. Capita anche di ospitare l'importante opzione di risoluzione (il motivo per cui siamo tutti qui!), Il che ha senso perché la risoluzione influenza le dimensioni di stampa, non le dimensioni dello schermo. Come possiamo vedere, Photoshop è andato avanti e ha impostato la risoluzione della mia foto su 72 pixel per pollice (sì, anche Photoshop sta contribuendo al mito di 72 ppi), e direttamente sopra l'opzione Risoluzione, nelle caselle Larghezza e Altezza, abbiamo posso vedere che a 72 ppi, la mia foto da 500 x 500 pixel verrebbe stampata su 6.944 x 6.944 pollici su carta (500 ÷ 72 = 6.944):
La sezione Dimensioni documento ci mostra le dimensioni di stampa in base alla risoluzione corrente. Non ha alcun effetto sulla dimensione dello schermo.
Vediamo cosa succede se aumento la risoluzione dell'immagine. Prima di farlo, deselezionerò rapidamente l' opzione Ricampiona immagine nella parte inferiore della finestra di dialogo in modo che l'immagine mantenga le dimensioni dei pixel originali quando modifico 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 pixel in alto che l'aumento della risoluzione non ha modificato le dimensioni effettive dei pixel. Sono 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 verrebbe stampato su carta con una dimensione di soli 2.083 x 2.083 pollici (500 ÷ 240 = 2.083). La modifica della risoluzione ha modificato le dimensioni di stampa della foto, ma nient'altro:
L'immagine verrebbe ora stampata più piccola ma rimarrebbe esattamente la stessa dimensione di 500 x 500 pixel sullo schermo.
Aumenterò di nuovo la risoluzione dell'immagine, questa volta a qualcosa di folle come 500 pixel per pollice, solo per rendere la matematica davvero semplice. Un'immagine di 500 x 500 pixel, impostata su una risoluzione di 500 pixel per pollice, verrebbe stampata come immagine 1 x 1 pollice su carta (500 ÷ 500 = 1). Ancora una volta, le dimensioni effettive dei pixel dell'immagine non sono cambiate. Anche a 500 ppi, la mia immagine non apparirebbe più grande o più piccola sullo schermo rispetto a 72 ppi, o 240 ppi, o con qualsiasi risoluzione perché è ancora un'immagine di 500 x 500 pixel indipendentemente dall'impostazione della risoluzione, e le sue dimensioni in pixel sono tutto lo schermo del tuo computer si preoccupa di:
A 500 ppi, l'immagine verrebbe stampata in realtà molto piccola ma apparirebbe comunque come un'immagine di 500 x 500 pixel sullo schermo.
Infine, ecco un confronto affiancato dell'immagine come appare in tutte e tre le risoluzioni di cui sopra. Ho ridotto l'immagine (ora è solo 200 x 200 pixel) in modo da poter adattare tutte e tre le versioni una accanto all'altra, ma la prima versione a sinistra è stata salvata a 72 ppi. La versione nel mezzo è stata salvata a 240 ppi e la versione a destra è stata salvata a 500 ppi:
Una versione di 72 ppi (a sinistra), 240 ppi (al centro) e 500 ppi (a destra) dell'immagine.
Come possiamo vedere chiaramente, la risoluzione non ha alcun effetto sull'aspetto dell'immagine sullo schermo. Tutte e tre le versioni occupano ciascuna uno spazio di esattamente 200 x 200 pixel indipendentemente dall'impostazione della risoluzione. Anche la qualità di ogni versione è esattamente la stessa. Ogni versione verrebbe stampata in 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 questa assurdità della risoluzione dello schermo e del web a 72 ppi sparirà presto, spero che questo tutorial abbia almeno reso più facile capire perché, in realtà, è una sciocchezza a questo punto. I monitor per computer al giorno d'oggi hanno risoluzioni dello schermo superiori a 72 ppi e l'opzione di risoluzione dell'immagine in Photoshop influenza solo le dimensioni di stampa di una foto, non le dimensioni dello schermo.
Qualsiasi foto con dimensioni in pixel abbastanza piccole da essere visualizzata sul Web sarebbe troppo piccola per essere scaricata e stampata da una versione di buona qualità a dimensioni utili, quindi tenendo presenti tutti questi motivi, se la tua foto verrà visualizzata solo sullo schermo, indipendentemente dal fatto che è sul Web, in un'e-mail o qualunque sia il caso, semplicemente non c'è alcun motivo logico per cui dovresti impostare la sua risoluzione su 72 ppi in Photoshop. A meno che tu non stia stampando la foto, non devi preoccuparti della risoluzione dell'immagine. E lì ce l'abbiamo!