Le PNG animé compatible OS X Yosemite et iOS 8

Mickaël Bazoge |

L'Animated PNG, ou APNG, est un format d'image méconnu qui se présente comme le remplaçant « moderne » du fameux GIF animé. Techniquement parlant, l'APNG est effectivement plus performant, puisqu'il gère des images 24 bits et la transparence 8 bits. Le GIF est bien plus limité, plus ancien (les spécifications de l'APNG ont été créé en 2004) mais aussi beaucoup plus populaire grâce au support de Netscape à l'époque (un temps que les moins de 20 ans…)

Pour savoir si votre navigateur sait lire les fichiers PNG animés, cliquez ici : si la balle rebondit, le butineur est compatible.

L'APNG est actuellement lisible dans Firefox depuis la version 3 qui date de 2008. Safari sera aussi de la partie avec la prochaine version 8.0 du navigateur, qui sera livrée dans OS X Yosemite, ainsi que dans iOS 8. Pierre Dandumont du Journal du Lapin a réalisé cette courte vidéo de l'affichage d'un PNG animé dans la prochaine version d'OS X :

Ce support au sein des futurs systèmes d'exploitation mobile et de bureau d'Apple sonne t-il le signe du renouveau pour l'APNG ? Au vu de ses atouts (taille réduite de la bibliothèque, compatibilité avec d'anciennes implémentations du PNG), il n'est pas interdit de penser que ce format délaissé renaisse de ses cendres. Mais malgré la popularité de ses solutions, il faudra plus qu'Apple pour que le PNG animé prenne réellement, alors que le GIF concurrent, avec ses restrictions et ses limites (qui font le miel des amateurs) ne s'est jamais aussi bien porté.

Tags
avatar misterbrown | 

A mort le Gif!

avatar nayals | 

"L'APNG est actuellement lisible dans Firefox depuis la version 3 qui date de 2008"

C'est marrant ça, j'ai la version 30 sur Mavericks et l'image ne s'anime absolument pas...

avatar tete-jaune | 

Idem…

avatar CKJBeOS | 

pareil !

avatar Mickaël Bazoge | 
C'est corrigé, une erreur avec le lien.
avatar nova313 | 

Il était temps. Une meilleur qualité d'image, qui gère la transparence, et qui peut s'animer, c'est un pas en avant pour abandonner le gif.

avatar Bibuu_ | 

La petite image ne bouge pas dans Chrome (35.0.1916.153) sur Mavericks.

avatar Kiros | 

Cliquez sur le lien APNG. Et ça fonctionne.

avatar CKJBeOS | 

oui sur wikipedia ca marche :)

avatar stefroan | 

marche pas non plus avec safari 8.0 (10538.39.41) et yosemite DP2..
arf, ça y est j'ai compris, ça marche pas sur macg mais sur le site du lapin oui tout est ok

avatar Kiros | 

Le lien qui mène a Wikipedia, pas dans l'article, et la cela fonctionne.

avatar Frodon | 

"Si vous voyez cette image s'animer, c'est que votre navigateur sait lire le PNG animé."

Sauf que vous n'avez pas inclut la version APNG ;)

avatar Link1993 | 

Ca ne s'anime pas dans macg mobile ! Une honte ! Qu'elle est donc ce site techno meme pas au niveau de la techno actuelle (2004 quand meme...)

Ok, c'est bon, je sors :p

avatar Boumy | 

Et le svg animé, quelqu'un sait comment en faire? (Je sais je radote) merci

avatar joneskind | 

@Boumy

Y a plein de tutoriels sur internet pour ça.

avatar redchou | 

Un des avantages du Gifs est qu'il permet un certain flou artistique pour faire des images animés avec trucage maison ou autre, et qu'il est incroyablement léger...
Les techniques de compression ont évolué, mais difficile de rivalisé avec une image qui n'affiche qu'une palette de 250 couleurs...

avatar joneskind | 

@redchou

Le Gif, léger ?

Je vais souvent sur des sites de Gifs et il n'est pas rare de tomber sur des Gifs de plusieurs Mo, malgré la limite à 256 couleurs.

