Tontof

Je vous avais préparé un petit article pour vous parler d'images animées. C'est dommage mais l'article n'était pas encore tout à fait prêt quand je me suis rendu compte que j'aurai pu le publier pour l'anniversaire du GIF animé (Korben). Je n'ai jamais utilisé de javascript dans un flux RSS, je ne sais donc pas ce que ça va donner. Si cela ne s'affiche pas correctement, n'hésitez pas à venir directement sur le site.

Si seulement je n'avais pas eu tous ces partiels et soutenances à préparer...

On m'a demandé quand est-ce que je mettrais en place sur ce site quelques images pour faire des illustrations... Je compte intégrer l'ajout d'images à kriss blog, mais en attendant, voilà en avant-première une petite alternative aux formats GIF, APNG, WebP et autres formats qui permettent/permettront d'animer une image.

Pourquoi une alternative ?

Tout d'abord, il faut savoir qu'à la base GIF est un format propriétaire qui ne satisfaisait pas vraiment tout le monde. Maintenant ce format est vieux et les brevets associés ne sont plus vraiment gênants...

D'autres solutions ont été proposées comme alternatives à ce format comme le format APNG ou le format de Google WebP qui devrait supporter les animations dans ses futures versions. Ces formats ne sont malheureusement pas supportés par tous les navigateurs, et pour une fois pas seulement Internet Explorer, mais le format APNG n'est pas non plus supporté par Chrome et Safari et le format WebP n'est supporté que par Chrome et Opera. Bravo Opera qui supporte tous ces formats nativement !

Mais alors pourquoi une alternative ?

Tout d'abord, je pense que c'est bien d'avoir le choix et je pense qu'il peut être intéressant d'utiliser la balise canvas comme une alternative qui sera compatible avec tous les navigateurs (récents) et qui devrait permettre un paramétrage plus avancé des animations.

Des solutions existent déjà :
- afficher successivement plusieurs images png à l'aide d'un script : exemple (solution qui ne m'a pas vraiment convaincue)
- utiliser des sprites et un script pour animer tout ça exemple 1, exemple 2.
J'ai trouvé ces solutions intéressantes, mais elles sont "compliquées" à mettre en place et ne permettent pas vraiment de configurer l'animation. Je me suis donc inspiré et j'ai adapté tout ça.

Une image vaut mille mots alors voici un petit exemple :

(source : Wikipedia : Balle.gif)

- on convertit le gif en png avec des sprites :
montage Balle.gif -tile 1x -geometry +0+0 balle.png (merci ImageMagick)
- on met un background transparent (pas obligatoire) :
convert balle.png -transparent white balle.png (merci ImageMagick)
- on obtient cette image :

- on met les images à animer dans un canvas, un petit script et voilà le résultat
<script src="//tontof.net/js/acanvas.js"></script>
<canvas height="50" width="50"><img src="//tontof.net/img/balle.png" width="50" height="50"></canvas>


- à partir de la même image, il est possible de modifier l'animation


Je ferai un autre article pour présenter les différentes options, car je n'ai pas encore tout développé ce que j'ai en tête, et je trouve cet article bien assez long :-)
Je vous laisse regarder le code source si vous ne voulez pas attendre le prochain article consacré à acanvas.

Avantages :
- simple d'utilisation : un simple script js à inclure, une balise canvas qui encadre l'image avec les dimensions du sprite et c'est tout
- compatible sur tous les navigateurs récents ? (juste testé sur firefox et sur le navigateur mobile android 2.3.5 pour le moment)
- hautement paramétrable grâce à javascript et permet d'animer également une image fixe sans sprite
- peut réduire la taille de l'image (2361 octets pour l'image gif, 1549 octets pour l'image png, soit 35% de réduction)... dépend bien évidemment du type d'image, l'exemple étant clairement avantageux pour png.

Inconvénients :
- nécessite javascript, sinon affiche l'image à la place toute réduite.
- ne gère pas encore les gif où seulement des parties changent un peu comme les Cinemagraph qui n'encodent que les parties qui bougent dans le gif.
- doit être plus gourmand en ressources qu'un simple fichier image, même si je pense avoir un peu limité en utilisant un setTimeout dans le code à la place de setInterval.

Permalink