Convertire GIF in WebP

Detto chiaramente e per primo, perché è l’unica cosa che altrimenti verrebbe scoperta dopo il download. Questa conversione produce un’immagine fissa dal primo frame. Tutto ciò che viene dopo è scartato.

Per una GIF in movimento il bersaglio adatto è il video. Convertire una GIF in MP4 mantiene ogni frame, si riproduce su ogni dispositivo, e di solito esce a una frazione della dimensione: un codec video descrive cosa è cambiato tra i frame, dove la GIF memorizza ciascuno quasi da zero. Una GIF da tre megabyte diventa abitualmente un MP4 da duecento kilobyte che sembra migliore. Se si è arrivati qui con un’animazione, andare lì invece.

Nessuno sceglie GIF per un’immagine statica oggi, eppure i siti ne sono pieni: spacer e bullet da un tema vecchio di dieci anni, diagrammi esportati da software che non offriva nient’altro, screenshot di un’epoca in cui la GIF era la scelta sicura, loghi che sono stati copiati da un restyling all’altro dal 2009.

Sono le immagini che un audit di performance trova e su cui nessuno ha mai guardato. Convertirle è poco controverso proprio perché nulla in esse è voluto: il formato era un incidente del momento in cui il file è stato fatto.

GIF comprime con LZW, uno schema generalista degli anni ottanta che non sa nulla di immagini. WebP è stato progettato specificamente per le immagini, ventitré anni dopo, e applica tecniche prese in prestito dalla compressione video a un singolo frame.

Su una GIF fissa dettagliata il risultato è drammatico — metà della dimensione o meno è normale, e una fotografia che è stata erroneamente salvata come GIF può perdere molto di più. L’eccezione è la grafica molto piccola e piatta: un bullet a due colori è già vicino al pavimento, e non c’è nulla che un codec migliore possa portare via.

Questo è il miglioramento di qualità che le persone notano. La trasparenza GIF è un singolo bit: ogni pixel è completamente trasparente o completamente opaco, senza nulla in mezzo. Ecco perché un logo GIF ritagliato ha bordi a scalinata e un alone tenue del colore su cui era progettato.

WebP porta un canale alfa vero con 256 livelli, quindi i bordi possono sfumare correttamente e un marchio può stare su qualsiasi sfondo. La conversione non può inventare morbidezza che la GIF non ha mai avuto, ma rimuove il soffitto — e se a un certo punto si ri-esporta l’artwork dall’originale, il WebP sarà pronto a contenerlo.

Una GIF contiene al massimo 256 colori, scelti quando è stata creata. WebP ne contiene milioni, quindi ognuno di essi ci sta con margine e la conversione non ha nulla da scartare.

Quel che non può fare è annullare la riduzione originale. Se una fotografia è stata appiattita a 256 colori nel 2011, il banding nel cielo ora è parte dell’immagine e il WebP lo riprodurrà fedelmente. Convertire cambia contenitore e compressione, non la storia del file.

Per qualunque cosa servita su una pagina web, WebP: più piccolo, migliore trasparenza, e supportato da ogni browser attuale incluso Safari.

PNG quando il file esce dal browser. Allegati email, file passati a un cliente, immagini che vanno in altro software o in un archivio: PNG è quello che tutti aprono. Entrambi sono abbastanza lossless per questo tipo di immagine che la scelta riguarda il destinatario anziché la qualità.

Le vecchie GIF arrivano in massa o non arrivano affatto. Lasciare cadere l’intera cartella: ognuna viene convertita a turno sulla propria macchina con il proprio progresso, mantiene il proprio nome con l’estensione scambiata, e tutto torna come un singolo ZIP.

Conservare gli originali da qualche parte finché il sito non ha passato un giro di test. I siti di quella data occasionalmente referenziano una GIF da qualche parte di cui nessuno si ricorda — un template email, un foglio di stile, un file di tema in cache — e l’immagine mancante non sarà ovvia finché qualcuno non guarda la pagina giusta.

La conversione gira nella scheda del browser sul processore locale. Nulla viene caricato, quindi non c’è coda e nessun conteggio giornaliero, e il tetto è 100 MB per file del livello gratuito — il che rende pratica l’idea di lasciar cadere un centinaio di immagini d’eredità tutte insieme anziché passare un pomeriggio ad aspettare.

Guardare la scheda di rete mentre un batch gira è il modo onesto per confermarlo: nessuna richiesta che porti un file lascia la macchina.

Il passaggio meccanico è un cambio di attributo src sull'elemento img, e la maggior parte dei CMS e dei framework di templating lo accetta senza toccare il resto. Il browser continuerà a richiedere l'immagine allo stesso percorso, e il file con estensione .webp arriverà dalla stessa origine.

Vale la pena tenere d'occhio il rapporto d'aspetto e le dimensioni dichiarate. Un'immagine GIF ereditata spesso non aveva width e height espliciti nel markup perché il browser la dimensionava da solo, e un file WebP della stessa identica area di pixel viene comunque renderizzato alle stesse dimensioni. Se l'eredità include un'immagine in un contenitore a dimensione fissa, verificare una volta che la sostituzione non cambi la disposizione, perché la diversa compressione può alterare i confini della regione trasparente a cui gli elementi circostanti si appoggiavano.

Safari ha accettato WebP a partire dalla versione 14, rilasciata nel settembre 2020; ogni browser rilasciato da allora lo gestisce in modo nativo, su desktop come su mobile. Il capitolo in cui WebP era un formato per browser moderni e PNG era la scelta sicura è chiuso da anni, e i siti che ancora servono GIF per compatibilità lo fanno per inerzia piuttostoosto che per un vincolo reale. Per un'icona o uno spacer di un tema vecchio non c'è più alcun visitatore a cui si sta danneggiando l'esperienza servendo WebP, e l'unica ragione per mantenere la GIF è se qualcosa nella pipeline a valle — un importatore di archivio, un'integrazione con un vecchio sistema di gestione asset — si aspetta ancora quel formato.

Sostituire un gran numero di immagini in un sito in produzione significa nuove entry nella cache, e il browser di un visitatore che ha già aperto la pagina con la vecchia GIF dovrà ri-scaricare l'asset per la nuova versione. L'header Cache-Control va regolato di conseguenza: un tempo di cache breve durante la transizione, o una versione nel nome del file (`logo.v2.webp`) per forzare l'invalidamento, evita di servire un mix confuso di vecchio e nuovo nelle ore successive al cambio. Una CDN ben configurata gestirà la transizione in modo trasparente, ma se il sito usa un'origine singola senza caching intermedio può valere la pena pre-pubblicare i nuovi asset e aggiornare i riferimenti in un'unica operazione.