Maintenant, tu peux faire de l' APNG en 256 couleurs si tu veux. Qui peut le plus peut le moins.

PS: Je vous vois arriver les blagueurs !

avatar Strix | 

@joneskind :
Le Gif est léger oui, quand tu sais l'utiliser et l'optimiser et que tu n'en fais pas trop :p

C'est la même chose que le Flash.
Bien utilisé et optimisé, c'est bien, mal utiliser et à vouloir trop en faire, c'est lourd et vomitif

avatar joneskind | 

@Strix

Le Gif c'est bien pour tirer des traits ou des objets simples, mais dès que tu passes à l'image c'est compliqué. Tu peux faire un truc animé pas trop lourd si tu te contente d'animer une portion de l'image mais un extrait de film sera toujours lourd. T'as rien pour optimiser le Gif. C'est limite de l'image Bitmap.

Et vu le poids d'une image Gif qui ne fait pourtant que 256 couleurs, je ne peux pas dire que ce soit léger.

Je parle du Gif en tant que séquence vidéo.

avatar Strix | 

@joneskind :
Ah oui en temps que séquence vidéo, c'est lourd !

avatar redchou | 

On peut faire des gifs animés avec des images de 256 couleurs mais aussi de 16 millions de couleurs avec les calques, etc...
On parle d'animation, animer une image fixe, un logo, mais la vidéo, ce n'est pas le l'animation...
L'encodage gif permet de rassembler les pixels de mêmes couleurs quand ils sont contigu, le bitmap non, enfin, il me semble...
Pour revenir à la vidéo, l'utilisation du gif est valable si on découpe cette vidéo avec une image pour chaque plan séquence... Mais pas si on l'utilise comme un codec de compression...

avatar oomu | 

si vous parlez de "bitmap" au sens du format microsoft .bmp, oui bien sur ça se compresse avec le classique algorithme RLE.

avatar redchou | 

Pour le bitmap, c'est pas obligé, si ?
Il me semble en avoir fait sans compression...
Après, la compression "RLE" doit-être plus efficace quand on ne travaille qu'avec 250 couleurs... Enfin je pense.. C'est pas mon domaine.

avatar joneskind | 

[Edit]

Doublon

avatar caissonbulle | 

HTML5 et CSS3 peuvent produire des “effets” assez similaires :

http://daneden.github.io/animate.css

;-)

avatar joneskind | 

@caissonbulle

Je suis à peu près certain qu'on pourrait aussi le faire en langage bas niveau. Mais c'est plus compliqué.

avatar iDanny | 

Si je ne m'abuse, les GIF sont transparents mais les PNG sont translucides... nuance ! :)

avatar joneskind | 

@iDanny

Tu peux préciser ta pensée ?

avatar redchou | 

Je pense qu'il veut dire que le gif est transparent ou pas, il utilise un masque de transparence binaire.
Le png est translucide parce qu'il utilise un masque de valeur entre 0 et 1, une sorte de couche alpha... En gros on peut voir à travers lui, d'où l'utilisation du mot translucide...

avatar jeanba3000 | 

On peut aussi parler d'opacité :-D

avatar redchou | 

C'est le mot que j'avais sur la langue, mais impossible de le sortir pour trouver un explication simple... ^_^

avatar oomu | 

PNG (et donc APNG) gère un canal alpha de 8bits (255 niveaux de transparence). C'EST une "couche alpha".

avatar joneskind | 

@oomu

C'est bien ce qu'il me semblait...

Est-ce qu'il est possible de justifier un texte autour d'un gif, comme avec un PNG ?

avatar jeanba3000 | 

La justification d'un texte html autour d'une image n'a rien à voir avec le format de fichier de l'image…

avatar joneskind | 

@jeanba3000

Je ne parle absolument pas de la justification HTML mais de la justification autour du "plein" de l'image. Par exemple, si tu as un objet détouré dont le fond a été supprimé tu peux justifier ton texte autour de l'image. Si c'est une bouteille, ton texte sera justifié en suivant les courbes de la bouteille. C'est une fonction qu'on retrouve notamment dans Pages et que je n'ai encore jamais vu ailleurs.

