Gifs sans le .gif: les options d'image et de vidéo les plus performantes en ce moment

Dites au revoir à l'ère GIF! Meilleures pratiques pour l'animation Web efficace

Vous utilisez toujours des animations GIF obsolètes? En fait, il existe des alternatives de performance plus efficaces et meilleures de nos jours! Cet article explorera en profondeur comment réaliser des animations vidéo en boucle en douceur avec des techniques plus modernes, en tenant compte de la compatibilité des navigateurs et de l'expérience utilisateur.

en utilisant un élément html <video></video>

Utilisez les éléments <video></video> de HTML pour reproduire facilement l'effet d'animation GIF:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

Ce code met en œuvre la lecture automatique, la lecture de boucle, la muette et la lecture en ligne (évitez la lecture en plein écran). Cependant, les problèmes de compatibilité des formats vidéo ne peuvent pas être ignorés.

Les fichiers vidéo sont composés de conteneurs et de codecs vidéo (y compris l'audio et les codecs audio sont également inclus). Les formats de conteneurs vidéo communs sont MP4 et WebM. Le navigateur doit prendre en charge les conteneurs et les codecs pour lire des vidéos.

Le navigateur prend en charge les formats vidéo d'une manière complexe et diversifiée, ce qui est l'une des raisons pour lesquelles les vidéos intégrées YouTube sont si populaires. Voyons quels formats vidéo valent la peine d'être considérés:

Format de conteneur:

• MP4: Depuis sa sortie en 2001, il a été soutenu par presque tous les navigateurs.
• webm: publié en 2010, à l'exception de iOS Safari, et d'autres navigateurs le soutiennent.

code code:

• H.264: Tous les navigateurs le soutiennent.
• HEVC / H.265: Le successeur de H.264, soutenu par Safari, Edge et Chrome (version 105 et plus).
• VP9: Le successeur de VP8, pris en charge par tous les navigateurs qui prennent en charge WebM.
• AV1: Chrome est pris en charge depuis 2018, Firefox est pris en charge depuis 2019 et Edge et Safari n'ont pas encore été pris en charge.

Les fichiers MP4 avec l'encodage H.264 ont la meilleure compatibilité, mais la qualité et la taille du fichier ne sont pas les meilleures. Bien que la compatibilité d'AV1 ne soit pas encore parfaite, car le dernier codec, son efficacité et sa qualité sont extrêmement élevés.

Afin de prendre en compte les anciens et nouveaux navigateurs, vous pouvez utiliser plusieurs éléments <source></source>, prioriser la désignation du fichier source idéal, puis ajouter des alternatives à son tour:

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Si vous avez besoin d'utiliser plusieurs fichiers MP4 avec différents codecs, vous devez utiliser des paramètres complexes codecs.

La plupart des logiciels d'édition vidéo ne prennent pas en charge l'exportation directe des formats AV1 ou WebM et nécessitent la conversion à l'aide d'outils tels que FFMPEG:

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Convertir GIF en mp4:

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

L'utilisation de la vidéo comme arrière-plan et la superposition d'autres éléments nécessite un positionnement CSS:

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

Un inconvénient des éléments

<video></video> est qu'ils empêchent l'écran d'hiberner.

Les avantages des images: webp et avif

L'utilisation de formats d'image WebP ou AVIF animés présente les avantages suivants:

• différentes images d'animation peuvent être utilisées pour différentes tailles d'écran ou modes de thème (tels que le mode sombre).
• Prise en charge native pour le chargement paresseux: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• Plus facile à utiliser comme image d'arrière-plan: background-image: url("coolbackground.webp");

Il peut être utilisé <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(La forme est omise, la même que la forme d'origine)

Utilisation de l'animation avif

AVIF Format (publié en 2019) est l'un des meilleurs formats d'image à l'heure actuelle, la conversion du GIF en AVIF peut réduire le nombre d'octets de plus de 90%:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF est basé sur le codec vidéo AV1 et prend en charge les images statiques et d'animation.

(La forme est omise, la même que la forme d'origine)

en utilisant <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> Cela peut réaliser des effets tels que le fond vidéo ou les images de bordure dans Safari:

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Safari affirme que cette fonctionnalité présente des avantages de performance, mais Chrome a clairement indiqué qu'il ne le soutiendra pas.

Respecter les préférences des utilisateurs

Les éléments vidéo respectent automatiquement les paramètres de lecture automatique de l'utilisateur et les paramètres de "réduction de l'animation".

Vérifier l'amélioration progressive

La prise en charge des formats AVIF et WebP peut être désactivée à l'aide de l'onglet "Rendu" de Chrome Devtools pour tester la compatibilité du code.

Lottie Animation Library

Lottie est une bibliothèque d'animation open source qui exporte des données d'animation (fichiers JSON) à partir des effets et les rend sur une page Web. Il prend en charge plusieurs plates-formes et fournit des options de contrôle flexibles telles que la lecture, la pause, la lecture inversée, etc.

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Les performances de Lottie dépend de la taille de la bibliothèque et de la taille du fichier JSON et du nombre d'éléments DOM générés.

Conclusion: il n'y a pas de meilleure solution absolue, et le choix doit être pesé en fonction des besoins spécifiques et des conditions de projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!