APNG : animation PNG

🏠Accueil blog » Astuces tutoriels CSS

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 :

Animation PNG
Animation GIF

✔️ Support navigateurs :

Vous l'aurez sans aucun doute remarqué, l'image de gauche est en PNG. L'avantage évident est la qualité de l'image. 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é.

Moi qui pensais (naïvement) qu'un jour on ne verrait plus ces petites images moches pulluler les sites web, il faut bien avouer que le gif animé a su se renouveler. Grâce notamment au flat design et plus généralement à la qualité et la créativité toujours plus grandes des graphistes.

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 :

Animation GIF à partir d'une vidéo

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.

Voir aussi sur ce blog un exemple sur les animations CSS3 avec sprite (c'est le même principe utilisé pour l'exemple du personnage qui marche).

Vous pouvez également vous tourner vers le SVG.

Voir d'autres astuces →