I formati immagine spiegati: PNG, JPG, GIF, WebP, SVG

Scegliere il formato immagine giusto è uno dei modi più facili per rendere una pagina più veloce e nitida. Scegli male e ottieni un logo sfocato o una foto che pesa cinque volte il dovuto. Ecco in cosa è bravo ciascun formato comune, così puoi abbinare il formato all'immagine.

Le due famiglie

Prima, una distinzione che spiega tutto il resto. I formati raster (PNG, JPG, GIF, WebP) memorizzano una griglia di pixel, quindi sfocano o si pixelano se ingranditi. I formati vettoriali (SVG) memorizzano le forme come matematica, quindi restano nitidi come una lama a qualsiasi dimensione. Le foto sono sempre raster; logo e icone sono meglio come vettore.

I formati

JPG / JPEG

Compressione con perdita creata per le fotografie. Dimensione eccellente per contenuti fotografici, supportata ovunque, ma senza trasparenza e con artefatti visibili se compressa troppo. Lo standard per le foto quando WebP non è un'opzione.

PNG

Senza perdita, con trasparenza. Perfetto per logo, icone, screenshot e qualsiasi cosa con bordi netti, testo o colore piatto. Essendo senza perdita, le fotografie salvate come PNG risultano grandi.

GIF

Un vecchio formato limitato a 256 colori, oggi usato quasi esclusivamente per animazioni semplici. Per le immagini statiche è surclassato da PNG; per l'animazione, i formati moderni (WebP animato o video) sono più piccoli e di qualità superiore.

WebP

Un formato moderno che fa tutto: con o senza perdita, con trasparenza e animazione. Produce di norma file più piccoli del 25–35% rispetto a JPG o PNG a parità di qualità visiva, e ogni browser attuale lo supporta. Per la maggior parte delle immagini web di oggi, WebP è lo standard migliore.

SVG

Grafica vettoriale definita come XML. Ideale per logo, icone e illustrazioni — infinitamente scalabile, minuscola per forme semplici e personalizzabile con i CSS. Non adatta alle fotografie.

Guida rapida alla decisione

• Fotografia → WebP (o JPG per la massima compatibilità)
• Logo o icona → SVG (o PNG se ti serve una copia raster)
• Screenshot o grafica con testo → PNG (o WebP)
• Serve trasparenza → PNG, WebP o SVG
• Animazione semplice → WebP animato

Una volta scelto un formato, la nostra guida alla compressione delle immagini tratta la riduzione delle dimensioni. Converti tra formati con il convertitore SVG e il ridimensionatore di immagini, e riduci i file con il compressore di immagini — tutto nel tuo browser.