Image animé, gif, apng ou svg ?

Hello tout le monde !

Je bosse actuellement sur un site ou j'ai réalisé une petite anim en js, mais le temps que tous mes éléments se chargent, je fais apparaitre un petit loader très simple pour faire patienter l'internaute.
C'est à partir de la que j'ai commencé à me poser quelques questions.

Mon animation n'est pas sur un fond uni, ce qui rend l'utilisation d'un loader.gif délicate car le rendu est vraiment immonde.. Je me suis donc penché sur les alternatives que j'avais à savoir les formats récents.

Le SVG est interéssant car supporté jusqu'à IE9 (http://caniuse.com/#search=svg), mais il ne pourra pas du tout être animé sur IE en général (pour un loader c'est un peu balo quand même..) et devient instable pour sur les vieilles versions d'IE. De ce que j'ai pu testé, il tire pas mal de ressource auprès du processeur et ne s'anime pas immédiatement, il doit lui falloir un petit temps d'initialisation..
Bref, au final ce format ne me semble pas très optimal pour un loader même si ça reste très agréable de pouvoir le modifier directement par le code.

Le APNG lui est beaucoup plus séduisant, une image propre et assez légère mais le soucis est encore une fois la compatibilité.. http://caniuse.com/#search=apng Géré seulement par Firefox et Safari, même Chrome ne l'a pas (encore ?) implémenté. Même si sur les navigateurs qui ne supporte pas ce format il s'affiche quand même en statique, une fois de plus un loader statique, ce n'est pas génial, mais au moins lui, il s'affiche.

Il y a aussi le SWF, mais est ce bien pertinent ? Je ne pense pas et inutile de vous parler du gif, j'imagine que tout le monde connait et utilise déjà plus ou moins ça.

Bref ! Parmi tous ces formats j'ai du mal à choisir mon camp, le client voulant toujours une compatibilité IE8 (au moins), les nouveaux formats ne sont (selon moi) pas vraiment adaptés à cet usage et le vénérable et ancestral gif renvoie un résultat dégueulasse sur les fonds non unis.
J'ouvre donc un topic pour savoir ce que vous, webdesigners / developpeurs web, préconisez comme solution à l'heure actuelle et pour l'avenir comme format d'image pour des petits loader.

Merci d'avance à ceux qui donneront leur avis !
Modifié par ganondorf150 (11 Sep 2013 - 15:38)

Bonjour,

Tes liens ne fonctionnent pas

Je déplace ta discussion dans le salon des questions générales puisqu'il n'a rien à voir avec l'accessibilité

Une solution : http://fgnass.github.io/spin.js/
(c'est plus léger que le gif)

Oui je connais spin.js mais comme je l'ai dit c'est pour un petit loader et embarquer une librairie js me semble un peu violent comme solution par rapport à une image, mais c'est sur que c'est une alternative.

J'avais posté dans le forum accessibilité car pour moi c'est ce dont il est plus ou moins question ici, faire une image qui soit à la fois de qualité par son format et lisible par un maximum de navigateur, donc accessible à un maximum d'internautes. Après, si tu as déplacé c'est surement que je ne dois pas avoir la même définition de l'accessibilité, je vais me documenter un peu car c'est vrai que c'est un peu flou pour moi.

ganondorf150 a écrit :
Après, si tu as déplacé c'est surement que je ne dois pas avoir la même définition de l'accessibilité, je vais me documenter un peu car c'est vrai que c'est un peu flou pour moi.

Oui en effet, l'accessibilité est un autre domaine que celui de la compatibilité / interopérabilité.
L'accessibilité concerne les handicaps et déficiences.

As tu regardé aussi de ce coté:
Il y a aussi la technique des sprites , un peu de js pour modifier le background-position à intervalles régulier pour ceux qui ne supporte pas les transitions CSS.
Compatible avec un maximum de navigateur, mais si png , il faudra quand même servir un gif au vieux IE si tu veut les 'supporter' .

Raphael a écrit :

Oui en effet, l'accessibilité est un autre domaine que celui de la compatibilité / interopérabilité.
L'accessibilité concerne les handicaps et déficiences.

En effet, ce n'est pas tout à fait pareil, autant pour moi alors. ^^

gc-nomade a écrit :

As tu regardé aussi de ce coté:
Il y a aussi la technique des sprites , un peu de js pour modifier le background-position à intervalles régulier pour ceux qui ne supporte pas les transitions CSS.
Compatible avec un maximum de navigateur, mais si png , il faudra quand même servir un gif au vieux IE si tu veut les 'supporter' .

Oui j'ai regardé de ce côté la aussi, faire un loader en CSS implique d'utiliser le CSS3 pour avoir un truc correct et le CSS3 n'est pas plus cross browser que le reste.. Et rajouter du js, je l'ai envisagé aussi mais bon je cherche une méthode plus simple en ayant juste à implémenter une image dans un format adéquat.