Animées .GIF vs Spritesheet + JS/CSS
Qui met à l'échelle les meilleures performances, taille de fichier, (et ma santé mentale): Animation .gifs ou un spritesheet avec des animations à l'aide de CSS et de JS quand il le faut)?
Filesize
Donc, je suis franchement pas sûr de ce qui sera mieux ici car je ne comprends pas la compression d'images dans .gif. J'imagine qu'ils seraient environ égal si je peux le balancer à droite, mais si c'est faux, ou si c'est un facteur pour une raison différente laissez-moi savoir.
Le principal avantage ici, dans mon esprit, va à Spritesheets que je serais en mesure d'inclure des animations multiples sur une seule feuille (et on parle ici des centaines de films d'animation des sprites ici). Et basé sur l'une de mes questions précédentes, je sais que je peux facilement sortir d'une seule image dans le CSS à l'aide image-rect(). Si un .gif fichier que j'ai vraiment ne peut contenir qu'un animation puisque chacun aura probablement une durée différente.
Addendum: en outre, certains des animations répétez l'opération pour un sprite, de sorte que le spritesheet n'aurait qu'une copie de la cadres de, où en tant que .gif aurait besoin d'avoir toutes les images (au moins à ma connaissance).
De Performance
Deviner ici, encore une fois, mon intuition me dit qu'animé .gifs vont être nettement plus rapide que je n'aurai pas à gérer toutes les animations en même temps je fais beaucoup de code JS pour d'autres choses. Mais, je ne sais pas pour vous, peut-être que les navigateurs de faire un grand coup avec 30+ animé .gifs.
Ma Santé Mentale
La spritesheets sont fait pour moi, donc mon travail élevée au début (l'écriture et le moteur d'animation et de codage à la main un/chaque feuille). Mais une fois écrit, il est utilisable pour de bon, et un changement dans un spritesheet nécessite un minimum de changements de code.
D'autre part, d'animation .gif fichiers ne sont pas un gâteau pour le faire dans Photoshop (si vous en avez un meilleur programme, veuillez laissez-moi savoir). Et chacun doit être faite à la main et est un long processus. Mais, une fois qu'ils sont faits, je n'ai pas vraiment de les changer. Mon spritesheets ne sont pas susceptibles de changer très rapidement, de sorte que les chances sont qu'il sera un et fait.
Ma Question (tl;dr)
Qui se passe à l'échelle de mieux pour les centaines d'animations en termes de taille de fichier (y compris les en-tête HTTP de transfert qu'il ira sur le web), les performances dans les navigateurs modernes, et la facilité de la création (priorité la plus faible, mais si vous pouvez vous rendre mon travail plus facile, ou de discuter de cela, je vous serais reconnaissant), l'Animation .gif fichiers construit à partir des spritesheets, ou tout simplement en utilisant le CSS et le spritesheets que j'ai déjà?
Exemples
- IIRC GIFs Animés pouvez utiliser un cadre-delta de compression, ce qui (pour un sous-ensemble de toutes les animations) est susceptible de vous sauver une certaine taille globale du fichier par rapport à une feuille sprite. (Je n'ai pas de chiffres à l'arrière, mais alors tous les numéros que vous obtenez sera biaisée par l'animation de l'ensemble de données.)
- C'est vrai, mais là encore frame-compression delta en Gif est très pauvre, comme elle seule peut comprendre qu'un pixel n'a ou n'a pas changé, pas comme dans une vidéo où un pixel peut avoir un peu changé. Dans de nombreux cas, des scénarios, GIF image-delta de compression est beaucoup moins utile que, par exemple, ayant alpha opacité/24-bit couleurs de Png ou de l'efficacité de la compression des images au format Jpeg.
Vous devez vous connecter pour publier un commentaire.
Que j'étais curieux, j'ai implémenté en javascript.
JsFiddle démo (édité image d'accueil que par les commentaires).
Que j'ai trouvé:
<canvas>, SVG, WebP...Plus d'infos dans le JsFiddle page de démonstration.
Voulais juste peser sur cette. Il existe de nombreux scénarios dans lesquels vous avez de multiples animations sur une page. Dans le scénario de multiples animations sur la même page que sont interactifs. Il est préférable d'utiliser une feuille sprite CSS animations de gif. Voici mes démos:
http://clubsexytime.com/projects/eyetracker_gif/
http://clubsexytime.com/projects/eyetracker_sprite/
comme vous pouvez le voir, le sprite version gère le roll overs avec facilité, tandis que le GIF version kurchunks à l'arrêt.
Encore une fois, ce n'est qu'un scénario, mais pensé qu'il pourrait être utile. Aussi, il agit comme un bon petit bout de code.
Remercier.
Mise à jour:
Dans le temps depuis que j'ai posté, j'ai eu plus de chance d'obtenir la feuille sprite animations pour travailler dans les navigateurs. Ont navigateurs/ordinateurs amélioré, ou a été je viens de faire le mal? Je n'ai aucune idée. De toute façon, cette réponse est un peu obsolète, mais je vais le laisser ici pour des raisons historiques. Il y a de mieux, de nouvelles réponses qui sont plus pertinentes aujourd'hui.
GIFs fonctionne très bien avec l'accélération GPU, depuis l'partielle cadre des mises à jour qu'une partie des pixels besoin d'être redessiné. Contrairement à GPUless dessin, le navigateur n'a pas besoin de redessiner tous les pixels de chaque image. Avec une feuille sprite, vous êtes forçant ce dernier de toute façon, puisque vous n'êtes pas de chevauchement principalement de couches transparentes. Par conséquent, les Gif sont certainement va vous donner de meilleures performances, en particulier dans les navigateurs modernes.
GIFs, évidemment, ont l'inconvénient d'être limité à 256 couleurs, mais en fonction de votre échantillon, qui ne devrait pas être un problème. Toutefois, si vous utilisez des feuilles sprite, il va certainement devenir un problème, et vous ne serez pas en mesure d'utiliser un GIF. Cela signifie que le pire de la compression, le plus probable. Puisque vous avez de grandes zones de couleur unie, beaucoup de répétitions à l'horizontale, et peu de couleurs dans une région donnée, il vous permettra de bénéficier de GIF à la mise en œuvre de Lempel-Ziv(-Welch) de compression.
Je voudrais prendre un coup d'oeil à ceci:
http://adamducker.com/blog/7/animated-gif-for-css-sprites/
Personnellement, je pense que vous auriez du être fou pour utiliser un spritesheet, mais je suppose que ça dépend du nombre de gifs animés que vous avez à apporter sinon
Je ne sais pas ce que vos limitations, mais ici, un violon à l'aide de CSS3
step()pour animer un spritesheet:http://jsfiddle.net/simurai/CGmCe/
step(). Je n'avais pas vu ça et je vais certainement trouver que utile ailleurs. Cependant, l'article ne parle pas vraiment mon cas d'utilisation, plutôt qu'il parle à l'aide d'un spritesheet type de disposition pour l'animation de.giffichiers ont la même durée. Qui, comme je l'ai dit, le mien ne le sera pas.Gifs animés seulement vous donner binaire de transparence (un pixel est transparent ou totalement opaque). C'est pourquoi la plupart des gifs animés air mauvais sur des arrière-plans transparents parce que vous ne pouvez pas appliquer l'anticrénelage (comme votre écureuil, certains antialiasing il ferait des merveilles).
Si vous voulez avoir le format PNG-24 transparence de la qualité vous devez aller avec les sprites animés.
Aussi, animaged sprites effectue vraiment bien si vous les dessiner sur une toile. Regardez ceci: http://seb.ly/demos/bunnybench/bunnies_canvas.html
Animations Gif pouvez répéter les sprites, ils peuvent aussi utiliser partielle cadre des mises à jour, et le positionnement de la même sprite à des positions différentes. Si vous souhaitez simplement afficher un non-interactif d'animation, je dirais que les gifs animés ont tous les avantages, sauf pour la couleur, vous êtes obligé d'utiliser une palette de 256 couleurs.
Je me souviens à l'aide de Microsoft GIF Animator, qui est certainement facile à utiliser. Je ne sais rien à propos de Photoscape, mais la parole sur le net, c'est que c'est bon un peu plus lourd alternative.
Un autre problème lié à des sprites CSS, au moins dans les navigateurs actuels, est mise à l'échelle "jitter". Vous pouvez mettre à l'échelle le fichier GIF de n'importe quelle taille vous avez besoin (sans doute moins), mais si vous essayez à l'échelle de la CSS sprite de l'exécution dans la gigue en raison des erreurs d'arrondi (background-position est basé sur les coordonnées relatives, pas l'original). Si quelqu'un connaît une autre manière de régler l'échelle d'animation des sprites, ce serait génial de savoir.
ImageMagick fait un excellent travail de création de GIFs animés ou des sprites.
Si vous parlez des centaines de sprites, puis aller avec .gif. Le plus complexe de l'animation, les animations plus il est élevé, plus la charge sur le navigateur depuis plus de ressources seront utilisées pour le rendu de l'animation "diapositive" plutôt que de simplement laisser l'animation .gif lui-même jouer.
Cela devient pire quand vous prenez en compte la compatibilité inter-navigateur où, comme toujours, c'est à dire ne parvient pas grand temps. Je n'ai jamais vu un site d'étranglement sur les lots de petite taille .gifs mais je vois des sites d'étranglement sur javascript simple tout le temps. Je ne peux qu'imaginer à quel point il serait d'obtenir avec des centaines de css/js, images animées retournement de tous les temps.
Si vous n'avez pas l'esprit de me demander, quel genre de site sont ces animations signifiait pour? Est-il une sorte d'animations portefeuille ou...?