Tutorial

Da HEIC a WebP: il formato moderno per gli sviluppatori web

koboshiCo-founder
·5 min di lettura
Riepilogo

WebP offre una compressione moderna senza il bagaglio di compatibilità di HEIC, e quasi tutti i browser lo supportano da anni. Questa guida mostra come convertire i file HEIC in WebP per il web, com'è il confronto delle dimensioni e come integrarlo in una pipeline.

Un utente carica una foto scattata con un iPhone. Il file è HEIC, circa 1.8 MB. Il tuo tag <img> non può fare affidamento su di esso: HEIC non ha supporto nativo in Chrome, Firefox o Edge. Quindi l'immagine diventa una JPG da 3.4 MB oppure una WebP intorno a 1.2 MB senza differenze visibili. È questo divario il motivo per cui WebP è la risposta per le foto che arrivano in HEIC.

Questa guida copre la conversione da HEIC a WebP, com'è il confronto delle dimensioni tra i formati e le opzioni che vanno da uno strumento nel browser a un comando di shell che puoi inserire in una build.

Perché WebP e non HEIC

HEIC è eccellente per memorizzare foto, circa la metà della dimensione di JPEG a parità di qualità. È però inutile sul web come formato di distribuzione. Chrome, Firefox, Edge e Safari supportano WebP da anni, mentre il supporto a HEIC esiste solo in Safari e in qualche ambiente specifico del produttore. Non puoi dipendere da HEIC per le immagini caricate dagli utenti, ed è esattamente il motivo per cui esistono le pipeline di conversione.

WebP copre lo stesso terreno di HEIC: è un formato con perdita basato sulla compressione moderna, con una modalità senza perdita e la trasparenza alpha. Per una foto, la differenza pratica tra WebP e JPG alla stessa qualità visiva è un file più piccolo di circa il 25-35 percento. È un risparmio significativo su una pagina piena di immagini.

Il confronto delle dimensioni

Stessa foto da 12 MP, stessa qualità visiva:

FormatoDimensioneBrowserNote
HEIC~1.8 MBsolo Safariformato sorgente degli iPhone
JPG~3.4 MBtuttiriferimento
WebP~1.2 MBtutticon perdita, con supporto alpha
PNG~24 MBtuttisenza perdita, non per le foto

La guida ai formati immagine per il web ha il confronto completo se ti serve il quadro di dove si colloca WebP rispetto a JPG e PNG.

Opzione 1: converti in un browser

Il percorso più semplice è uno strumento che gira interamente sul dispositivo. Il convertitore da HEIC a WebP decodifica HEIC in locale con WebAssembly e scrive file WebP, quindi le foto non lasciano mai la macchina. Puoi impostare la qualità, convertire un'intera cartella e scaricare i risultati come ZIP. Funziona per conversioni occasionali e per un designer o un editor che non si trova a suo agio con la riga di comando.

Opzione 2: converti da riga di comando

Per una pipeline, lo stack classico è libheif più libwebp. Su macOS con Homebrew:

brew install libheif webp

Poi converti con heif-convert e cwebp:

heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp

Oppure salta il file intermedio con ffmpeg:

ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp

Entrambi i comandi rispettano un argomento di qualità, e cwebp ha la più ampia gamma di controlli, inclusa la modalità senza perdita e -m 6 per l'output più lento e più piccolo. Per una cartella, esegui un ciclo:

for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done

È sufficiente per integrarlo in uno script di shell o in un job CI che elabora i caricamenti lato server.

Scegliere qualità e formato in WebP

Due decisioni influenzano l'output più di ogni altra cosa:

  • Con perdita vs senza perdita. cwebp -lossless o -q 100 con il flag lossless conserva ogni pixel ma produce file più grandi. Usalo per screenshot, loghi e tutto ciò che ha colore piatto e testo. Usa la modalità con perdita per le foto.
  • Il numero di qualità. -q 82 è un default ragionevole per le foto: visivamente pulito e molto più piccolo di JPG. Per obiettivi di alta qualità, -q 90 costa più byte ma è più vicino alla sorgente. È lo stesso compromesso delle impostazioni di qualità di JPG, che convertire HEIC in JPG senza perdere qualità spiega in dettaglio.

WebP gestisce anche l'alpha, quindi un'immagine HEIC con un canale di trasparenza sopravvive al passaggio, cosa che JPG lascerebbe perdere.

Una nota sui formati più recenti

AVIF, il successore basato su AV1, generalmente batte WebP sulla dimensione, e ora è supportato in tutti i browser principali. Se stai costruendo una pipeline nuova e puoi scegliere il tuo decoder, vale la pena testare AVIF contro WebP per le tue immagini specifiche. Il compromesso è la velocità dell'encoder e la maturità degli strumenti, ed è per questo che WebP resta il default sicuro per la maggior parte dei team. La guida ai formati immagine per il web approfondisce dove si colloca ogni formato.

In breve

Converti HEIC in WebP per qualsiasi cosa finirà su un sito web. È supportato ovunque, più piccolo dell'alternativa JPG a parità di qualità, e convertibile con uno strumento nel browser o con una pipeline di shell di due comandi. Tieni l'HEIC originale come fonte di verità, converti al momento del caricamento o in un job batch, e lascia che sia il formato a fare i calcoli sul tempo di caricamento per te.

Altri post del blog da leggere