:-y

GIF, APNG, WebP versus Canvas

vendredi 25 mai 2012 - 23:58

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.

Comments

1 - @ - fred

Sympa, faut que je m'y mette au html5/js. J'ai commencé à survoler seulement. En attendant, les inconvénients sont quand même assez sérieux:
-JS n'est pas présent partout ;
-les navigateurs n'acceptent pas tous html5, sauf − comme tu le dis − les récents (au passage, marche bien avec le Chromium dans wheezy) ;
-ne passe pas dans les flux RSS (en tout cas dans GReader) ;
-bien difficile à mettre en place malgré tout pour quelqu'un qui n'y connait rien en informatique ;
-on ne peut pas copier l'animation aussi facilement qu'un gif.

Après, j'suis d'accord, le gif c'est quand même bien pourri. Pour moi, l'alternative au gif, ce devrait être le svg. (Comment qu'on met des images en commentaire ‽)
Exemple tout bête.
D'autres moins simples.
Et on peut faire des choses sympas aussi comme ici.
Mais bon, le gif, c'est la facilité et il a de longs jours devant lui…

2 - @ - fred

Hey, j'ai voulu préviewer ! J'ai du me tromper… (Si y a cette parenthèse c'est que la deuxième fois, la preview n'a pas marché parce que j'aurai fait attention.)
Bon, mon commentaire aura permis de mettre en évidence un bug avec les liens :þ

3 - @ - Tontof

C'est vrai que je n'ai pas parlé des svg animés qui sont très intéressants.
Même si je ne l'ai jamais vraiment utilisé, j'ai bien aimé la présentation de Sozi qui permet de faire des diaporamas à partir d'un svg.

Concernant les bugs, je vais regarder ça :-)

Edit : les liens et la preview remarchent
New comment







           __        __  
\  /   /  /  \ \  / /  \ 
 \/   /_  |__|  \/  |    
 /\  /  \ |  |  /\  |    
/  \ \__/ |  | /  \ \__/