Animations GIF ou MP4 ? Résolutions 2020

C’est quoi un GIF ?

Animations GIF ou MP4 ? Ceci fit toujours l’objet d’un débat dans le domaine du web design. Avant d’aborder cela, faisons une brève définition des Gifs. Les GIFs (graphics interchange format) sont l’un des plus anciens formats de documents web. Ils ont été introduits en 1987 ! Mais grâce à l’avancement de la technologie des navigateurs pendant ces dernières années, le nombre de scénarios dans lesquels le choix d’un tel format a largement diminué aussi. En général, les Gifs animés maintiennent leur position et leur usage d’une manière assez ironique puisqu’à aujourd’hui, ils ne sont toujours pas utilisés de la bonne manière.

En Gros, les Gifs ne sont pas destinés à être une plateforme pour animation, même si cela peut être réalisé d’une manière assez limitée.

Dans cet article, nous essayerons d’explorer 3 manières grâce auxquelles les navigateurs web d’aujourd’hui offrent une meilleure solution aux animations web.

La Vidéo HTML5

Les nouvelles spécificités HTML5 rendent le processus d’ajouter une animation à la page très facile, aussi facile que d’ajouter des images JPEG, PNG ou encore SVG. La balise <video> qui ne nécessite aucun ajout d’un plugin Javascript ou de markups bizarres. Le support pour les formats vidéo modernes signifie que pour une vidéo bouclée, la Vidéo HTML5 peut intégrer un format beaucoup plus léger que le GIF. Il s’agit en effet du MP4 qui bat des records en terme de taille/qualité.

Ci-dessous, nous présentons une animation mp4 que nous avions réalisé pour notre projet d’hébergement web Host Atlas à côté de la même mais cette fois-ci en GIF. Nous ne sommes pas cassé la tête pour les synchroniser par manque de temps et un vouloir être straight to the point.

See the Pen
COMPARATIF GIF MP4 by Astro Digital (@astrodigitalco)
on CodePen.

Le support des navigateurs pour la technique de placement vidéo ci-dessus est aux alentours de 90%. Les débats autour des conteneurs vidéo et des codecs ont rendu l’âme il y a plusieurs années et le format d’encodage H.264 enregistré dans un MP4 a émergé de manière quasi-dominante. Ceci étant dit, le fait d’inclure un format WebM dans un host séparé pour éviter des consommations inutiles de vos ressources n’est pas une mauvaise idée.

Fait intéressant : Ceci est la même technologie utilisée par des autorités de renom telles que Imgur & ueno.co pour profiter de la puissance du rendu mp4. Pour le cas de Imgur, tous les Gifs téléchargés sur leurs serveurs sont automatiquement convertis au format MP4 et WebM

Ressources :

• http://www.html5rocks.com/en/tutorials/video/basics/
• http://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video

Le CSS pur

Les Gifs sont communément utilisés pour les animations des interfaces utilisateur, particulièrement dans les vieux sites web. Par exemple, dans une situation où les animations contiennent des formes simples telles que des lignes ou des formes graphiques simples (carré, rectangle ou losange) le css reste une meilleure solution que le MP4, GIF ou PNG.

Voici un bel exemple contenant une petite comparaison d’un loader en Gif à gauche et un pure CSS à droite, constatez par vous-mêmes la différence en termes de tailles.

See the Pen
css loader by Connor (@CKH4)
on CodePen.

Créer des animations de formes géométriques simples signifie qu’elles sont indépendantes de la résolution et qu’elles s’afficheront très nettes dans tout type d’écran. Contrairement au Gifs, elles peuvent être infiniment agrandies en gardant une résolution adaptive très élevée. Elles sont aussi remarquablement fortes et il est possible d’en créer des images animées extrêmement complexes comme l’exemple : <link> selon votre degré de maîtrise du langage.

Mine de rien, les animations keyframe en CSS3 ont aussi un grand degré de support de la part des navigateurs modernes, ce qui s’élève à 90%. Par contre, elles peuvent s’avérer très difficiles à réaliser d’autant plus qu’elles manquent de tout contrôle pouvant aider à debugger les problèmes d’animation.

Ressources:

• https://sarasoueidan.com/blog/svg-vs-gif/
• https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/

Les Sprites

Contrairement aux deux techniques ci-haut, les sprites sont un petit hack et pour leur défense, c’est un hack très ancien et qui marche ! Ce qui reste un hack dans les normes.

Une sprite sheet est essentiellement une grande image contenant chaque frame de votre animation du début à la fin de la séquence. Vous appliquez l’image comme background-image à un élément de votre page, ensuite vous utilisez la fonction steps( ) timing en Keyframe animation du CSS3 pour itérer entre les frames.

See the Pen
Catwalk(cycle) by Rachel Nabors (@rachelnabors)
on CodePen.

Les cas d’utilisation pour cette technique sont un peu limités – elle est recommandée pour les animations pour lesquelles du SVG ne fera pas l’affaire (e.g. pixel art) et qui requièrent une transparence pour un haut degré de control. Google ont déjà fait une sprite ( ) animation dans plusieurs de ses doodles <link>

En plus d’être très légères, les animations spritesheet offrent un plus grand niveau de contrôle que le GIF, puisqu’elles peuvent être extrêmement manipulables avec du CSS et du Javascript. Si vous êtes intéressés par les sprites, nous allons écrire un tutoriel pour développer des animations complexes et responsive en utilisant GreenSock de TweenMax.

Merci pour votre lecture.