Animation .GIF vs Spritesheet + JS/CSS
Qu'est-ce qui convient le mieux aux performances, à la taille du fichier (et à ma santé mentale): .gifs animé ou une feuille de calcul avec des animations utilisant CSS (et JS si besoin est)?
Taille du fichier
Donc, honnêtement, je ne sais pas ce qui sera le mieux ici car je ne comprends pas la compression des images dans .gif. J'imagine qu'ils finiraient à peu près au même niveau si je pouvais bien faire les choses, mais si c'est faux ou si c'est un facteur pour une raison différente, faites-le-moi savoir.
Le principal avantage ici, dans mon esprit, va à Spritesheets car je pourrais inclure plusieurs animations sur une seule feuille (et nous parlons ici de centaines de sprites animés). Et sur la base de une de mes questions précédentes , je sais que je peux facilement extraire un seul cadre en CSS en utilisant image-rect(). Où, comme pour un fichier .gif, je ne peux vraiment inclure qu’une animation, car chacune d’elles aura probablement une durée différente.
Addendum: De plus, certaines animations se répètent pour un Sprite donné, de sorte que la feuille de sprites ne devrait avoir qu'une copie des images, alors qu'un .gif devrait avoir toutes les images (du moins à ma connaissance) .
Performance
Mon intuition me dit encore une fois que les .gif animés vont être beaucoup plus rapides, car je n'aurai pas à gérer toutes les animations en même temps. Je fais beaucoup de code JS pour autre chose. Mais, je ne le sais pas avec certitude, les navigateurs sont peut-être frappés de plein fouet avec plus de 30 .gifs animés.
Ma santé mentale
Les feuilles de travail sont faites pour moi, mon travail serait donc élevé au début (moteur d’écriture et d’animation et codage manuel d’une feuille à la fois). Mais une fois écrit, il est utilisable pour de bon et un changement dans un tableur nécessite peu de modifications du code.
D'autre part, les fichiers .gif animés ne sont pas un gâteau à faire dans Photoshop (si vous avez un meilleur programme, s'il vous plaît faites le moi savoir). Et chacun doit être fabriqué à la main et est un long processus. Mais, une fois qu'elles sont fabriquées, je n'ai pas vraiment besoin de les changer. Mes feuilles de sprites ne risquent pas de changer très rapidement, alors il y a de fortes chances pour que ce soit une feuille terminée.
Ma question (tl; dr)
Ce qui va mieux s’adapter aux centaines d’animations en termes de taille de fichier (y compris le transfert d’en-têtes HTTP comme il est transmis sur le Web), les performances des navigateurs modernes et la facilité de création (priorité la plus basse, mais si vous pouvez faciliter mon travail) , ou argumenter à cela, je vous en serais reconnaissant), des fichiers .gif animés construits à partir de feuilles de sprites, ou tout simplement en utilisant CSS et les feuilles de sprites que j'ai déjà?
Exemples
CONTRE 
Comme j'étais curieux, je l'ai implémenté en javascript.
JsFiddle demo (hôte image modifié selon les commentaires).
Ce que j'ai découvert:
- Ça marche! Et mieux que prévu.
- L'utilisation du processeur est en fait faible (je ne l'ai pas testé dans un dinosaure IE6 et je suis sûr que des correctifs seraient nécessaires).
- La taille peut être coupée et/ou la qualité peut être augmentée de manière significative (en fonction de la source).
- Contrairement au concept de Mikey G. , cela fonctionne même si vous effectuez un zoom avant/arrière (essayez-le dans les deux).
- Il permet une durée de trame variable comme un gif.
- Avec plus de travail, il pourrait même avoir une API semblable à celle du lecteur (pause/reprise, avance rapide, saut, etc.).
- Exploite les autres formats: PNG alpha 8 bits, JPEG progressif,
<canvas>, SVG, WebP ...
Plus d'infos sur la page de démonstration de JsFiddle.
Je voulais juste intervenir à ce sujet. Il existe de nombreux scénarios dans lesquels vous avez plusieurs animations sur une page. Dans le cas où plusieurs animations sur la même page sont interactives. Il vaut mieux utiliser une feuille Sprite avec des animations CSS que des gifs. Voici mes démos:
http://clubsexytime.com/projects/eyetracker_gif/
http://clubsexytime.com/projects/eyetracker_Sprite/
comme vous pouvez le constater, la version Sprite gère les roll-ups avec facilité tandis que la version basée sur GIF s'arrête complètement.
Encore une fois, ce n’est qu’un scénario, mais je pense que cela pourrait être utile. En outre, il agit comme un bon extrait de code.
Remercier.
Mettre à jour:
Depuis que j'ai posté ceci pour la première fois, j'ai eu plus de chance que les animations de feuilles de Sprite fonctionnent dans les navigateurs. Est-ce que les navigateurs/ordinateurs ont été améliorés ou est-ce que je me trompais tout simplement? Je n'ai aucune idée. Quoi qu'il en soit, cette réponse est un peu obsolète, mais je la laisse ici pour des raisons historiques. Il existe de meilleures réponses plus récentes qui sont plus pertinentes aujourd'hui.
Les GIF fonctionnent assez bien avec l'accélération GPU, car les mises à jour partielles des images signifient que seuls quelques pixels doivent être redessinés. Contrairement au dessin sans GPU, le navigateur n'a pas à redessiner tous les pixels de chaque image. Avec une feuille Sprite, vous forcez de toute façon cette dernière, car vous ne chevauchez pas les couches les plus transparentes. Par conséquent, les GIF vont certainement vous donner de meilleures performances, en particulier dans les navigateurs modernes.
Les GIF ont évidemment l'inconvénient d'être limités à 256 couleurs, mais d'après votre exemple, cela ne devrait pas être un problème. Cependant, si vous utilisez des feuilles Sprite, cela deviendra certainement un problème et vous ne pourrez pas utiliser de fichier GIF. Cela signifie probablement pire compression. Étant donné que vous avez de grandes zones de couleur unie, de nombreuses répétitions horizontalement et peu de couleurs dans une zone donnée, vous bénéficierez grandement de la mise en œuvre par GIF de Lempel-Ziv (-Welch) compression.
Je regarderais ceci:
http://adamducker.com/blog/7/animated-gif-for-css-sprites/
Personnellement, je pense que vous seriez fou d'utiliser une feuille de correspondance, mais je suppose que cela dépend du nombre de gifs animés que vous devrez apporter autrement
Je ne sais pas quelles sont vos limites, mais voici un violon utilisant CSS3 step() pour animer une feuille de sprite:
Les gifs animés ne vous donnent qu'une transparence binaire (un pixel est transparent ou totalement opaque). C'est pourquoi la plupart des gifs animés ont une apparence médiocre sur des arrière-plans transparents, car vous ne pouvez pas appliquer d'antialiasing (comme votre écureuil, un antialiasing pourrait faire des merveilles).
Si vous voulez avoir une qualité de transparence PNG-24, vous devez utiliser des sprites animés.
En outre, les sprites animés fonctionnent vraiment bien si vous les dessinez sur une toile. Regardez ceci: http://seb.ly/demos/bunnybench/bunnies_canvas.html
Un autre problème lié aux sprites CSS, du moins dans les navigateurs actuels, concerne la "jitter". Vous pouvez redimensionner le fichier GIF à la taille dont vous avez besoin (probablement plus petit), mais si vous essayez de redimensionner le Sprite CSS, vous êtes gêné par des erreurs d'arrondi (la position de l'arrière-plan est basée sur les coordonnées mises à l'échelle et non sur l'original). Si quelqu'un connaît une autre façon de gérer les sprites animés à l'échelle, ce serait bien de le savoir.
ImageMagick fait un excellent travail en créant des GIF animés ou des sprites.
Les animations GIF peuvent répéter des images-objets, elles peuvent également utiliser des mises à jour partielles d'images et positionner le même image-objet à différentes positions. Si vous souhaitez simplement afficher une animation non interactive, je dirais que les gifs animés présentent tous les avantages, à l'exception de la couleur, vous êtes obligé d'utiliser une palette de 256 couleurs.
Je me souviens d’utiliser Microsoft GIF Animator , qui est certainement facile à utiliser. Je ne sais rien de Photoscape , mais Word sur le net nous a dit que c’était une bonne alternative un peu plus lourde.
Si vous parlez de centaines de sprites, choisissez alors .gif. Plus l'animation est complexe, plus il y a d'animations, plus la charge de travail du navigateur est importante, car davantage de ressources seront utilisées pour rendre l'animation «diapositive par diapositive» plutôt que de laisser simplement le fichier .gif animé jouer.
Cela empire lorsque vous prenez en compte la compatibilité entre navigateurs où, comme toujours, IE échoue trop souvent. Je n'ai jamais vu un site s'étouffer avec beaucoup de petits fichiers .gifs, mais je vois des sites s'étouffer avec du javascript simple tout le temps. Je ne peux qu’imaginer à quel point il serait désagréable de voir des centaines d’images animées css/js basculer tout le temps.
Si vous me permettez de demander, à quel type de site ces animations sont-elles destinées? Est-ce une sorte de portfolio d'animations ou ...?