COLT MCANLIS: For many game devs out there,
PNG image files are a backbone of their development process,
but they also come with some unintended side effects.
My name is Colt McAnlis.
And for savvy developers who are concerned with user bandwidth
and download times, PNG files may not
be the best choice for your game assets.
And the truth is that PNG files are everywhere
in mobile development.
After analyzing 1,000 of the top games on Google Play,
it was discovered that PNG files accounted for more than 75%
of all textures for those games, which makes sense, right?
Developers are busy people.
And PNG files are easy to use, support transparency, provide
some compression savings, and they're available
cross platform.
But in a world with restricted download times, customer
acquisition woes, and harsh data caps, the size of your app
does matter.
And PNG files just aren't going to cut it.
For developers looking to reduce texture asset
footprint in their game distribution,
the WebP image format is a perfect replacement
for PNG files.
WebP supports most of what game devs
love about PNG, that is, transparency, cross platform
support, and lossless compression.
But it also supports lossy compression,
meaning you can get even smaller file sizes.
And WebP fits into your existing production pipeline
with plug-ins for Adobe Photoshop, GIMP, ImageMagick,
and more.
Plus, the command line converter allows you to batch convert
your asset chain during your build phase, which is always
helpful for programmers on the go.
Using WebP is easy in your game, as it's accessible through
a C++ library that you can drop into your existing code base,
allowing you to use it on mobile and desktop platforms.
And it's also available for the web as well.
To get a better sense of the type of compression savings
available, the WebP team ran some tests
to see how the format stacked up against PNG, testing
1,000 images in a test corpus.
This graph shows the normalized results.
You can see that the optimized PNG
files are listed as the 1.0 green line there.
And it's direct to see that both for lossy and lossless modes,
WebP files are consistently smaller in size.
That odd little spike at the end,
though, is caused by one-by-one pixel images, which
you'd expect some weird spikes to go on there.
Anyhow, this is a perfect time to remind you
of a couple of tips of getting the most out of WebP.
It's important to understand that one compression
level doesn't work for all images in your game.
Diffuse maps are different than normal maps, which
are different than alpha maps, which are specifically
different than highly transparent UI images, which
means that finding the right balance between image quality
and size means finding the right types of compression
settings for each image.
But doing that for every image in your game
could be impractical.
Instead, try to classify your images based on their usage
type as this generally describes their visual properties.
From here, you can associate each usage bucket
with a specific set of compression settings.
These settings can easily be found
by your artists who have a few hours
to kill on a Thursday afternoon.
Oh, and make sure to provide a file that lists overrides
for specific images which may require specific compression
settings that are different than the bucket they actually
fall into.
Trust me, your artists will love you
for this simple, little feature.
Now it's worth pointing out that PNG and WebP files are not
GPU formats.
That is, when you decompress them into main memory,
they will be in full 32-bits per pixel and reside on the GPU
as such.
There's a whole set of GPU compressed formats
out there, like DXT, ETC, PVR, and ASTC, which exist on disk
and on GPU in compressed format, which
means that you should consider supporting GPU
formats alongside WebP ones for textures that may support it.
This way, you can optimize both your distribution
and GPU residency sizes.
Anyhow, to get started with WebP,
hop on over to the development page and grab the C++ SDK
for your game, or read the docs online.
And make sure you check out more information
on alpha blending that can cause problems in your game
by checking out my other video, "Don't Alpha That Pixel."
WebP is a perfect replacement for bloated PNG
files in your app.
So go out there, compress your textures,
and build better games.