Faut-il produire à la fois du MP4 et du WEBM ?

Si c'est pour votre propre site web, oui, car proposer les deux apporte à la fois efficacité et compatibilité. Les navigateurs modernes prennent le WEBM, plus léger, et les anciens se rabattent sur le MP4. Si vous devez choisir un seul fichier, le MP4 est plus sûr — il fonctionne partout. L'avantage du WEBM se limite à la taille du fichier, généralement de l'ordre de 20 à 30 %.

Que se passe-t-il si je convertis en vidéo un GIF transparent ?

La transparence est perdue. Les codecs vidéo courants ne transportent pas de canal alpha et les pixels transparents sont généralement remplis en noir ou en blanc. Si la transparence doit être conservée, choisissez le WEBP animé ou l'APNG plutôt qu'une vidéo ; tous deux prennent en charge un canal alpha 8 bits et donnent un meilleur résultat que la transparence binaire du GIF.

Le WEBP animé est-il aussi léger qu'une vidéo ?

Non, il est généralement deux à trois fois plus lourd. Mais il fait environ un tiers de la taille d'un GIF et il conserve la transparence. L'ordre est donc le suivant : la vidéo est la plus légère, le WEBP se situe au milieu, l'APNG est plus lourd et le GIF est le plus lourd de tous. Si la transparence n'est pas nécessaire, la vidéo est toujours plus efficace.

Dois-je supprimer mes fichiers GIF après la conversion ?

Ne les supprimez pas tout de suite. Conservez-les un certain temps, car certains environnements peuvent encore exiger du GIF — newsletters, anciens messages de forum, certains systèmes de gestion de contenu. Par ailleurs, si vous repérez un problème dans la conversion, il vous faudra revenir à la source. Si vous avez fait une conversion en masse sur tout le site, vous pourrez les archiver après quelques semaines sans incident.

Convertir un GIF en MP4 ou en WEBM ? Comparaison des formats cibles

Vous avez décidé de convertir votre GIF. Reste la question de la cible : MP4, WEBM, WEBP animé ou APNG ? Les quatre sont plus légers que le GIF et les quatre imposent des compromis différents. Dans cet article, nous examinons lequel convient à quelle situation.

Résumé des quatre formats cibles

MP4 (H.264) : le format vidéo le plus répandu. Prise en charge universelle.

WEBM (VP9) : format vidéo ouvert. Plus léger que le MP4 à qualité égale, pris en charge par les navigateurs modernes.

WEBP animé : se comporte comme un format d'image (s'utilise avec la balise <img>), prend en charge la couleur complète et la transparence alpha.

APNG : la version animée du PNG. Couleur complète, canal alpha 8 bits, se comporte comme une image.

Tableau comparatif

Pour un GIF de 5 secondes, 480×270, 15 ips, grossièrement :

| Critère | GIF (source) | MP4 | WEBM | WEBP animé | APNG | |---|---|---|---|---|---| | Taille typique | 4 Mo | 400 Ko | 300 Ko | 1,2 Mo | 2,5 Mo | | Transparence alpha | Binaire | Non | Non | 8 bits | 8 bits | | Balise HTML | <img> | <video> | <video> | <img> | <img> | | Lecture automatique | Native | Attribut | Attribut | Native | Native | | Prise en charge navigateurs | Universelle | Universelle | Modernes | Modernes | Modernes | | Prise en charge e-mail | Bonne | Non | Non | Non | Faible | | Chrominance pleine résolution | Oui | Non (4:2:0) | Non (4:2:0) | Oui | Oui |

La dernière ligne est importante : les formats vidéo stockent l'information de couleur à demi-résolution (sous-échantillonnage de chrominance 4:2:0), ce qui crée un léger flou sur les contours de couleur nets. Le WEBP et l'APNG ne le font pas.

Scénario 1 : animation produit sur un site web

Elle se lira automatiquement dans la page, la transparence n'est pas nécessaire.

Gagnant : WEBM + MP4 ensemble.

<video autoplay muted loop playsinline poster="apercu.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Les navigateurs modernes prennent le WEBM, plus léger, et les anciens se rabattent sur le MP4. Produire deux fichiers représente un petit travail supplémentaire, mais apporte à la fois efficacité et compatibilité.

Si vous devez vous limiter à un seul fichier, prenez le MP4 ; l'avantage du WEBM se résume à 20-30 % de taille en moins, ce qui ne vaut pas forcément le risque de compatibilité.

Scénario 2 : animation de logo sur fond transparent

Le contenu de la page doit rester visible derrière.

Gagnant : le WEBP animé.

Les formats vidéo ne prennent pas en charge la transparence alpha en pratique. Dans ce scénario, MP4 et WEBM sont totalement éliminés.

WEBP contre APNG :

| Aspect | WEBP animé | APNG | |---|---|---| | Taille du fichier | Plus petite | 2 à 3 fois plus grande | | Prise en charge navigateurs | Navigateurs modernes | Un peu plus large | | Mode avec perte | Oui | Non (toujours sans perte) |

Le WEBP est généralement le meilleur choix, car son mode avec perte produit des fichiers bien plus légers et la prise en charge par les navigateurs modernes est suffisante.

