Esempi comuni di tipi di immagini sul web includono GIF, JPG, e PNG. File SVG. Questi diversi formati offrono ai web designer varie opzioni per ottimizzare l'aspetto visivo di un sito web.
Immagini GIF
Usa i file GIF per le immagini che hanno un numero fisso di colori ridotto. I file GIF sono sempre ridotti a non più di 256 colori unici. L'algoritmo di compressione per i file GIF è meno complesso rispetto ai file JPG, ma se utilizzato su immagini e testo a colori piatti, produce molto file di piccole dimensioni.
Il formato GIF non è adatto per immagini fotografiche o immagini con colori sfumati. Poiché il formato GIF ha un numero limitato di colori, gradienti e fotografie finiranno con bande e pixel quando vengono salvati come file GIF.
Immagini JPG
Usa immagini JPG per fotografie e altre immagini con milioni di colori. Utilizza un complesso algoritmo di compressione che consente di creare grafici più piccoli perdendo parte della qualità dell'immagine. Questa è chiamata compressione "con perdita" perché alcune informazioni sull'immagine vengono perse quando l'immagine viene compressa.
Il formato JPG non è adatto a immagini con testo, grandi blocchi di colore solido e forme semplici con bordi nitidi. Questo perché quando l'immagine viene compressa, il testo, il colore o le linee possono risultare sfocati, risultando in un'immagine non così nitida come verrebbe salvata in un altro formato.
Immagini PNG
Il formato PNG è stato sviluppato in sostituzione del formato GIF quando sembrava che le immagini GIF sarebbero state soggette a una commissione di royalty. La grafica PNG ha un tasso di compressione migliore rispetto alle immagini GIF, che si traduce in immagini più piccole rispetto allo stesso file salvato come GIF. I file PNG offrono trasparenza alfa, il che significa che puoi avere aree delle tue immagini completamente trasparenti o persino utilizzare una gamma di trasparenza alfa. Ad esempio, un'ombra esterna utilizza una gamma di effetti di trasparenza e sarebbe adatta per un PNG (o potresti semplicemente terminarci usando le ombre CSS).
Le immagini PNG, come le GIF, non sono adatte alle fotografie. È possibile aggirare il problema del banding che interessa le fotografie salvate come file GIF utilizzando i colori reali, ma ciò può comportare immagini molto grandi. Anche le immagini PNG non sono ben supportate dai cellulari e dai feature phone meno recenti.
Immagini SVG
SVG sta per Grafica vettoriale scalabile. A differenza dei formati basati su raster presenti in JPG, GIF e PNG, questi file utilizzano vettori per creare file molto piccoli che possono essere visualizzati in qualsiasi dimensione senza perdita di qualità o aumento delle dimensioni del file. Sono creati per illustrazioni come icone e persino loghi.
Preparazione delle immagini per la consegna sul Web
Indipendentemente dal formato di immagine che utilizzi, assicurati che tutte le immagini su quel sito siano preparato per la consegna web. Immagini troppo grandi possono rallentare l'esecuzione di un sito e influire sulle prestazioni complessive. Per combattere questo, quelle immagini devono essere ottimizzate per trovare l'equilibrio tra l'alta qualità e la dimensione file più bassa possibile a quel livello di qualità.
La scelta del formato delle immagini giusto fa parte della battaglia, ma anche assicurarsi di aver preparato quei file è il passo successivo in questo importante processo di distribuzione web.