mardi 6 mars 2012

Images png animées

Quand on veut créer des contenus attrayants pour le web, on a souvent recourt aux images et aux animations, m ais se pose alors la question du format des fichiers que l'on va créer. Les trois formats d'images les plus populaires sur le web sont :
  • le JPG : format propriétaire et ouvert, de compression très efficace mais avec perte de qualité donnant un bon rendu pour les images nuancées et les dégradés (grace à ses 16,7 millions de couleurs supportées) mais ne suportant ni la transparente ni les animations
  • le GIF   format propriétaire et "ouvert"   compression LZW (sans perte) mais ne supporte qu'une palette de 256 couleurs maximum, dont la transparence,et permet également de créer des animations
  • le PNG format ouvert et libre qui concilie les avantages du jpg (compression sans perte et très grand nombre de couleurs possibles) avec ceux du GIF (support de la transparence et des animations )

le JPG a totalement conquis le monde de la photographie malgré ses défauts, le PNG se popularise de plus en plus mais reste concurrencé par le GIF qui malgré les doutes sur son caractère "ouvert" reste populaire pour faire des animations ...

Jusqu'ici je ne savais pas comment faire un "PNG animé" car ce format n'est pas encore supporté par Image Magick, mais je viens de découvrir un petit utilitaire qui permet de faire ça en ligne de commande sous windows : apngasm.  Le fichier zip à télécharger contient juste un fichier apngasm.exe qu'il faudra sauver sur votre disque (dans un répertoire intégré au PATH de préférence), ensuite l'utilisation est très simple :

  • créer une suite d'images png (par exemple fig1.png, fig2.png,... )
  • lancer la ligne de commande apngasm anim.apng fig*.png  
  • vous aurez un fichier anim.apng affichant en boucle les images fig1.png, fig2.png ... pendant 1/10ième de seconde chacune
  • vous pouvez changer certains paramètres par défaut en précisant des options   à la fin de la ligne de commande, par exemple pour afficher chaque image 1/2 seconde : 
$ apngasm.exe anim.apng fig*.png 1 2

APNG Assembler 2.6

reading fig1.png (1 of 9)
reading fig2.png (2 of 9)
reading fig3.png (3 of 9)
reading fig4.png (4 of 9)
reading fig5.png (5 of 9)
reading fig6.png (6 of 9)
reading fig7.png (7 of 9)
reading fig8.png (8 of 9)
reading fig9.png (9 of 9)
saving anim.apng (frame 1 of 9)
saving anim.apng (frame 2 of 9)
saving anim.apng (frame 3 of 9)
saving anim.apng (frame 4 of 9)
saving anim.apng (frame 5 of 9)
saving anim.apng (frame 6 of 9)
saving anim.apng (frame 7 of 9)
saving anim.apng (frame 8 of 9)
saving anim.apng (frame 9 of 9)
all done

l'extension "apng" n'est pas toujours reconnue (par Blogger par exemple), mais on peut renommer les fichiers avec l'extension "png", voici le résultat :




je n'ai pas trouvé de solution sous linux pour l'instant ... mais il y a aussi un greffon pour firefox qui permet créer des animations en png.

3 commentaires:

  1. C'est sensé être animé, si oui, pas de compat' Chrome ? (Chromium 6.0.472.63 (59945) Built on Debian 6.0.2, running on Debian 6.0.4)

    RépondreSupprimer
  2. hélas oui, Chrome (version 17 sous windows chez moi) ne lit pas encore les png animés ...

    RépondreSupprimer
  3. il y a maintenant une extension chrome pour visualiser les images apng. Chercher APNG dans le chrome web store ...

    RépondreSupprimer

Pour écrire des formules mathématiques vous pouvez utiliser la syntaxe latex en mettant vos formules entre des "dollars" $ \$....\$ $ par exemple :
- $\sum_{n=1}^\infty {1\over n^2}={\pi^2\over 6}$ s'obtient avec \sum_{n=1}^\infty {1\over n^2}={\pi^2\over 6}
- $\mathbb R$ s'obtient avec {\mathbb R} et $\mathcal D$ s'obtient avec {\mathcal D}
- pour les crochets $\langle .,. \rangle$ dans les commentaires utilisez \langle .,. \rangle
vous pouvez écrire du html dans les commentaires :
- italique <i> ... </i> gras <b> ... </b>
- lien <a href="http://adresse "> .... </a>