Convertire AVIF in ICO

Nessuno disegna un logo in AVIF. Il file è arrivato perché qualcosa lo ha convertito: uno step di build che gira su ogni immagine in una directory di asset, un CMS che ricodifica i caricamenti, una CDN che negozia il formato per richiesta, o un clic destro su un sito live perché i file di design sono di tre agenzie fa.

Importa perché si sta lavorando da un derivato. Qualunque cosa abbia fatto la pipeline — un ridimensionamento alla dimensione più grande di cui la pagina aveva bisogno, un passaggio lossy alla qualità specificata nella configurazione, un appiattimento su uno sfondo — è cotta dentro, e questa conversione parte da quello invece che dall’opera. È un posto legittimo da cui partire, e vale dieci minuti prima per verificare se l’originale è davvero perso: un repository di sorgenti, una cartella del marchio, una vecchia email del designer, o la directory di asset che lo step di build legge, che spesso contiene ancora la cosa che la pipeline ha convertito.

I due formati stanno alle estremità opposte della questione di scala. AVIF può contenere un’immagine di 65.536 pixel per lato; un ICO si ferma a 256, e 256 è scritto nell’intestazione come uno zero perché il campo dimensione è un singolo byte e il numero reale non ci sta.

Quindi la perdita decisiva in questa conversione non è la compressione — non c’è un’impostazione di qualità su un target ICO, perché ogni immagine dentro il contenitore è un PNG senza perdita e un cursore non avrebbe nulla su cui agire. È la riduzione di scala, e tra i due tetti può essere un fattore 256. Tutto ciò che la pipeline ha conservato sopra i 256 pixel viene scartato qui, e non c’è impostazione che lo mantenga, perché il contenitore non ha spazio per questo. L’implicazione pratica è che una sorgente molto grande non vi compra nulla oltre un downscale pulito: qualsiasi cosa oltre circa 512 pixel viene comunque buttata, e le qualità che decidono se l’icona funziona sono tutte decise molto sotto.

Un ICO è un contenitore progettato per portare un set: lo stesso marchio a 16, 32, 48 e 256 pixel, con il sistema che sceglie quello di cui ha bisogno invece di scalare uno al volo. Ciò che questa conversione scrive è quel set. Il controllo «Icon sizes» lo sceglie, il default è 16, 32 e 48, e ogni entry è un PNG separato fatto alla sua dimensione.

Ciò rimuove la metà più grande del problema — un browser che disegna una linguetta a 16 pixel non riduce più un’immagine a 256 pixel con un filtro generico — e lascia la metà più piccola. Le entry sono ricampionate dalla grafica, non ridisegnate per la loro dimensione, quindi un tratto di un pixel ridotto da 256 a 16 è ancora una sbavatura grigia e l’unico rimedio è disegnarne uno più spesso a quella dimensione. È un lavoro per un editor di icone come IcoFX o GIMP, ed è ora una sola sostituzione in un file che ha già la struttura giusta invece di una ricostruzione dal nulla.

L’immagine non viene ritagliata. Ogni entry scritta qui è quadrata, e una sorgente oblunga viene centrata sul quadrato alla scala più grande che ci sta con trasparenza attorno — nulla è stirato, che è il default giusto, ma il marchio finisce per occupare una fascia al centro di un’icona i cui vicini riempiono la loro fino al bordo. A 16 pixel un logo tre volte più largo che alto si prende cinque pixel di altezza.

Quindi si aggiusta l’inquadratura in qualsiasi cosa apra il file — GIMP, Squoosh e ImageMagick leggono tutti l’AVIF — ritagliando al simbolo invece di riempire un lock-up già largo. Ciò che si vuole che il convertitore riceva è un marchio circa quadrato che riempie la sua cornice, perché tutto ciò che fa dopo rende solo l’immagine più piccola. Un po’ di padding su tutti e quattro i lati vale la pena mantenerlo comunque, perché un’icona disegnata dura fino al bordo appare più grande e pesante dei suoi vicini in una fila di linguette.

AVIF memorizza fino a dodici bit per canale con una gamma di colori ampia. Un ICO contiene otto bit per canale, quindi quel margine se ne va.

Questo è l’unico posto nel pacchetto AVIF in cui la riduzione genuinamente non importa. Un’icona a 32 pixel è 1.024 pixel in totale, che sono meno di una singola riga di una fotografia modesta, e una favicon viene disegnata alla mercé della gestione del colore che il browser applica attorno. Se la vostra icona dipende dalla sottigliezza del colore fallirà per ragioni che non hanno nulla a che fare con la profondità di bit — la forma porta un’icona e la palette la decora, e a queste dimensioni quell’ordine è assoluto.

