APNG : animation PNG
Avec le regain d'intérêt que suscite le gif animé, notamment depuis son intégration réussie sur Twitter et Facebook, j'en profite pour évoquer le format de Mozilla : l'APNG. Autrement dit du PNG animé.
La différence avec le gif animé ? Je vous épargne les termes techniques et vous propose de regarder les deux animations ci-dessous :
Vous l'aurez sans aucun doute remarqué, la première image est en PNG. L'avantage évident est la qualité de celle-ci. L'inconvénient est que celle-ci est (légèrement) plus lourde par rapport au format gif. Mais c'est surtout le manque cruel de compatibilité qui fait que l'APNG ne rencontre pas le succès escompté.
La grande tendance depuis (au moins) 2015, c'est de réaliser des gif animés à partir d'une vidéo. Comme c'est assez simple à créer , on peut donc en trouver à foison sur certains sites, blogs et réseaux sociaux.
Ci-dessous, un gif créé à partir d'une vidéo (une des nombreuses scènes mythiques du meilleur film jamais réalisé The Big Lebowski ) :
L'intérêt de ce genre d'animation est d'illustrer un propos ou de renforcer un argument. Mais attention à ne pas en abuser. Une ou deux animations gif sur une page est tout à fait acceptable et peut rendre l'ensemble encore plus pertinent.
Autre exemple bien pratique : le loading. Un petit tour sur preloaders.net...
Et voici le résultat :
Source, inspiration, ressources :
Vérifiez la compatibilité de l'APNG.
Si vous naviguez avec Chrome ou Opera, il vous faudra télécharger un add-on.
Pour créer vos propres APNG : littlesvr.ca ou gifmaker.me ou encore gifgenerator .
Source personnage du personnage qui marche.
Voir aussi sur ce blog un exemple sur les animations CSS avec sprite (c'est le même principe utilisé pour l'exemple du personnage qui marche).
Vous pouvez également vous tourner vers le SVG.
Vous rencontrez un problème avec ce tutoriel ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.