css - sprites - sprite sheet generator

Animado.GIF vs Spritesheet+JS/CSS

Question

¿Cuál escalará mejor para el rendimiento, el tamaño del archivo (y mi cordura): .gif s animados o una hoja de sprites con animaciones usando CSS (y JS cuando sea necesario)?

Tamaño del archivo

Entonces, honestamente no estoy seguro de cuál será mejor aquí ya que no entiendo la compresión de los marcos en .gif . Mi conjetura sería que ellos terminarán siendo iguales si puedo hacerlo bien, pero si esto está mal, o si es un factor por una razón diferente, hágamelo saber.

La principal ventaja aquí, en mi opinión, va a Spritesheets ya que podría incluir múltiples animaciones en una sola hoja (y estamos hablando de cientos de sprites animados aquí). Y basándome en una de mis preguntas anteriores , sé que puedo extraer fácilmente un solo cuadro en CSS usando image-rect() . Donde al igual que con un archivo .gif solo puedo incluir una animación, ya que cada una tendrá una duración diferente.

Anexo: Además, algunas de las animaciones se repiten para un sprite determinado, por lo que la hoja de cálculo solo tendría que tener una copia de los marcos, donde un .gif tendría que tener todos los marcos (al menos que yo sepa).

Actuación

Adivinando aquí de nuevo, mi intuición me dice que los .gif animados van a ser significativamente más rápidos ya que no tendré que administrar todas las animaciones al mismo tiempo que estoy haciendo mucho código JS para otras cosas. Pero, no lo sé con seguridad, tal vez los navegadores tengan un éxito significativo con más de 30 .gif s animados.

Mi sanidad

Los spritesheets están hechos para mí, por lo que mi trabajo sería alto al principio (motor de escritura y animación y codificación manual de una / cada hoja). Pero una vez escrito, es utilizable para siempre y un cambio en una hoja de cálculo requiere cambios mínimos en el código.

Por otro lado, los archivos .gif animados no son un pastel para hacer en Photoshop (si tiene un programa mejor, hágamelo saber). Y cada uno debe ser hecho a mano y es un proceso largo. Pero, una vez que están hechos, realmente no tengo que cambiarlos. No es probable que mis hojas de cálculo cambien muy rápidamente, por lo que es probable que sea una y ya está.

Mi pregunta (tl; dr)

Que va a escalar mejor a los cientos de animaciones en términos de tamaño de archivo (incluida la transferencia de encabezado HTTP, ya que irá a través de la web), el rendimiento en los navegadores modernos y la facilidad de creación (prioridad más baja, pero si puede facilitar mi trabajo) , o discute esto, estaría agradecido), ¿Archivos .gif animados creados a partir de hojas de cálculo, o simplemente usando CSS y las hojas de cálculo que ya tengo?

Ejemplos

VS

Answer 1

Como tenía curiosidad, lo implementé en javascript.

Demostración de JsFiddle (host de imagen editada según comentarios).

Lo que descubrí:

• ¡Funciona! Y mejor de lo esperado.
• El uso de la CPU es realmente bajo (no lo probé en dinosaurios IE6 y estoy seguro de que requeriría "arreglos").
• El tamaño se puede cortar, y / o la calidad se puede aumentar significativamente (depende de la fuente).
• A diferencia del concepto de Mikey G. , esto funciona incluso si te acercas / alejas (pruébalo en ambos).
• Permite la duración variable del cuadro al igual que un gif.
• Con más trabajo, incluso podría tener una API similar a la de un jugador (pausa / reanudación, avance rápido, salto, etc.).
• Aprovecha otros formatos: PNG alfa de 8 bits, JPEG progresivo, <canvas> , SVG, WebP ...

Más información en la página de demostración de JsFiddle.

Answer 2

Echaría un vistazo a esto:

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

Personalmente creo que estarías loco por usar una hoja de sprites, pero supongo que depende de cuántos gifs animados tengas que traer de otra manera

No sé cuáles son sus limitaciones, pero aquí hay un violín que usa el step() CSS3 step() para animar una hoja de sprites:

http://jsfiddle.net/simurai/CGmCe/

Answer 3

Las animaciones GIF pueden repetir sprites, también pueden usar actualizaciones de fotogramas parciales y posicionar el mismo sprite en diferentes posiciones. Si simplemente quieres mostrar una animación no interactiva, diría que los gifs animados tienen todas las ventajas, excepto el color, estás obligado a usar una paleta de 256 colores.

