Il formato AVIF (AV1 Image File Format) è un tipo di immagine moderno, aperto e senza royalty, sviluppato dall’Alliance for Open Media. Utilizza la compressione AV1 all’interno del contenitore HEIF, lo stesso usato da HEIC.

Perché il formato AVIF è considerato innovativo?

• Compressione molto efficiente: può ridurre le dimensioni del file fino al 30% in meno rispetto a JPEG e WebP, mantenendo alta qualità visiva.
• Supporto HDR e Wide Color Gamut: ideale per immagini ad alta gamma dinamica e colori più ricchi.
• Ottimo per il web: migliora la velocità di caricamento e aiuta nei punteggi Core Web Vitals, quindi anche nella SEO.
• Formato aperto e moderno: supportato da grandi aziende come Google, Microsoft, Netflix, Mozilla.

Come convertire immagini in AVIF

1. Conversione online (senza installare software)

Puoi usare diversi strumenti gratuiti che funzionano direttamente dal browser:

• aimuo: supporta JPG, PNG, WebP e AVIF come input; conversione immediata; download con un clic.
• freeconvert: supporta oltre 500 formati; puoi caricare file anche da Google Drive, Dropbox o URL; dimensione massima gratuita: 1 GB.
• convertio: conversione da e verso AVIF; supporta immagini SDR, HDR e WCG; file fino a 100 MB senza registrazione.
• omnifile: conversione istantanea nel browser; nessun upload ai server (tutto locale); gratuito e senza limiti
• grafigata: converte JPEG, PNG, WEBP, SVG, BMP, GIF; riduzione del peso fino al 50% rispetto a JPEG

2. Conversione tramite software (offline)

Se preferisci farlo sul tuo computer con sistema operativo Windows / Mac:

• GIMP (con plugin AVIF integrato nelle versioni recenti)
• IrfanView (con plugin aggiuntivo)
• XnConvert (gratuito, supporta AVIF)

Se ti piace lavorare da terminale, la suite ImageMagick si presenta come uno strumento molto potente per convertire, modificare e creare immagini da riga di comando.

Secondo la documentazione ufficiale, il comando magick permette di:

• convertire immagini tra formati diversi
• ridimensionare, ritagliare, sfocare, ruotare
• applicare effetti
• combinare più immagini
• creare GIF, PDF e molto altro

ImageMagick è particolarmente utile quando devi automatizzare operazioni ripetitive o elaborare molte immagini in batch.

Procedura per installare imagemagick su Windows

1. Vai su: https://imagemagick.org/script/download.php
2. Scarica la versione Q16-HDRI o Q8 con supporto HEIC.
3. Durante l’installazione, assicurati che sia attiva l’opzione: “Install HEIC/HEIF delegate”
4. Per verificare l’installazione, apri il Prompt dei comandi e digita:

magick identify -list format | findstr AVIF

Se AVIF compare con rw-, sei a posto.

Procedura per installare imagemagick su Linux Ubuntu

• Apri il Terminal e digita i seguenti comandi

sudo apt update
sudo apt install imagemagick libheif1 libheif-dev libavif-dev

• Per verificare l’installazione:

magick identify -list format | grep AVIF

Se vedi una riga con rw- significa che AVIF è supportato in lettura e scrittura.

Nota: su Ubuntu il comando principale può essere convert oppure magick a seconda della versione.

Art direction + formati moderni (AVIF/WebP/JPEG)

Di seguito un esempio di art direction con AVIF + WebP + JPEG.

<picture>
  <!-- Versione MOBILE (max-width: 700px) -->
  <!-- AVIF -->
  <source
    media="(max-width: 700px)"
    type="image/avif"
    srcset="
      immagini/mobile-400.avif 400w,
      immagini/mobile-800.avif 800w
    "
    sizes="100vw">

  <!-- WebP -->
  <source
    media="(max-width: 700px)"
    type="image/webp"
    srcset="
      immagini/mobile-400.webp 400w,
      immagini/mobile-800.webp 800w
    "
    sizes="100vw">

  <!-- JPEG -->
  <source
    media="(max-width: 700px)"
    type="image/jpeg"
    srcset="
      immagini/mobile-400.jpg 400w,
      immagini/mobile-800.jpg 800w
    "
    sizes="100vw">

  <!-- Versione DESKTOP (oltre 700px) -->
  <!-- AVIF -->
  <source
    type="image/avif"
    srcset="
      immagini/desktop-800.avif 800w,
      immagini/desktop-1200.avif 1200w,
      immagini/desktop-1600.avif 1600w
    "
    sizes="(max-width: 1200px) 800px,
           (max-width: 1600px) 1200px,
           1600px">

  <!-- WebP -->
  <source
    type="image/webp"
    srcset="
      immagini/desktop-800.webp 800w,
      immagini/desktop-1200.webp 1200w,
      immagini/desktop-1600.webp 1600w
    "
    sizes="(max-width: 1200px) 800px,
           (max-width: 1600px) 1200px,
           1600px">

  <!-- JPEG -->
  <source
    type="image/jpeg"
    srcset="
      immagini/desktop-800.jpg 800w,
      immagini/desktop-1200.jpg 1200w,
      immagini/desktop-1600.jpg 1600w
    "
    sizes="(max-width: 1200px) 800px,
           (max-width: 1600px) 1200px,
           1600px">

  <!-- Fallback finale -->
  <img
    src="immagini/desktop-1200.jpg"
    alt="Descrizione dell'immagine"
    loading="lazy"
    width="1200"
    height="800">
</picture>

Obiettivo

• Mobile → immagine verticale (più adatta agli schermi stretti)
• Desktop → immagine orizzontale (più adatta agli schermi larghi)
• Ogni versione ha AVIF, WebP e JPEG
• Tutto è anche responsive con srcset + sizes

Descrizione

• Art direction: Fino a 700px → usa le immagini mobile-; oltre → usa le immagini desktop- Questo permette di usare foto diverse, non solo dimensioni diverse.
• Formati moderni: per ogni versione: AVIF; WebP; JPEG. Il browser sceglie automaticamente il migliore che supporta.
• Responsive: srcset → versioni a diverse risoluzioni; sizes → dice al browser quanto spazio occuperà l’immagine; Risultato: scarica solo ciò che serve.
• Ottimizzazioni: loading="lazy" → performance migliori; width e height → evita layout shift.

Risorse online

• Wikipedia: AVIF