Ho progettato banner web per più di un anno, ma non ho mai preso in considerazione il DPI.
Stavo usando il 72 DPI predefinito, ma ora voglio sapere è necessario creare web design in 72 DPI? E se ne usassimo di più, ad esempio 200 DPI?
So che più DPI significa più qualità dell'immagine ed è per questo che voglio usare DPI alti, ma recentemente ho letto da qualche parte che per i banner web dovremmo usare 72 DPI. Voglio solo sapere se è obbligatorio e influisce negativamente su qualsiasi aspetto?
Risposte:
Le impostazioni PPI (pixel per pollice) non vengono utilizzate nelle immagini Web. Le immagini sul Web, i display retina o altro, vengono visualizzate in base alle dimensioni dei pixel (larghezza e altezza) e non a nessuna impostazione PPI / DPI. In effetti, molte immagini web come png, gif, jpg potrebbero non memorizzare nemmeno un'impostazione ppi nei loro dati interni e fare affidamento su impostazioni di larghezza e altezza.
Un'immagine da 100 pixel x 100 pixel viene visualizzata come quella sul Web indipendentemente da qualsiasi impostazione PPI / DPI.
Questo è il motivo per cui le immagini per i display retina vengono salvate a dimensioni 2x, anziché con una maggiore impostazione ppi. La densità di pixel dei display retina è più alta, tuttavia visualizzano ancora l'immagine in qualunque stato dello schermo sia la larghezza e l'altezza di un'immagine non basata su alcuna impostazione PPI.
In realtà, un monitor che utilizza una densità di pixel di 72ppi non è stato visto dall'inizio alla metà degli anni '80. 72ppi non è stato accurato per quasi 30 anni. In realtà, non è mai stato accurato per i sistemi Windows poiché Windows utilizza un valore predefinito di 96ppi per la densità di pixel.
Non mi credi? Provalo tu stesso. Crea due immagini in Photoshop entrambe 100 pixel per 100 pixel. Crea un'immagine 72ppi e l'altra 300ppi. Salvali entrambi per il web .. sono diversi in un browser web? No. Sono entrambe immagini 100px per 100px fisse.
Le impostazioni DPI (punti per pollice) sono applicabili solo quando si stampa un'immagine. DPI non ha alcuna influenza sulle immagini destinate allo schermo. DPI si riferisce alla quantità di punti / punti di inchiostro che la stampante posizionerà entro un pollice. Poiché nessun display sulla Terra utilizza inchiostro, DPI è un termine errato da utilizzare per qualsiasi cosa relativa agli schermi di visualizzazione.
Ricorda che alcuni produttori di dispositivi mobili hanno scelto di utilizzare il termine DPIx o xDPI che a volte viene abbreviato semplicemente in DPI. Questa non è la forma tradizionale dell'acronimo e il produttore ha semplicemente confuso le acque molto. Se vedi DPI in relazione alle risoluzioni dello schermo mobile, stanno parlando di PPI efficaci e non fanno realmente riferimento a Dots Per Inch. Un acronimo più appropriato sarebbe stato xPPI o PPIx perché gli schermi mobili, come tutti i display, usano pixel e non inchiostro.
Non fa alcuna differenza quale impostazione ppi usi per le immagini web. È la larghezza (pixel) e l'altezza (pixel) di un'immagine che sono importanti.
Quando si lavora con più immagini è importante rimanere coerenti. Vorrai che tutte le tue immagini siano impostate sullo stesso ppi per evitare il ridimensionamento e il ridimensionamento degli aspetti se dovessi spostare pezzi tra le immagini. Non importa se si sceglie di utilizzare 72, 96, 200 o 145,8 ppi, ma tutte le immagini devono essere impostate allo stesso modo.
Sebbene PPI sicuramente non abbia importanza: sono le dimensioni dei pixel che contano per la progettazione di web e app, dovresti stare molto attento all'uso delle applicazioni di progettazione e al mix delle impostazioni PPI. Ecco perché:
Tuttavia, se prevedi di utilizzare Photoshop e densità di pixel diverse per ciascun documento, trascinando i livelli e copiando gli stili di livello tra i documenti scala gli stili di livello: trascinando un livello da un documento Retina per iPhone a 326PPI a un documento Retina per iPad a 264PPI, tutti gli stili di livello verranno ridimensionati del 20% (quindi arrotondato al numero intero più vicino). E probabilmente non è quello che vuoi. Inoltre, l'anteprima di OS X visualizzerà le immagini 72PPI della dimensione esatta, indipendentemente da come è stata impostata.
I pixel per pollice sono solo un tag
È per questi motivi che assegno 72PPI a tutti i miei documenti di progettazione e ti consiglio di fare lo stesso. Per modificare la densità di pixel del documento Photoshop senza ridimensionare i dati dell'immagine, aprire la finestra di dialogo Dimensione immagine, deselezionare Ridimensiona immagine e digitare la densità di pixel desiderata.
Vado nei dettagli sul significato del "dpi", con esempi; con ciò, potresti vedere tu stesso la risposta. :
In breve, l'immagine è composta da punti di colore, uno accanto all'altro. Ma non hanno dimensioni in alcun senso fisico.
Ora, quando mostri un'immagine su uno schermo, normalmente inserirai i colori dei punti dell'immagine nel raster di rettangoli colorati che il tuo schermo può visualizzare. Si noti che entrambi, ciò che chiamo "punti" e rettangoli qui, sono chiamati "pixel" - ma guardando da vicino sono qualcosa di diverso.
Se visualizziamo un'immagine in questo modo naturale su uno schermo, possiamo misurarne le dimensioni.
Ad esempio, la nostra immagine è larga 500 punti, li inseriamo in rettangoli colorati sullo schermo e vediamo che è larga 5 pollici. Quindi, abbiamo 100 rettangoli per pollice, che mostrano 100 dei nostri punti per pollice.
Cioè, la nostra immagine ha 100 dpi sullo schermo.
Ma non abbiamo nemmeno guardato il valore dpi nel nostro file di immagine!
Ora, se guardiamo il nostro file, si potrebbe dire che l'immagine è 200 dpi! Il valore dpi indica quanti punti di colore sono visibili per pollice di larghezza o altezza dello schermo. Quindi, il valore dpi nell'immagine ci sta dicendo che la nostra immagine sarà larga 2,5 pollici quando visualizzata - come una promessa, non come un dato di fatto .
Quando abbiamo assegnato i punti dell'immagine allo schermo, non ci importava nemmeno di questo, perché li abbiamo appena visualizzati e misurato l'effettivo dpi fisico della rappresentazione dello schermo dell'immagine.
Quindi, come vedi, la promessa era semplicemente sbagliata . E a nessuno importa! Perché non è rilevante.
Il file era promettente - dicendo 200 dpi - sarà "2,5 pollici di larghezza quando mostrato". Quindi, abbiamo usato uno schermo che lo mostrava largo 5 pollici - possiamo saperlo perché sappiamo qual è lo schermo reale.
Normalmente non sappiamo nemmeno cosa userà l'utente finale come display, quindi possiamo indovinare solo comunque,
Quindi, ora ha senso:
Inoltre, non è possibile visualizzare solo una schermata sull'immagine: potrebbero avere dimensioni diverse, quindi non è nemmeno possibile conoscere un valore dpi reale durante la creazione di un file di immagine.
Vedi anche la mia risposta su Che cos'è esattamente un "Pixel"? .
Direttamente alla domanda, in base a quanto sopra:
Quando si specifica dpi in un file di immagine, alla fine non viene ridimensionato direttamente la qualità dello spettacolo di immagini.
Ma può essere usato per comunicare sulla qualità dell'immagine - in termini di intenti: puoi dire "Voglio che questa immagine venga mostrata su uno schermo da 200 dpi".
Se voglio mostrare questa immagine, potrei occuparmi di cercare uno schermo da 200 dpi; o forse uso solo un vecchio schermo da 75 dpi che potrebbe essere sulla mia scrivania. L'immagine sarà piuttosto grande, devo scorrere - ma questo è il mio problema e: non scoprirai nemmeno cosa viene realmente utilizzato - il valore di 200 dpi non controllava la qualità dell'immagine - comunicava solo come visualizzarlo "il giusto modo "se mi interessa.
Ho appena testato due copie di un'immagine che ho realizzato con Photoshop. Tuttavia ne ho impostato uno a 72 dpi e l'altro a 720 dpi per vedere se uno qualsiasi dei browser che uso li renderebbe di dimensioni diverse sullo schermo.
Su tutti i browser tranne uno, sembravano identici - in termini di dimensioni e qualità. Tuttavia, con l'uso di Google Chrome, quello realizzato a 72 sembrava a posto, ma quello realizzato a 720 era estremamente piccolo - come se fosse 1/10 della dimensione.
Santo cielo. Sembra un argomento per mettere tutte le immagini indipendenti (non vincolate all'interno di una pagina Web) a 72. Praticamente tutte le mie (che numero in centinaia) sono a 120 dpi. Anche se sembrano ancora abbastanza grandi su Chrome, forse con quel browser in mente dovrei lavorare a metterli tutti a 72. Forse da qualche parte nella stampa fine nelle preferenze di Chrome c'è un rimedio.