Recuerdo que usé Microsoft GIF Animator , que ciertamente es fácil de usar. No sé nada sobre Photoscape , pero la palabra en la red es que es una buena alternativa un poco más pesada.

Answer 4

Los gifs animados solo te dan transparencia binaria (un píxel es transparente o totalmente opaco). Es por eso que la mayoría de los gifs animados se ven mal en los fondos transparentes porque no puedes aplicar el antialiasing (como tu ardilla, algunos antialiasing podrían hacer maravillas).

Si quieres tener una calidad de transparencia PNG-24 tienes que ir con sprites animados.

Además, los sprites animados funcionan muy bien si los dibujas en un lienzo. Mira esto: http://seb.ly/demos/bunnybench/bunnies_canvas.html

Answer 5

Otro problema relacionado con los sprites de CSS, al menos en los navegadores actuales, es escalar "jitter". Puede escalar el archivo GIF a cualquier tamaño que necesite (presumiblemente más pequeño), pero si intenta escalar el sprite CSS, se ejecuta el jitter debido a errores de redondeo (la posición de fondo se basa en las coordenadas escaladas, no en el original). Si alguien conoce otra forma de manejar sprites animados a escala, sería bueno saberlo.

ImageMagick hace un gran trabajo de crear GIF animados o sprites.

Answer 6

Sólo quería sopesar esto. Hay muchos escenarios en los que tienes múltiples animaciones en una página. En el escenario de tener múltiples animaciones en la misma página que son interactivas. Es mejor usar una hoja de sprites con animaciones CSS que los gifs. Aquí están mis demos:

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

Como puede ver, la versión de sprite maneja los roll overs con facilidad mientras que la versión basada en GIF se detiene.

Una vez más, este es solo un escenario, pero pensó que podría ser útil. También actúa como un buen fragmento de código.

Gracias.

Answer 7

Si estás hablando de cientos de sprites, ve con .gif. Cuanto más compleja sea la animación, cuantas más animaciones haya, mayor será la carga en el navegador, ya que se utilizarán más recursos para renderizar la animación ''diapositiva a diapositiva'' en lugar de simplemente dejar que se reproduzca el .gif animado.

Esto empeora cuando se tiene en cuenta la compatibilidad entre navegadores, donde, como siempre, IE falla a la perfección. Nunca he visto que un sitio se ahogue con un montón de pequeños .gifs, pero veo que los sitios se ahogan con un simple javascript todo el tiempo. Solo puedo imaginar lo mal que se pondría con cientos de imágenes animadas css / js volteando todo el tiempo.

Si no te importa que pregunte, ¿para qué tipo de sitio están destinadas estas animaciones? ¿Es algún tipo de cartera de animaciones o ...?

Answer 8

Actualizar:

Desde el momento en que publiqué esto por primera vez, tuve mejor suerte al conseguir que las animaciones de hojas de sprites funcionaran en los navegadores. ¿Han mejorado los navegadores / computadoras, o simplemente lo estaba haciendo mal? No tengo idea. De cualquier manera, esta respuesta es un poco obsoleta, pero la dejaré aquí para propósitos históricos. Hay respuestas mejores y más nuevas que son más relevantes hoy.

Los GIF funcionan bastante bien con la aceleración de la GPU, ya que las actualizaciones de fotogramas parciales significan que solo se necesita volver a dibujar una parte de los píxeles. A diferencia del dibujo sin GPU, el navegador no tiene que volver a dibujar todos los píxeles en cada cuadro. Con una hoja de sprites, estás forzando a este último de todos modos, ya que no estás superponiendo capas mayormente transparentes. Por lo tanto, los GIF definitivamente te darán un mejor rendimiento, especialmente en los navegadores modernos.

Los GIF obviamente tienen el inconveniente de estar limitados a 256 colores, pero según su muestra, eso no debería ser un problema. Sin embargo, si usa hojas de sprites, ciertamente se convertirá en un problema y no podrá usar un GIF. Esto significa peor compresión, lo más probable. Dado que tiene grandes áreas de color sólido, mucha repetición horizontal y pocos colores en un área determinada, se beneficiará enormemente de la implementación de compresión de Lempel-Ziv(-Welch) .