Il mito del DPI
La dimensione di un'immagine in un layout di un sito Web è importante. Da un corretto allineamento per ottenere la giusta quantità di spazio bianco, il dimensionamento delle foto e della grafica correttamente è essenziale per creare un aspetto equilibrato.
Le immagini sul web sono misurate in pixel . Eppure molte persone passano la briga di impostare le loro immagini a 72 punti per pollice (
L'equivoco sulla risoluzione delle immagini digitali legate al web è che devono soddisfare un certo numero di punti per pollice.
Nella stampa, pixel per pollice e punti per pollice influiscono sulle dimensioni di un'immagine su una pagina. DPI non si applica al layout sul Web.
Quando qualcuno converte un'immagine a 72 DPI , aggiunge un ulteriore passaggio senza alcun beneficio. Le pagine Web sono misurate in pixel, non in unità del mondo reale come pollici.
Quando qualcuno ti chiede un'immagine web che è, per esempio, larga due pollici, sta stimando come apparirebbe sul proprio monitor. Senza modificare le dimensioni dei pixel dell'immagine, quell'immagine apparirebbe più grande o più piccola su diversi monitor e apparirebbe addirittura diversa sullo stesso monitor con una diversa risoluzione.
La dimensione dei pixel dipende dal contesto
Un pixel (che è l'abbreviazione di "elemento immagine") è la più piccola unità di misura su una griglia che mostra un'immagine digitale. DPI misura quanto sono grandi quei pixel, o punti, quando vengono stampati.
L'immagine in basso è mostrata in diversi DPI .
36 DPI
150 DPI
3.096 DPI
Scarica e aprili in un editor di immagini per vedere di persona. Tutti e tre sembrano uguali perché sono stati ridimensionati, non ricampionati.
Ridimensionamento delle dimensioni dei pixel delle modifiche; Ricampionamento Cambia il conteggio dei pixel
Ci sono due modi per ingrandire un'immagine: aggiungi più pixel o ingrandisci i pixel. Allo stesso modo, puoi ridurre le dimensioni di un'immagine eliminando i pixel o riducendo i pixel. Ma il restringimento e la rasatura sono due processi diversi.
Mostrato sopra, il ridimensionamento di un'immagine cambia la dimensione dei suoi pixel, non il suo numero di pixel. Non stiamo aumentando o diminuendo il numero di pixel, cambiando solo la dimensione di quei pixel quando stampati. È una relazione inversa: le immagini con pixel più grandi avranno una densità di pixel inferiore (meno pixel nello stesso numero di pollici) quando stampata.
Mostrato sopra, il ricampionamento modifica le dimensioni dell'immagine aumentando o diminuendo il numero di pixel. Le immagini con più pixel conterranno più informazioni e spesso renderanno la grafica più ricca.
Il web design si occupa di ricampionare, non di ridimensionare, perché ogni pixel di una pagina web avrà sempre le stesse dimensioni. Una pagina web che misura 800 pixel di larghezza può contenere immagini di larghezza fino a 800 pixel. Rendere più ampio ogni pixel non cambia il fatto che il layout può contenere solo 800 di essi.
Non è possibile ingrandire l'immagine di un'immagine ingrandendone i pixel perché ogni pixel sullo stesso schermo avrà sempre le stesse dimensioni.
Ridimensionamento e ricampionamento in Photoshop
La casella Dimensione immagine di Photoshop ( Immagine, Dimensione immagine ) controlla sia il ridimensionamento che il ricampionamento delle immagini.
La casella di controllo "Resample" modifica il numero di pixel che si adattano a un pollice lineare, letteralmente i pixel per pollice. Se disattiviamo il ricampionamento, l'unico modo per modificare le dimensioni dell'immagine è ingrandire i pixel per la stampa.
Con la casella di ricampionamento lasciata deselezionata, cambiando la casella "risoluzione" si modifica la dimensione fisica dell'immagine quando viene stampata, ma non il suo numero di pixel. Una volta stampato, un'immagine apparirà più grande o più piccola. Su una pagina web, sarebbe della stessa dimensione.
Un esperimento
Capire se DPI sia importante nei layout web può essere fatto con un piccolo esperimento. Se modifichiamo un'immagine da 300 x 100 pixel a 72 DPI a 300 x 100 pixel a 144 DPI, quanti pixel avremmo?
- Crea un'immagine di 300 pixel di larghezza e 100 pixel di altezza, a 72 DPI .
- Facciamo un po 'di matematica. Quanti pixel sarebbero?
- Ora ridimensiona l'immagine a 300 x 100 pixel a 144 DPI .
- Facciamo un po 'più di matematica. Quanti pixel è quello?
Le risposte sono:
- 300 x 100 = 30.000
- 300 x 100 è ancora 30.000
Pixel per pollice sullo schermo
Il numero di pixel per pollice è ancora rilevante online, ma le impostazioni DPI non influiscono sul modo in cui viene visualizzata un'immagine.
I monitor dei computer possono essere misurati fisicamente in pollici e ognuno visualizza un certo numero di pixel. Ad esempio, supponiamo che un monitor da 19 "mostri 1280 x 1024 pixel. L'utente può cambiarlo per visualizzare 1600 x 1200 pixel, aumentando così il suo PPI (cioè aggiungendo più pixel nello stesso numero di pollici). L'importante differenza nella stampa è che puoi controllare i pixel per pollice di un'immagine.
Puoi provare questo sulla maggior parte dei computer moderni. Su un Mac, vai a Menu Apple, Üí Preferenze di Sistema , quindi fai clic su "Visualizza" per vedere le varie risoluzioni a cui è possibile impostare il monitor. Per Windows, fare clic con il pulsante destro del mouse sul desktop e selezionare "Personalizza", quindi selezionare "Impostazioni schermo". Modificare la risoluzione dello schermo (numero di pixel) e osservare come gli elementi sul desktop Mac o PC diventano più grandi o più piccoli.
Ovviamente, il tuo monitor non sta cambiando di dimensioni. Ma se tenete un righello sullo schermo, vedrete che le dimensioni di icone e finestre sono inversamente proporzionali al numero di pixel visualizzati. Ad esempio, un laptop da 13 ", un monitor CRT da 17" e un monitor a schermo piatto da 21 " tutti possono presentare un desktop che misura 1024 x 768 pixel. Più pixel significano icone più piccole; meno pixel significano icone più grandi. Più pixel nello stesso monitor ti danno una densità di pixel più alta; un minor numero di pixel è inferiore.
La differenza diventa più evidente con altri tipi di display:
- Un tabellone per le affissioni digitale che misura 47 x 12 piedi può utilizzare solo 888 x 240 pixel (circa 1,6 PPI).
- Uno schermo iPhone oggi misura 2 x 3 pollici e contiene 320 x 480 pixel (circa 160 PPI) .
Un singolo file PNG di 100 x 100 pixel si adatterebbe sia sul tabellone 888 x 240 sia sull'iPhone 320 x 480. Ma sembrerebbe molto più grande sul tabellone perché i pixel della scheda sono 100 volte più grandi di quelli dell'iPhone (1,6 vs 160).
L'illustrazione seguente mostra due dispositivi con diverse dimensioni in pixel.
La stessa immagine viene mostrata su due diversi display. Le differenze nel PPI di ciascun display rendono l'immagine sul display di destra più grande, anche se ha un minor numero di pixel nel complesso.
Puoi testarlo da solo:
- Crea un JPG che misura 960 x 100 pixel, con qualsiasi densità di pixel.
- Misuralo a mano con un righello.
- Guarda la stessa immagine su un computer con un monitor più grande o più piccolo. Ad esempio, se hai creato l'immagine su uno schermo da 20 ", provalo su un laptop da 13".
- Stampa lo stesso numero di pixel con densità di pixel diverse per visualizzare su carta formati diversi.
Il risultato è che questa immagine avrebbe lo stesso numero di pixel ma una diversa larghezza in pollici. Il layout del sito web apparirebbe in diverse dimensioni, nonostante il codice identico. (Per un caso estremo, guarda l'intera pagina su un iPhone: 960 pixel sono montati a tre pollici o meno, senza che il file stesso venga modificato.)
Perché 72 è significativo
Molti formati di file, tra cui JPG, TIF e PSD, memorizzano l'impostazione della densità dei pixel dell'immagine. Se si salva un JPG a 200 pixel / pollice, rimarrà a 200.
Altri formati, inclusi GIF e PNG, eliminano la densità dei pixel. Se si salva un'immagine da 200 DPI come PNG, non si salverà affatto quel DPI. Molti editor di immagini, incluso Adobe Photoshop, presuppongono che un'immagine sia 72
Settantadue è un numero magico nella stampa e nella tipografia. Nel 1737, Pierre Fournier utilizzava unità chiamate ciceros per misurare il tipo. Sei ciceros erano 0,998 pollici.
Intorno al 1770, François-Ambroise Didot usava ciceros leggermente più grandi per adattarsi al "piede" francese standard. La pica di Didot era lunga 0,1776 pollici e divisa uniformemente in 12 incrementi. Oggi li chiamiamo punti.
Nel 1886, l'American Point System stabilì una "pica" di 0,166 pollici. Sei di questi sono 0,996 pollici.
Nessuna delle unità si è mai allontanata di molto da 12 punti per pica: 6 picas per pollice = 72 punti per pollice. Era uno standard importante nel 1984, quando Apple si preparò a introdurre il primo computer Macintosh. L'interfaccia del Mac è stata progettata per aiutare le persone a relazionare il computer al mondo fisico. Gli ingegneri del software usavano la metafora di una scrivania per descrivere il funzionamento arcano di un computer, fino alle icone "carta", "cartella" e "cestino".
Ogni pixel sullo schermo del Mac originale da 9 pollici (diagonale) e 512 x 342 pixel misurava esattamente 1 x 1 punto. Tieni un righello sul vetro e vedrai che 72 pixel riempiono effettivamente 1 pollice. In questo modo, se si stampava un'immagine o una parte di testo e la si teneva accanto allo schermo, sia l'immagine che la copia cartacea avrebbero le stesse dimensioni.
Ma le prime immagini digitali erano goffe e frastagliate. Con il miglioramento della tecnologia dello schermo e della memoria, i computer sono stati in grado di visualizzare più pixel sullo stesso monitor. L'abbinamento di una stampa allo schermo è diventato ancora meno certo quando le app raster e vettoriali consentivano agli utenti di ingrandire ed esaminare i pixel da vicino. Verso la metà degli anni '90, Microsoft Windows poteva passare da 72 a 96 pixel per pollice sullo schermo. Ciò ha reso più leggibili le dimensioni dei caratteri più piccoli perché erano disponibili più pixel per dimensione del punto.
Oggi, designer e clienti capiscono che le dimensioni degli oggetti sullo schermo non sono assolute. Le differenze nelle dimensioni dello schermo e nella funzionalità dello zoom sono comuni. Ma 72 è ancora il default.
Schermo PPI più alto significa migliore leggibilità a dimensioni più piccole
Le schermate con un PPI più elevato sono ideali per la leggibilità. Più pixel per pollice facilitano la lettura delle lettereforme. Significa anche che le immagini e il testo devono essere più grandi (in pixel) per essere leggibili.
L'esempio di testo sopra riportato è stato ridimensionato da due diverse impostazioni PPI dello schermo. La riga superiore ha pixel più piccoli (cioè un PPI più alto sullo schermo), quindi 8 punti è la dimensione più piccola del font leggibile. Il testo nella riga inferiore è appena leggibile sotto i 10 punti.
Poiché i monitor per PC hanno superato la densità dei pixel dei monitor Mac a metà degli anni '90, i siti Web realizzati su Windows hanno dimensioni di font più piccole, con grande disappunto degli utenti Mac. Oggi, gli schermi per entrambe le piattaforme godono di densità di pixel abbastanza elevate da rendere discutibili le differenze.
Immagini Web elastiche con browser moderni
Sappiamo ora che il DPI da solo non modifica le dimensioni di un'immagine sul Web e non abbiamo alcun controllo su quale dispositivo è visualizzata un'immagine. Quindi, le dimensioni in pixel di un'immagine sono l'unica cosa che conta? Sì per ora.
I layout a larghezza di fluido, che cambiano in base alle dimensioni del browser, possono adattarsi meglio a una gamma di dispositivi e monitor. I browser moderni, da FireFox 3, Safari 3 e Internet Explorer 7 e versioni successive, sono migliori delle versioni precedenti per ridimensionare le immagini al volo. Il max-width La proprietà CSS costringe le immagini a adattarsi al loro contenitore ma non crescono oltre la loro dimensione effettiva. Per esempio:
p { width: 25% } / * Un quarto dell'area del contenuto * / img { max-width: 100% }
p { width: 50% } / * Metà dell'area del contenuto * / img { max-width: 100% }
p { width: 75% } / * Tre quarti dell'area del contenuto * / img { max-width: 100% }
/ * Nessuna larghezza impostata per il paragrafo * / img { max-width: 100% }
Qui vediamo un'immagine di 800 pixel di larghezza inserirsi in quattro elementi di paragrafo di dimensioni diverse. Se la larghezza della pagina fosse flessibile, il ridimensionamento della finestra del browser espanderebbe l'immagine, ma non supererebbe le dimensioni originali di 800 x 323 pixel. Non sarebbe mai diventato distorto, o "pixellato", da una sovra-espansione.
Preparare le immagini per il web significa pianificare in pixel. Se qualcuno chiede un grafico da 2 pollici per il web, non per la stampa, chiedigli: "Quanto sono grandi i tuoi pixel?"
Scritto esclusivamente per WDD da Ben Gremillion . Ben è un web designer freelance che risolve problemi di comunicazione con un design migliore.
In quale media conta la risoluzione? Qual è il modo migliore per ridimensionare le immagini online? Condividi le tue idee qui sotto.