Scegli in base al compito dell’immagine
Inizia dall’asset, non dall’estensione. Una fotografia è contenuto a toni continui, quindi una perdita controllata può essere accettabile alla sua dimensione di visualizzazione. Uno screenshot, un grafico, un logo o un disegno a linee ha bordi nitidi e testo, dove gli artefatti sono evidenti. Conserva questi con output lossless o con un’approvazione attenta. Usa SVG per un logo vettoriale o diagramma quando è disponibile.
Poi identifica le capacità richieste. Alpha significa trasparenza per pixel. Animation è una sequenza di frame. La copertura browser richiesta, il volume di pubblicazione e il tempo di build sono vincoli di delivery che possono avere priorità rispetto a un formato più efficiente.
Testa prima AVIF lossy e WebP. Mantieni JPEG disponibile quando serve un fallback opaco ampiamente compatibile.
Conserva una sorgente lossless. Confronta PNG con WebP o AVIF lossless alla scala reale di visualizzazione prima di scegliere.
Usa AVIF, WebP o PNG; non scegliere JPEG perché non contiene un canale alpha.
Capisci cosa offre ciascun formato
AVIF memorizza immagini codificate AV1 in un formato basato su HEIF. La sua specifica include immagini fisse, sequenze di immagini e oggetti immagine con alpha. Supporta codifica lossy e lossless, trasparenza e animazione. I risparmi non sono fissi: contenuto sorgente, encoder, velocità, qualità target e metadata influenzano il risultato.
WebP supporta modalità lossy e lossless, trasparenza e animazione. JPEG è un formato di immagini fisse lossy con un supporto storico molto ampio, utile come fallback per foto opache. PNG è lossless con alpha, rendendolo un fallback solido per grafiche con fedeltà di pixel, anche se i PNG fotografici sono spesso inefficienti. Il PNG ordinario è statico; testa un formato separato per l’animazione quando serve movimento.
Da esplorare per immagini raster di alto valore dove la riduzione del trasferimento giustifica il lavoro di codifica e il percorso di fallback.
Utile come opzione raster moderna e general-purpose, include trasparenza e sequenze animate.
Usalo come fallback fotografico opaco, non per un logo trasparente o un ritaglio.
Usalo per fallback raster lossless e trasparente e per asset dove la fedeltà dei pixel è più importante dei byte minimi.
Costruisci un percorso di fallback invece di puntare su un solo formato
L’elemento picture permette al browser di valutare alternative. Metti AVIF per primo, poi WebP, quindi un img fallback in JPEG o PNG, con il corretto tipo MIME. Il browser salta una source non supportata e usa il fallback quando nessuna source è utilizzabile. Mantieni lo stesso testo alternativo significativo a meno che tu non cambi intenzionalmente il ritaglio.
Il fallback di formato non sostituisce il dimensionamento responsive. Fornisci candidati basati sulla larghezza e un valore sizes veritiero quando lo slot varia. Includi width e height così il browser può riservare spazio. Un file in formato ridotto con una dimensione di pixel sovradimensionata continua a sprecare byte.
AVIF prima, WebP seconda, poi JPEG per foto opache o PNG quando il fallback richiede trasparenza o bordi lossless.
Se un server seleziona i formati dalle capacità della richiesta anziché dal markup picture, configura correttamente la variazione della cache e testa che ogni client riceva una rappresentazione decodificabile.
Usa un client senza il decoder preferito o disabilita deliberatamente una source in staging; conferma che l’immagine, le dimensioni e il testo alternativo restino corretti.
Bilancia il tempo di codifica e proteggi la qualità visiva
La compressione moderna sposta il lavoro nella codifica. L’encoder di riferimento di AVIF offre una scala di velocità da 0, più lento, a 10, più veloce; anche WebP scambia lavoro di encoder con tempo, dimensione di output e qualità. Tratta una ricodifica di batch o una trasformazione on‑demand come una decisione operativa, non come un’impostazione gratuita.
Imposta una policy ripetibile per classe di asset e rivedi gli originali alle dimensioni di visualizzazione comuni. Ispeziona volti, gradienti, testi, bordi e confini trasparenti. Conserva il master e registra versione e impostazioni dell’encoder così un difetto può essere riprodotto e ripristinato.
Una codifica più veloce può ridurre la pressione sul build ma produrre un file più grande o una compressione meno efficiente; benchmarka il tuo set di sorgenti.
Un punteggio o un preset non può sostituire la revisione visiva delle regioni dell’immagine che portano significato ai visitatori.
Rendi i cambi di formato immagine una pratica di affidabilità proattiva
Per Status Is UP, l’ottimizzazione delle immagini è lavoro proattivo di uptime quando previene che un rilascio degradi una pagina critica. Fai l’inventario delle URL immagine critiche, esegui una conversione rappresentativa in staging e verifica content type, comportamento del CDN e invalidazione della cache prima di una migrazione site‑wide.
Distribuisci in batch reversibili. Confronta il rendering e il comportamento di trasferimento sul candidato al rilascio, poi mantieni la rappresentazione precedente finché il nuovo percorso non è provato. Se una trasformazione o una regola di cache fallisce, ripristina la sorgente nota‑buona. Questa è una direzione di delivery resiliente, non un mandato universale per AVIF o per più formati.
Prioritizza l’immagine principale e le immagini di contenuto che influenzano il first useful view, non ogni immagine d’archivio in una volta.
Mantieni nomi di asset deterministici o una mappatura versionata così il percorso precedente JPEG, PNG o WebP può essere ripristinato rapidamente.