GIF, MP4 o WebM: quale formato per i loop

GIF o MP4 si decide in base a dove girerà il loop. Su siti web e social media, l’MP4 (e il suo cugino aperto WebM) è quasi sempre la scelta giusta: i file sono di solito molto più piccoli, il colore è fluido e la riproduzione è efficiente. Il GIF è ancora la scelta giusta in un solo posto, l’email, perché la maggior parte delle caselle di posta mostra i GIF animati e pochissime riproducono video. Tutto il resto di questa guida è un dettaglio di questa regola.

Cos’è davvero ciascun formato

Il GIF è un formato di immagine della fine degli anni ’80 che può contenere più fotogrammi. Memorizza ogni fotogramma con una palette di al massimo 256 colori e comprime ogni fotogramma per conto suo. MP4 e WebM sono formati video. Usano codec video moderni, come H.264 nell’MP4 e VP9 o AV1 nel WebM, che memorizzano ciò che cambia tra un fotogramma e l’altro invece di ogni fotogramma per intero. Per un loop in cui la maggior parte dell’immagine cambia lentamente, questa differenza è enorme.

Perché i gradienti sembrano brutti in GIF

Un gradiente liscio su un fotogramma di 1080 pixel può usare migliaia di colori distinti. Un fotogramma GIF ne può contenere al massimo 256. L’encoder ha due scelte: arrotondare i colori al più vicino della palette, il che produce strisce visibili, oppure spargere pixel di colori vicini per simulare le vie di mezzo, e questo si chiama dithering, che sembra puntinato e fa crescere i file. Nessuno dei due somiglia al gradiente che hai progettato.

La grana aiuta un po’, perché le immagini rumorose nascondono i limiti della palette meglio di quelle pulite. Ma la vera soluzione è non usare il GIF dove è possibile il video. Il banding nei gradienti spiega lo stesso problema nelle immagini fisse.

MP4 o WebM per i siti web

Per un sito web, sostituisci i GIF con un elemento video che si comporti come tale: riproduzione automatica, muto, in loop e in linea. La guida di web.dev per sostituire i GIF animati con il video spiega l’approccio. Offri prima il WebM, dato che spesso è più piccolo, e l’MP4 come ripiego che si riproduce quasi ovunque.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Vale la pena conoscere altri due formati. WebP animato e AVIF animato sono formati di immagine, usati in un normale tag img come un GIF, ma con colore pieno e compressione molto migliore. I browser moderni supportano entrambi. Sono comodi dove un CMS o una piattaforma accetta solo immagini, ma non per le email. Per gli sfondi a tutta larghezza, leggi sfondi video nei siti web.

Loop per i social media

Le piattaforme social sono costruite attorno al video, e l’MP4 è il formato che accettano tutte. Dove una piattaforma accetta il caricamento di un GIF, spesso lo tratta in modo diverso da un normale video, quindi un GIF è raramente un vantaggio. Esporta il tuo loop come MP4 alla dimensione della piattaforma, in H.264, e lascia fare il resto alla piattaforma. Post animati o statici tratta dimensioni e impostazioni.

Loop nelle email: ancora GIF

La maggior parte dei client di posta non riproduce i video, quindi un GIF animato è il modo pratico per mettere movimento in un’email. Tienilo piccolo e tratta il primo fotogramma come ripiego: alcuni client, comprese alcune versioni del vecchio Outlook per Windows, mostrano solo il primo fotogramma. Metti il messaggio in quel fotogramma così non si perde nulla. Le nostre guide al design dell’header email e ai gradienti nelle email trattano il resto.

1. 1

   Tienilo breve

   Da due a sei secondi bastano e avanzano in un’email; ogni fotogramma aggiunge peso.

2. 2

   Riduci dimensione e frequenza dei fotogrammi

   Esporta alla larghezza con cui viene mostrato, spesso 600 pixel, e a una frequenza più bassa, come 10-15 fotogrammi al secondo, per il movimento lento.

3. 3

   Metti il messaggio nel primo fotogramma

   Chi vede solo il primo fotogramma deve comunque capire il senso.

4. 4

   Controlla la dimensione del file

   I GIF grandi si caricano lentamente sui telefoni. Se è pesante, taglia durata, dimensione o colori prima di ogni altra cosa.

Convertire tra GIF e MP4

ffmpeg, uno strumento gratuito a riga di comando, gestisce entrambe le direzioni. Trasformare un video in un buon GIF richiede una palette personalizzata costruita dal video stesso; trasformare un GIF in MP4 è più semplice.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Quale formato usare, a colpo d’occhio

Se crei loop in Gradiently, lo Studio esporta entrambi: un video (MP4 dove il tuo browser può registrarlo, altrimenti WebM) fino a 1080p, e un GIF con una scelta di qualità che resta sotto i 15 MB. Assicurati che il loop si chiuda bene qualunque tu scelga; vedi i loop senza stacchi.