[New] Proposition d'ajout de pratique : « Limiter l'utilisation des GIFs »

[florinesueur]

Un gif n'est pas forcément pertinant sachant qu'une vidéo en boucle peut-être beaucoup moins lourde.

[ACTLEM]

Y a-t-il une source, référence sur le fait qu'une vidéo en boucle pourrait être moins lourde qu'un GIF animé?

[florinesueur]

Voici deux articles sur le sujet : https://rigor.com/blog/optimizing-animated-gifs-with-html5-video/ et https://web.dev/replace-gifs-with-videos/

La construction du site https://giphy.com/ est aussi intéressant à ce niveau qui privilégie le webp animé et quelques fois le mp4 ou webm.

[DocRoms]

Il y a aussi une très bonne recommandation de ce type sur web.dev (google) ici => https://web.dev/replace-gifs-with-videos/

In this example, the initial GIF is 3.7 MB, compared to the MP4 version, which is 551 KB, and the WebM version, which is only 341 KB!

les GIFs ont tendances à peser lourd (pas tous, évidement) Mais il y en a qui pèsent bien leur poids. Techniquement, le GIF à été créé en 1987, c'est un format qui date, et qui n'est pas aussi récent qu'un joli .MP4, ou qu'un .WEBM ;)

[ACTLEM]

Effectivement, c'est un format qui date et j'ai toujours eu un peu de mal avec le gif animé ^^ (mais c'est mon avis perso).
Un point que je mettrai en avant aussi c'est que le GIF animé est habituellement en boucle continue avec donc captation de l'attention et en autoplay ce qu'une vidéo peut facilement ne pas être (voire lien BP autoplay).

[DocRoms]

Yes, c'est même plutôt simple d'activer de désactiver l'autoplay, ou le loop, vu que l'on passe par une balise HTML pour le faire :

<!--  Autoplay, loop and muted video (like a GIF) -->
<video autoplay loop muted playsinline></video>

<!--  Autoplay, not loop and muted video-->
<video autoplay muted playsinline></video>

<!--  Not autoplay, not loop and muted video-->
<video muted playsinline></video>

[ACTLEM]

Note équipe Projet: Bien spécifier que l'on parle d'images animés (cf éviter d'être en doublon de la BP 80, voir discussion #33)

[ACTLEM]

#136