¿Qué formato de imagen usar para sprites en un juego HTML5?

En un juego HTML5 2D, ¿cuál es el mejor formato de imagen para usar y por qué? ¿Debo usar diferentes formatos en diferentes situaciones? Por ejemplo, .png para la imagen de fondo, .jpeg para los cuadros de animación, etc.

La parte del "por qué" es importante para mí. Realmente no tiene que estar localizado en HTML5, también puede ser un consejo general.

El formato de imagen es solo una forma de guardar datos brutos de píxeles, por lo que siempre que use mapas de bits, el formato generalmente no hace una diferencia en la ejecución después del paso de carga. Lo importante son los datos de píxeles suministrados a la API de gráficos. Hay tres formatos comúnmente utilizados en la web:

.gif El formato GIF (ahora normalmente obsoleto) se usa para imágenes con 256 colores o menos, lo que lleva a un tamaño muy pequeño. GIF también se usa a menudo para animaciones. Cuando se usan solo 256 o menos colores, es un formato sin pérdidas, lo que significa que no se pierde calidad en términos de compresión. De lo contrario, la variedad de color debe reducirse a 256, lo que lleva a una reducción de calidad.

.png El formato de Gráficos de red portátiles es, en mi opinión, el formato de imagen más utilizado, ya que viene con una buena tasa de compresión y permite guardar más colores que GIF. PNG también es capaz de translucidez (o comúnmente llamada transparencia, que es el nombre incorrecto ya que un píxel debe ser 100% translúcido para ser llamado transparente). También es un formato sin pérdidas y tiene como objetivo mejorar y reemplazar GIF en 2006 ( fuente , primer párrafo). Personalmente lo uso como un tipo de imagen en sitios web y en juegos.

.jpeg El formato JPEG se usa comúnmente para fotos y esas cosas. No es capaz de translucidez, ni garantiza la compresión sin pérdida. Es común especificar la calidad al comprimir, lo que lleva a una compensación entre espacio y calidad.

Veamos algunos casos de uso:

• Las obras de arte o, en general, obras de arte complejas son buenas para guardarlas en formato JPEG, ya que están diseñadas para ese tipo de imágenes.
• Es mejor guardar los sprites en PNG, especialmente cuando la variedad de colores es baja.
• Es difícil definir en qué fondos se deben guardar. La regla general sería algo así como: si es una imagen o un arte complejo que involucra una gran variedad de colores, tome JPEG, de lo contrario PNG.
• Un icono probablemente debería ser una imagen PNG, incluso si usa menos de 256 colores, ya que GIF, como se indicó anteriormente, se reemplaza por PNG.

Tenga en cuenta que el consumo de memoria y el rendimiento de la API de gráficos generalmente es igual entre esos formatos. Lo que importa es el tamaño y la velocidad de carga (puede sumergirse en los algoritmos de estos formatos si desea estimar el costo de carga). El consumo de memoria de cualquier imagen en estado sin width*height*4formato generalmente se define mediante el byte de regla general para un formato de píxel RGBA, que es el más común.

Solo un par de cosas para agregar a la respuesta de @ Marco:

.gif está muy desactualizado. Evitaría por completo el uso de archivos .gif tanto como sea posible. Creo que la gente solo los usa en estos días debido a las animaciones en el navegador, y los png animados no están bien soportados en este momento.

Entonces todo lo que tienes es jpg y png.

• PNG: no tiene pérdidas . Lo único que está considerando aquí es la tasa de compresión que obtiene. En general, hace un buen trabajo al comprimir bloques de color sólido , pero un mal trabajo al comprimir escenas con mucha variación.

• JPG: hace un trabajo horrendo con bloques de color sólido (ambos pierden detalles y ocupan más espacio que PNG) pero un gran trabajo con imágenes con mucha variación (buena compresión, pérdida de calidad de imagen casi imperceptible).

Por ejemplo

4Kb Megaman, en formato PNG:

Esta misma imagen es 36Kb en JPG

Y la pérdida de detalles (¡eso viene GRATIS! Con compresión jpg)

Entonces, aquí, con los bloques sólidos de imagen en color, perdemos detalles e incurrimos en un tamaño adicional al usar JPG . Conclusión: no use jPG para imágenes con grandes bloques de color sólido.

Ahora, piense en una escena de alto color:

1.63 MB PNG:

Los 277 k JPG:

pérdidas aproximadas (¡usé jpg para subir esto! pero te muestra las pérdidas

En suma

• Use PNG para imágenes con bloques de color sólido, es decir, sprites de estilo NES .
• Use JPG para imágenes con mucha variación en el color. Esto es como cualquier otra imagen, especialmente fondos .

Resumamos aún más la pregunta, entonces:

En un juego que se ejecuta en su plataforma designada, ¿cuáles son las consideraciones para los medios que utiliza?

Consideración n. ° 1: tamaño, es decir, velocidad de carga

No importa la plataforma ni el juego, ni el tipo de medio, el hecho es que debe ponerse en un contexto para la representación. En una plataforma basada en web, esto significa descargar. En un entorno de escritorio o consola, significa cargar desde un medio de almacenamiento local. Cargar sus medios lleva tiempo. Las plataformas basadas en la web pueden quedar especialmente paralizadas si es necesario descargar muchos medios a través de una conexión lenta.

Consideración # 2: consumo de memoria

Relacionado con, pero no es lo mismo que el tamaño. Se pueden comprimir piezas de medios mientras están en el disco o en un paquete o lo que sea, pero una vez que se carga como una textura o un búfer de sonido para algo, puede ser un poco más grande. El dispositivo en el que se ejecuta tu juego no tiene una cantidad infinita de memoria.

Consideración # 3: calidad y estilo

¿Los medios son de suficiente calidad? Esto puede ser crucial para su juego, y a menudo está en desacuerdo con la consideración del tamaño. Muy a menudo se necesita un equilibrio entre los dos. Algunos juegos tienen gráficos increíblemente simples (Minecraft) y, sin embargo, tienen mucho éxito. Otros tienen gráficos realmente impresionantes que absorben grandes cantidades de memoria, pero brindan una calidad envolvente con fondos de aspecto increíble. Algunos juegos se saltan con blips y bloops para efectos de sonido, mientras que otros necesitan tener música estéreo de 41k.

Entonces, según lo más importante, tomas la decisión correcta para tu juego. La decisión es por juego, no una talla para todos.

En general, opta por el tamaño de archivo más pequeño que aún proporciona una calidad de imagen aceptable. Además, png admite alfa, por lo que no necesita tratar con imágenes adicionales para manejar una capa alfa.

Para qué / cuándo usar png (en general ):

• cuando necesitas usar una capa alfa
• imágenes de dibujos animados / imágenes vectoriales que desea preservar las líneas definidas.
• imágenes con pequeñas cantidades de colores

PNG no tiene pérdidas, pero la profundidad de color se puede cambiar.

Use jpg para los casos restantes: imágenes fotográficas, pinturas, imágenes con muchos pequeños detalles, colores y degradados. Si intenta usar PNG para almacenar estas imágenes, notará que el tamaño del archivo es mucho más grande que el jpg.

Herramientas como adobe image ready le darán una vista previa de su imagen junto con el tamaño del archivo en una variedad de formatos y configuraciones de calidad.