Quali formati di immagine popolari vengono utilizzati nel web design?

• Raster (Rasterizzati):
  • JPEG (.jpg, .jpeg): Ottimo per le fotografie, supporta la compressione con perdita. Non supporta la trasparenza.
  • PNG (.png): Supporta la trasparenza (canale alfa). PNG-8 per immagini semplici con palette, PNG-24 per immagini di qualità superiore con gamma completa di colori. Compressione senza perdita.
  • GIF (.gif): Supporta animazione e trasparenza. Limitato a 256 colori. Usato per animazioni semplici e icone.
  • WebP (.webp): Sviluppato da Google. Supporta compressione con e senza perdita, animazione e trasparenza. Di solito più piccolo in dimensione con qualità simile rispetto a JPEG e PNG.
• Vettoriale (Vettori):
  • SVG (.svg): Si scala senza perdita di qualità. Ideale per loghi, icone, grafici. Basato su XML.

Formato	Tipo	Trasparenza	Animazione	Compressione	Migliore applicazione
JPEG	Rasterizzato	No	No	Con perdita	Fotografie
PNG	Rasterizzato	Sì	No	Senza perdita	Immagini con trasparenza, grafica
GIF	Rasterizzato	Sì (semplice)	Sì	Senza perdita	Animazioni semplici, icone
WebP	Rasterizzato	Sì	Sì	Con perdita/Senza perdita	Uso universale
SVG	Vettoriale	Sì	Sì (CSS/JS)	Senza perdita	Loghi, icone, grafica

La scelta del formato dipende dal tipo di immagine, dai requisiti di qualità, dal supporto di trasparenza e animazione, nonché dalla dimensione del file necessaria. L'uso di <picture> o dell'attributo srcset nel tag <img> permette di offrire formati diversi (ad esempio, WebP e JPEG) a seconda del supporto del browser per ottimizzare le prestazioni.