Il canale alpha attraversa intatto, e porta più del risultato visivo di qualsiasi altra cosa qui. Una linguetta del browser è una striscia chiara in un tema e scura nell’altro, e un’icona con vera trasparenza appare giusta in entrambi; una con un quadrato bianco cotto dentro appare come un errore in uno di loro.

Se l’AVIF è stato appiattito a monte — le pipeline lo fanno quando emettono anche un fallback JPEG e trattano ogni immagine allo stesso modo — la trasparenza è già andata e questa conversione non può riportarla. Si controllino gli angoli della sorgente prima di convertire aprendola su uno sfondo scuro, perché una scatola bianca è molto più facile da sistemare in fase di opera che dopo che è stata spedita e messa in cache ovunque.

AVIF è un formato di consegna web e ciò che il web consegna prevalentemente sono fotografie, quindi il file medio che atterra su questa pagina è il materiale sbagliato per un’icona di un margine ampio. A 16 pixel una fotografia è una sbavatura; a 32 è una sbavatura leggermente più grande.

Ciò che sopravvive a quella dimensione è una forma, contrasto elevato, due o tre colori: l’iniziale invece del wordmark, il simbolo invece del lock-up completo. A 16 pixel un carattere è alto circa dieci pixel, che è abbastanza per un carattere e non abbastanza per una parola, e qualsiasi tratto più sottile degli altri scompare del tutto. Il test non costa nulla — si rimpicciolisca l’AVIF a 16 pixel in qualsiasi visualizzatore e lo si guardi a distanza normale. Se è irriconoscibile lì, il problema è l’opera e nessun contenitore lo risolverà.

Se il vettore esiste ancora, si usi quello. Entrambe le pagine scrivono le stesse dimensioni nello stesso contenitore, quindi la differenza è interamente in ciò da cui le dimensioni sono fatte: un SVG viene renderizzato qui, una volta, a piena risoluzione di icona, mentre un AVIF arriva portando con sé qualunque cosa la pipeline gli abbia fatto.

Il divario è visibile alle piccole dimensioni e non è sottile. Un vettore renderizzato in modo pulito e poi ridotto a 16 mantiene un bordo duro; un AVIF con perdita che è stato esso stesso ridimensionato da una CDN ha bordi morbidi e risonanti prima che questa conversione inizi, e ridurlo ulteriormente li spalma su due righe di pixel e dimezza il contrasto. La strada AVIF è la risposta quando il vettore è genuinamente non disponibile, e vale una ricerca nel repository prima di accettare che lo sia — una sorgente di favicon SVG siede spesso nella stessa directory che la pipeline ha letto.

Si mette alla radice del sito come favicon.ico. I browser hanno richiesto quel percorso per quasi trent’anni indipendentemente da ciò che l’HTML dichiara, quindi un file lì ferma un fiume di 404 nel log di accesso e copre i feed reader, le anteprime dei link e gli strumenti più vecchi che non guardano altrove. Costa pochi kilobyte ed è l’unica collocazione della favicon che non richiede alcun markup.

Non si lasci che la pipeline che ha prodotto l’AVIF si avvicini a quel file. La negoziazione del contenuto che scambia le immagini in AVIF è esattamente giusta per il contenuto della pagina e sbagliata per l’icona, perché la richiesta di /favicon.ico è spesso fatta da qualcosa che non è un browser moderno. Si serva l’ICO come ICO, e si dichiari un PNG o uno SVG accanto per i browser che li accettano.

Si caricano fino a 100 file AVIF alla volta e ognuno diventa la propria ICO, restituiti insieme come ZIP. Si adatta alla situazione per cui questa pagina è scritta, in cui uno step di build ha già convertito un’intera directory di icone e l’intero set deve tornare.

Tutto gira nel browser, quindi non c’è caricamento, e il tetto di 100 MB per file del livello gratuito non è mai il vincolo — le icone sono abbastanza piccole che né il tetto né la macchina sono ciò che vi ferma. Il vincolo è se ognuna si legge a 16 pixel, e quella è una domanda sull’opera, non sulla velocità. Un batch è anche il momento di essere onesti su quante icone servono a un progetto: la maggior parte dei siti vuole un marchio fatto bene invece di una dozzina di varianti, e una cartella di quaranta è di solito un segnale che la directory di asset viene convertita invece dell’icona.