Convertire ICO in WebP

Un ICO esiste per rispondere a una domanda che il sistema operativo pone: dammi questo marchio alla taglia di cui ho bisogno adesso. Risponde memorizzando più disegni in un file con una directory davanti. Un WebP non risponde a nessuna domanda del genere — è un’immagine, a una taglia, pensata per essere messa da un foglio di stile.

Quindi la conversione è un cambio di ruolo quanto di formato. Ciò che si ottiene è un asset immagine che si comporta come ogni altra immagine sulla pagina: si può dargli una larghezza, metterlo in un srcset, metterlo in cache con un nome fingerprintato. Ciò che si cede è la capacità del sistema operativo di scegliere una taglia al posto dell’utente, che su una pagina web non stava comunque facendo.

WebP porta un canale alpha completo a otto bit, quindi un marchio ritagliato, una piastrella arrotondata o un’ombra morbida arrivano intatti e si posano su qualunque sfondo la pagina abbia. Su un’icona di prova il pixel angolare del WebP risultante legge 0,0,0,0. Il file scritto è la forma estesa VP8X, che è ciò che fa spazio ai dati alpha accanto al colore.

Quella singola proprietà esclude JPEG del tutto per questo lavoro, e vale la pena dirlo perché i due formati sono altrimenti parenti stretti in come comprimono. Se l’icona non ha affatto pixel trasparenti — una piastrella quadrata con uno sfondo solido — l’argomento è molto più debole e andrebbe bene l’uno o l’altro.

L’impostazione di qualità parte da 82, che è un mezzo sensato per una fotografia e un po’ basso per un’opera fatta di riempimenti piatti e bordi netti. La compressione lossy funziona scartando dettaglio che l’occhio probabilmente non noterà, e su una fotografia quel dettaglio è la trama. Su un’icona è il bordo di un carattere.

A 256 pixel l’intero file è pochi kilobyte, quindi non c’è quasi nulla da difendere tenendo la qualità bassa. La si spinga verso 95 o più e i contorni restano nitidi per un costo misurato in kilobyte a cifra singola.

Il caso abituale a favore di WebP è che produce circa un quarto o un terzo di byte in meno rispetto all’alternativa a qualità equivalente. Quel caso è costruito sulle fotografie, e non si trasferisce a piccola opera piatta, dove la combinazione di filtraggio e compressione run-length di PNG è estremamente difficile da battere.

Misurato sulla stessa icona di prova da 256 pixel: 3.054 byte come WebP contro 1.737 byte come PNG — il WebP è circa tre quarti più grande ed è lossy. Se la ragione di questa conversione era risparmiare banda, non ci riuscirà. Se la ragione è che la pipeline di build emette WebP e l’icona deve corrispondere, è una buona ragione e i pochi kilobyte non contano.

Il browser decodifica l’icona e restituisce la sua voce più grande, che è ciò che viene codificato. Questo è stato verificato costruendo un file con disegni da 16, 32, 48 e 256 pixel in quattro colori distinti e convertendolo con la directory in tre ordini diversi — il disegno da 256 pixel è uscito ogni volta.

Il tetto è 256 pixel e appartiene al formato ICO: una voce memorizza la sua larghezza in un singolo byte, con lo zero al posto di 256. WebP stesso arriva a 16.383 pixel, quindi nulla sul lato destinazione sta limitando. Se serve un’immagine più grande, il file icona non è dove vive.

La delusione più comune con questa conversione è un marchio che sta bene come scheda del browser e sfocato in uno slot di intestazione da 200 pixel. Non è l’encoder; è che l’icona è stata disegnata per le schede. Le voci piccole in un’icona buona sono spesso ridisegnate invece che scalate — tratti allineati a pixel interi, dettaglio rimosso — quindi ingrandirne una dà un disegno semplificato a bassa risoluzione, e la colpa ricade sul convertitore invece che sull’origine.

Si controllino le dimensioni in pixel del risultato prima di metterlo in pagina. Se è 32 pixel, le opzioni oneste sono mostrarlo a 32 o andare a cercare l’opera originale; l’impostazione di larghezza massima qui può solo rimpicciolire, e nessun convertitore può aggiungere dettaglio che non è mai stato memorizzato.

La coerenza è un beneficio ingegneristico reale anche quando il conteggio dei byte non lo è. Un sito che serve un formato per ogni asset raster ha una politica di cache, uno step di build, un set di regole di negoziazione del contenuto e una cosa da testare. Aggiungere un’eccezione PNG per sei icone costa più in complessità di quanto risparmi in kilobyte.

L’altro caso genuino è un set di icone ampio. Sessanta piastrelle di integrazione a tre kilobyte ciascuna sono 180 kilobyte, e se caricano insieme la differenza contro l’equivalente PNG è misurabile — ma si noti che in quel confronto PNG è avanti, quindi il motivo per standardizzare è la pipeline, non l’aritmetica.

Convertire non significa cancellare. I browser continuano a richiedere /favicon.ico dalla radice di ogni sito qualunque cosa dichiari l’HTML, quindi si conservi l’originale dov’è e si tratti il WebP come un asset separato con un lavoro diverso. Non sono due versioni di un file; sono due file che mostrano lo stesso marchio, e la rimozione dell’originale sarebbe un errore che solo il test su un browser reale rivelerebbe.

Nel markup, il WebP va in un elemento img o picture come qualsiasi altra immagine, e l’icona resta in un elemento link nell’head. Mescolare i due — puntare un link favicon a un WebP — funziona nei browser attuali e fallisce in abbastanza tooling da non valere il risparmio, e il risparmio è già negativo su un’icona di piccole dimensioni.

Si lasci cadere l’intera cartella e ogni file è decodificato e codificato per conto suo, con i risultati restituiti come ZIP. L’impostazione di qualità si applica a tutti, che è ciò che si vuole per una griglia di piastrelle dove una singola voce più morbida sarebbe più notevole di qualsiasi di esse leggermente imperfetta, e l’uniformità visiva è un argomento a favore di un batch che il semplice conteggio dei byte non cattura.

Le dimensioni non saranno uniformi a meno che il set sorgente non lo fosse. Collezioni di icone assemblate nel corso di anni mescolano file che portano una voce da 256 pixel con file che si fermano a 32, e i WebP ereditano quella diffusione senza preavviso — vale la pena controllare nello ZIP prima di cablarli in un layout che presume una taglia, perché un singolo marchio da 32 pixel in una griglia di immagini da 200 pixel si vede subito come appartenente a un’altra epoca e toglie l’uniformità che la standardizzazione del formato avrebbe dovuto dare.