jump to navigation

WebP images September 18, 2014

Posted by Jesse in : Game Development , trackback

Work continues on getting the Android port of Perseus ready to push out for public release. I had to completely rewrite some of the asset loading code to handle reloads when the OpenGL graphics context is lost. Awhile back they added a feature to Android to prevent it from getting trashed so often, but there seems to be a decent number of devices that ignore that feature completely, so I needed to come up with a fix.

In the worst cases, this is happening every time the player looks at the leaderboard or sees an interstitial ad. Unfortunately, the reloads are really slow. On slower devices, it would look like the game had locked up. Some of the assets in Perseus are huge. Each of the background textures are 900×1200 pixels, all of them clocking in over 1.4 megabytes each. (And we have to reload a lot more than textures. All of the shaders and render textures need to be recreated as well. We used a bunch of them for the laser, lightning, and bloom effects.)

In hopes of speeding things up, I started experimenting with some other file formats. Jpeg is the obvious first choice, but jpeg doesn’t handle alpha at all which I require, and I’d rather not have multiple file formats if I can help it. Next I stumbled upon a format called WebP. WebP is an image format being pushed by Google for use on the web. They claim that lossless WebP images are 26% smaller than pngs, and lossy images are 25-34% smaller than jpeg images. Apparently there’s been some difficulty in getting other browsers to support the format, but I don’t care about that, I’m making video games! 🙂

Google provides a library written in C to load WebP files, and in less than half an hour I had WebP images loading and it was much, much faster. I’m thrilled with the compression and the quality. Also, it supports transparency and translucency! Seems perfect for our needs.

Let’s take a look at some images. (Hopefully your browser will render the WebP images. They work for sure in Chrome and Opera.)

Reference image

100% quality

80% quality

75% quality

If you compare the WebP images to the original png, you’ll notice that they are a bit darker. I’m not sure why that is. It’s noticeable, but completely acceptable to me. In fact, when I open the 80% WebP in one tab, and the reference png in another so I can swap back and forth quickly, I don’t really see anything objectionable at all, and it’s dropping from 1440 KB to 97 KB. That is insane!

I shipped a new beta version of Perseus using WebP images yesterday, and none of my testers seemed to notice any differences in image quality. I’m really happy with WebP images, and I think I’ll be using them exclusively in my games from now on.


no comments yet - be the first?