avatar Wolf | 

On va avoir un fichier 3x plus lourd donc aucun intérêt alors qu'on se bat pour éliminer les Ko superflus

avatar oomu | 

à résultat égal, png est meilleur que gif

c'est Mieux, c'est + puissant, c'est MIEUX, et c'est hmm.. MIEUX, quelque soit l'angle pris. Genre, économiser du courant ? png c'est mieux (le faible coût de la compression png est largement compensé par les gains en tailles)

On se bat pour éliminer le gaspillage, on a donc fait PNG. A qualité égale, png est MIEUX. Quand je dis mieux, je veux dire MEILLEUR et SUPERIEUR et PREFERABLE.

-
y a eu beaucoup de blocage pour rendre la variante animée de png populaire (lire les débats et bugs autour de mng par exemple, c'est un roman, une saga digne des plus grandes tragédies épiques, au moins)

mais ce n'est pas sans raison si dans les années 90 gif était utilisé pour des images fixes des sites webs (icônes, etc) puis rapidement balayé par png. Pas de tentative de faire payer l'usage de gif (brevets gratuits, normes ouvertes) et surtout meilleur techniquement sur tous les plans.

avatar jackhal | 

"à résultat égal, png est meilleur que gif"
parfois non.
PNG est très bien mais c'est un format complexe qui comporte plein de subtilités permettant d'améliorer son niveau de compression. Un logiciel nommé ImageOptim offre une interface graphique à des outils en ligne de commande permettant d'optimiser au mieux cette compression. MacG en a déjà parlé mais ne l'utilise visiblement pas.
Par exemple sur le logo de MacG (en haut au centre de chaque page), le poids est diminué de 12,5% sans aucune perte de qualité.

PNG supporte aussi l'alpha sur des images avec palettes. C'est très utile pour les images avec peu de couleurs où l'alpha est utilisé principalement pour avoir un antialiasing propre quel que soit le fond. Toujours avec le logo de MacG qui est en 24-bit, on peut le passer sans problème en 256 couleurs + alpha. La différence est invisible (d'autant plus que le logo est en HiDPI ou "Retina") et le poids du fichier est alors diminué de 2 tiers.

Un logiciel pour convertir simplement les PNG 24-bit en PNG avec palette + canal alpha : ImageAlpha, du même auteur que ImageOptim.
Des infos sur le support navigateur, le fonctionnement, des exemples... : http://calendar.perfplanet.com/2010/png-that-works/

avatar virgilerl | 

Je pensais que cette année . Les clients d'Apple auraient un IOS ou les icônes s'animeraient sur leurs écrans .

De même sur le nouvel OS Yosimte

avatar LeoCristal | 

@Link1993 si si cela s'anime même dans igeneration ... Mais avec ios8beta2 ;)

avatar DouceProp | 

Du coup les anim' en PNG sont beaucoup plus légères ?

avatar marc_os | 

A quoi ça sert les gifs et autres bidules animés, à part transformer des sites en sapins de Noël ?

avatar jeanba3000 | 

Ce n'est qu'un outil, il n'est pas responsable de l'usage qu'on en fait, libre à toi de faire comme d'autres pour en inventer de plus judicieux et créatifs…

C'est comme Flash, ça a donné des horreurs, mais ça a aussi donné de petits bijoux…

avatar joneskind | 

@marc_os

Le Gif permet de créer des boucles de séquence, à l'image d'un sample. Du coup tu peux t'en servir pour exprimer beaucoup de choses.

vas faire un tour sur giphy.com pour te faire une idée. Y en a pour tous les goûts.

Pour ma part, les Gifs qui bouclent sont les plus intéressants, parce qu'ils partagent ce point commun avec les phénakistiscopes (j'ai du googler pour retrouver ce mot imprononçable, mais on sait tous ce que c'est - des images dessinées sur un disque)

CONNEXION UTILISATEUR