Esistono numerosi formati di immagine che possono essere utilizzati sulle pagine Web. Alcuni esempi comuni sono GIF, JPG e PNG. I file SVG sono anche comunemente usati sui siti web di oggi, offrendo ai web designer un'altra opzione per le immagini online.
Immagini GIF
Usa i file GIF per immagini con un numero limitato di colori fisso. 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 quando viene utilizzato su immagini e testo a colori, produce file di dimensioni molto ridotte.
Il formato GIF non è adatto per immagini fotografiche o immagini con colori sfumati. Poiché il formato GIF ha un numero limitato di colori, sfumature e fotografie finiranno con il banding e la pixelizzazione se salvati come file GIF.
In breve, useresti le GIF solo per immagini semplici con pochi colori, ma potresti anche usare PNG per questo (ne parlerò tra poco).
Immagini JPG
Usa le immagini JPG per fotografie e altre immagini che hanno milioni di colori. Usa un complesso algoritmo di compressione che ti consente di creare grafici più piccoli perdendo parte della qualità dell'immagine. Si parla di compressione "lossy" perché alcune delle informazioni dell'immagine vengono perse quando l'immagine viene compressa.
Il formato JPG non è adatto alle immagini con testo, grandi blocchi di colore pieno e forme semplici con bordi nitidi. Questo perché quando l'immagine viene compressa, il testo, il colore o le linee potrebbero sfocarsi risultando in un'immagine non nitida come sarebbe stata salvata in un altro formato.
Le immagini JPG vengono utilizzate al meglio per fotografie e immagini che hanno molti e molti colori naturali.
Immagini PNG
Il formato PNG è stato sviluppato in sostituzione del formato GIF quando sembrava che le immagini GIF sarebbero soggette a una quota di royalty. La grafica PNG ha un tasso di compressione migliore rispetto alle immagini GIF, che risultano in immagini più piccole rispetto allo stesso file salvato come GIF. I file PNG offrono trasparenza alfa, il che significa che è possibile avere aree delle immagini completamente trasparenti o addirittura utilizzare un intervallo di trasparenza alfa. Ad esempio, un'ombra discendente utilizza una gamma di effetti di trasparenza e sarebbe adatta per un PNG (oppure potresti semplicemente terminare usando invece le ombre CSS).
Le immagini PNG, come le GIF, non sono adatte alle fotografie. È possibile aggirare il problema della fascettatura che riguarda le fotografie salvate come file GIF usando colori reali, ma ciò può causare immagini molto grandi. Anche le immagini PNG non sono ben supportate da telefoni cellulari e feature phone meno recenti.
Usiamo PNG per qualsiasi file che richiede trasparenza. Usiamo anche PNG-8 per qualsiasi file che sia adatto come GIF, usando invece questo formato PNG.
Immagini SVG
SVG è l'acronimo di Scalable Vector Graphic. A differenza dei formati basati su raster trovati in JPG, GIF e PNG, questi file utilizzano i vettori per creare file molto piccoli che possono essere renderizzati a qualsiasi dimensione senza perdita di qualità di aumento delle dimensioni del file. Sono creati per illustrazioni come icone e persino loghi.
Preparazione delle immagini per la consegna Web
Indipendentemente dal formato di immagine che utilizzi e il tuo sito web è sicuro di utilizzare diversi formati in tutte le sue pagine, devi assicurarti che tutte le immagini su quel sito siano pronte per la pubblicazione sul Web. Immagini troppo grandi possono far rallentare un sito e influire sulle prestazioni generali. Per combattere questo, è necessario ottimizzare tali immagini per trovare l'equilibrio tra l'alta qualità e la dimensione file più bassa possibile a quel livello di qualità.
La scelta del giusto formato di immagini è parte della battaglia, ma anche assicurarti di aver preparato quei file è il prossimo passo in questo importante processo di consegna web.
Articolo originale di Jennifer Kyrnin. A cura di Jeremy Girard.