Le cas où vous préférerez l'APNG : lorsqu'une qualité sans perte est impérative (par exemple une animation d'interface au pixel près) et que la taille du fichier est secondaire.

Les deux sont bien meilleurs que la transparence binaire du GIF — avec 256 niveaux de transparence, ils offrent des contours doux, sans l'aspect crénelé du GIF.

Scénario 3 : animation issue d'une capture d'écran (démonstration d'interface)

Un enregistrement montrant comment utiliser un logiciel, contenant du texte.

Gagnant : WEBM ou WEBP animé — attention au problème de chrominance.

Dans ce scénario, le sous-échantillonnage de chrominance peut poser un vrai problème. Les codecs vidéo stockent l'information de couleur à demi-résolution, ce qui crée du flou sur les contours nets du texte coloré. Les textes d'interface en petits caractères peuvent devenir illisibles.

Deux solutions :

1. Utilisez une haute résolution. Si le texte occupe suffisamment de pixels, l'adoucissement de chrominance passe inaperçu. Conservez la capture d'écran à sa résolution d'origine.

2. Utilisez le WEBP. Le WEBP offre la pleine résolution de couleur et n'applique pas de sous-échantillonnage de chrominance. Le texte reste net. Le fichier sera plus lourd qu'une vidéo, mais cela en vaut la peine si la lisibilité est critique.

Certains encodeurs vidéo prennent en charge le profil 4:4:4 (chrominance en pleine résolution). Utilisez-le s'il est disponible, mais testez la prise en charge par les navigateurs.

Scénario 4 : newsletter par e-mail

Gagnant : le GIF — ne convertissez pas.

Presque aucun client de messagerie ne lit de vidéo. La prise en charge du WEBP et de l'APNG y est également faible.

Laissez le GIF tel quel, mais optimisez sa taille : raccourcissez la durée (2 à 3 secondes), baissez la résolution (300 à 400 px), réduisez la fréquence d'images (10 ips), et au besoin descendez à 128 couleurs.

Une remarque importante : certains clients de messagerie (notamment certaines versions d'Outlook) n'affichent que la première image du GIF. Concevez cette première image pour qu'elle ait du sens à elle seule.

Scénario 5 : démonstration pas à pas dans un article de blog

Une courte animation montrant comment réaliser une opération.

Gagnant : la vidéo MP4/WEBM — mais pensez au contrôle utilisateur.

Il y a ici un arbitrage d'expérience utilisateur. Une animation en lecture automatique peut distraire le lecteur pendant qu'il lit le texte, et la voir tourner en boucle en permanence peut être gênant.

Alternative : donnez le contrôle de la lecture à l'utilisateur avec l'attribut controls et n'utilisez pas autoplay. Il démarre quand il est prêt, peut mettre en pause et revenir en arrière.

Pour les animations longues ou riches en information, c'est généralement le meilleur choix. Pour les animations courtes et décoratives, la lecture automatique convient.

Scénario 6 : optimisation globale d'un site

Vous avez des dizaines de GIF sur votre site et vous allez tous les convertir.

Gagnant : WEBM + MP4, avec une approche systématique.

L'ordre à suivre :

1. Faites l'inventaire. Quels GIF, où, de quelle taille ? Commencez par les fichiers les plus lourds ; le gain est proportionnel.

2. Isolez ceux qui nécessitent de la transparence. Ceux-là doivent aller vers le WEBP, pas vers la vidéo.

3. Produisez le couple pour les cibles vidéo. WEBM + MP4.

4. Mettez le HTML à jour. Transformez les balises <img src="x.gif"> en blocs <video>. Ajoutez l'attribut poster.

5. Mesurez. Faites une comparaison avant/après avec des outils de mesure de vitesse de page. La différence se voit généralement immédiatement.

6. Ne supprimez pas les GIF tout de suite. Conservez-les quelques semaines ; si vous repérez un problème, vous devez pouvoir revenir en arrière. Vous pourriez aussi en avoir encore besoin pour vos newsletters.

Réglages de qualité

Quel que soit le format retenu, les réglages comptent :

Pour MP4/WEBM : utilisez le CRF (facteur de qualité constante). Les plages usuelles sont 18 à 23 pour le H.264 et 28 à 33 pour le VP9 (une valeur basse signifie une meilleure qualité). Pour les vidéos issues de GIF, la source étant déjà simple, des réglages de qualité plus élevés restent d'une taille raisonnable.

Pour le WEBP : une valeur de qualité entre 75 et 90 constitue un bon équilibre pour la plupart des contenus. Il existe aussi un mode sans perte, mais le fichier grossit nettement.

Commun aux deux : n'augmentez pas la résolution. Si votre GIF fait 400 pixels de large, produire une vidéo en 800 pixels n'ajoute aucun détail et ne fait qu'alourdir le fichier.

Résumé de la décision

Décidez en trois questions :

1. La transparence est-elle nécessaire ? Oui → WEBP animé (ou APNG si le sans perte est requis).

2. S'agit-il d'un e-mail ou d'un vieux forum ? Oui → laissez le GIF, contentez-vous de l'optimiser.

3. Tous les autres cas → WEBM + MP4 ensemble. Et MP4 s'il faut choisir un seul fichier.

Note complémentaire : sur les captures d'écran contenant du texte net, le sous-échantillonnage de chrominance des formats vidéo peut nuire à la lisibilité. Dans ce cas, conservez une résolution élevée ou passez au WEBP.