Performance: Optimize Images

Recently I answered a question regarding improving the performance of a web game on stack overflow(link).
I thought I take up this topic end add a bit more details.

Image Formats

There are different image formats which have different impact on performance. Depending on what you want to achieve, one or the other image is better for you and you could create a performance gain:

• PNG:
  • Lossless(doesn’t lose pixel details)
  • Large color palette
  • Larger File Size
  • can save transparency
  • More calculation intensive because of compression/decompression
• JPEG:
  • Lossy(pixel details get lost on saving etc…)
  • Large color palette
  • No transparency
  • Better file size than PNG
• GIF:
  • Lossless
  • Transparency
  • Reduced Color Palette
  • Small File Size
• SVG:
  • SVG = Scalabale Vector Graphic
  • Can be displayed in any size
  • Small file size in most cases
  • No pixels saved, image is calculated on the fly

Reducing Image Size

Reduction of the the amount of data(=file size) which will have to be processed, will normally have a positive performance impact. When you use images, especially when you resize or transform them during the process, this applies as well.

• Image Size: A positive factor here is when you cut the width and height of the image by half, the actual “surface” of the image will reduce by around 75%. So by reducing the width and height of a raster image you can reduce it’s file size dramatically.
• Image Complexity: A complex image will have a bigger file size than a simple image. When you have an image, which is just a black square, most image formats(Incuding JPEG and PNG) will optimize how the pixels are saved. When you have an image with a lot of details you will have a bigger file size.
• Colors: Reducing the number of colors used in the image will reduce it’s file size in most cases. This is especially the case for GIF images. Often you can select the number of colors when exporting GIFs from image editor tools. In Photoshop you have an option “Export for Web” which will try to set the optimal settings for usage in web pages.
• Increase Compression: For PNG images you can choose the level of compression to save the image data. An uncompressed PNG image can have easily reach a size of 90MB, while saving the same image with high compression could be 9MB.
• Decrease Quality: When saving some image formats like JPEG you will get asked for the quality with which they should be saved. Slightly reducing the Quality level can give you a good reduction in file size.

Game Performance and Images

When creating games, most of the time you will use vector graphics. Most game development environments will provide a user interface where you can design all the shapes you need for your game.

• Sprite Sheets: If you already know how you will resize the images(fixed sizes like +50% and +100%), using sprite sheets(or CSS sprites in the browser) with pre-resized images can create a good improvement, as you won’t have to resize the image, but just use an existing part of the sprite sheet. This will reduce the amount of processing for image manipulation, and therefore increase the performance.
• Use SVG: If you want all at once, performance, quality and small file size, the best way to go is replacing as much raster graphics with vector graphics as possible. Most of modern 2D Games use a lot of vector graphics.
• SVG Manipulation: Vector graphics are easier to manipulate, as only the splines have to be recalculated and filled, resizing raster graphics causes calculation for each new pixel.
• SVG in Browsers: All common modern browsers support the svg format and can be sized through css. If you want try it out, a free open source tool to create vector graphics is InkScape.
• Reduce Intensive Calculations: Reduce the usage of calculation intensive renderings, like using gradients and transparency.