Which image format to use for sprites in an HTML5 game?

Question

In a 2D HTML5 game, what is the best image format to use and why? Should I use different formats in different situations? For example, .png for the background image, .jpeg for the animation frames and so on...

The "why" part is important to me. It doesn't really have to be localized to HTML5, it can be general advice as well.

Answer 1

The image format is only a way to save raw data of pixels, so as long as you use bitmaps, the format usually does not make a difference in execution after the loading step. What matters is the pixel data supplied to the graphics API. There are three formats commonly used in the web:

.gif The (now normally deprecated) GIF format is used for images with 256 colors or less, leading to a very small size. GIF is also often used for animations. When using only 256 or less colors, it is a lossless format, which means that no quality is lost in term of compression. Otherwise the color variety has to be shriked down to 256, leading to quality reduction.

.png The Portable Network Graphics format is, as I think, the most used image format at all, since it comes with a good compression rate while being able to save more colors than GIF. PNG is also capable of translucency (or commonly called transparency, which is the wrong name since a pixel has to be 100% translucent to be called transparent). It is also a lossless format and aimed to improve and replace GIF in 2006 (source, first paragraph). I personally use it as an image type on websites and in games.

.jpeg The JPEG format is commonly used for photos and that stuff. It is not capable of translucency, nor does it gurantee lossless compression. It is common to specify the quality when compressing, leading to a tradeoff between space and quality.

Let's go through some use cases:

• Artworks or generally complex art is good to be saved in the JPEG format, as it is designed for that type of images.
• Sprites are best to be saved in PNG, especially when the variety of color is low.
• It is hard to define what Backgrounds should be saved in. The general rule would be something like: If it's a picture or complex art involving a high variety of color, take JPEG, otherwise PNG.
• An Icon should probably be a PNG image, even if it uses less than 256 colors, since GIF is, as stated above, replaced by PNG.

Bear in mind that the memory consumption and performance of the graphics API is usually equal between those formats. What matters is size and loading speed (you can dive into the algorithms of these formats if you want to estimate the loading cost). The memory consumption of any image in the raw state is usually defined by the general rule width*height*4 byte for an RGBA pixel format, which is the most common.

Answer 2

Just a couple of things to add to @Marco's answer:

.gif is sorely outdated. I would completely avoid using .gif files as much as possible. I think people only use them these days because of in-browser animations, and animated png's aren't well supported at this time.

So all you have is jpg and png.

• PNG: Is lossless. The only thing you are considering here is the rate of compression you get. Generally does a good job compressing blocks of solid color, but a bad job compressing scenes with a lot of variation.

• JPG: Does a horrendous job with blocks of solid color (both loses detail and takes more space than png) but a great job with pictures with a lot of variation (good compression, almost unnoticeable image quality loss).

For example

4Kb Megaman, in PNG format:

This same picture is 36Kb in JPG

And the detail loss (that comes FREE! with jpg compression)

So here, with the solid blocks of color image, we lose detail and incur additional size by using JPG. Conclusion: don't use jPG for images with large blocks of solid color.

Now, think about a high color scene:

1.63 MB PNG:

The 277 k JPG:

approximate losses (i used jpg to upload this! but it shows you the losses

So in sum

• Use PNG for images with blocks of solid color, ie NES-style sprites.
• Use JPG for images with lots of variation in color. This is like, any other image, especially backgrounds.

Answer 3

Let us further abstract the question, then:

In a game running on its designated platform, what are the considerations for the media that it makes use of?

Consideration #1: size, aka speed of loading

No matter the platform and no matter the game and no matter the type of media, the fact is that it needs to be brought into a context for rendering. On a web based platform, this means downloading. On a desktop environment or console, it means loading from a local storage media. Loading your media takes time. Web based platforms can be especially crippled if a lot of media needs to be downloaded over a slow connection.

Consideration #2: memory consumption

Related to, but not the same as size. A pieces of media may be compressed while on disk or in a package or whatever, but once it is loaded as a texture or sound buffer for something it may be quite a bit bigger. The device upon which your game is executing does not have an infinite amount of memory.

Consideration #3: quality and style

Is the media of sufficient quality? This can be crucial to your game, and is often at odds with the size consideration. Very often a balance is needed between the two. Some games have incredibly simple graphics (minecraft) and yet are very successful. Others have really awesome graphics that take up gobs and gobs of memory, but give an immersive quality with amazing looking backgrounds. Some games get away with blips and bloops for sound effects, while others need to have 41k stereo music.

So, based on which is most important, you make the right decision for your game. The decision is per game, not one size fits all.

Answer 4

Generally, you go for the smallest filesize that still provides an acceptable quality of image. Additionally, png supports alpha so you don't need to deal with additional images to handle an alpha layer.

What/when to use png for (generally speaking):

• when you need to use an alpha layer
• cartoonish images/vector-like images that you want to preserve the sharp lines of.
• images with a small amounts of colors

PNG is lossless, but the color depth can be changed.

Use jpg for the remaining cases - photographic images, paintings, pictures with a lot of small details, colors and gradients. If you try to use PNG to store these images you'll notice the filesize is a lot larger than the jpg.

Tools like adobe image ready will give you a preview of your image along with the filesize in a variety of formats and quality settings.