Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Image compression in Construct 2

by Ashley | 24th, December 2011

Happy holidays all! We've still been working hard, and lately Construct 2's options for image formats on export have been significantly improved, especially in r73. There's actually some non-obvious things that happen now, so I'm writing this post to cover what goes on under the hood. It's another technical one so put your thinking caps on! (Hopefully not too close to Christmas for a bit of thinking!)

In Construct 2's HTML5 games, often the images take up the majority of the download size. Audio is often large too, but it's actually streamed from the server during the game so doesn't contribute to the loading time. When you see the loading bar, it's only loading images. If the images can be squeezed in to smaller files, the game will load faster and start sooner. It's good not to keep anyone waiting too long, or they might get bored and give up loading the game. Construct 2 has some features to help you squeeze the image files as small as possible and help get your game running promptly for everyone!

Image export formats

There are three image formats you can choose from the Image Format dialog: PNG-32 (true color PNG), PNG-8 (256-color PNG) and JPEG (for photographic type images). That's roughly in order of largest to smallest file size too (PNG-32 is usually largest and JPEG usually smallest).

All images in the project folder are stored as PNG-32. This is the only format that can store any kind of image with a full alpha channel without affecting the quality at all. Obviously you don't want your images to lose quality as you edit your project, so this is the only sensible format to use during editing! Image conversion only happens when you export the project. So on export, images are converted from PNG-32 to a different format if you've changed the image format anywhere. If they're still set to export to PNG-32 and you have enabled PNG recompression in the Export Project dialog, some other interesting things happen to make sure they're as small as possible. These are described a bit later.

Exporting JPEG images

The JPEG format is best for photographic images, or large detailed scenes. It can achieve the smallest file size, but does this by slightly degrading the quality of the image. Importantly, JPEG does not support alpha channels either - this means no areas of a JPEG image can be transparent, so it's best suited for fully-opaque images. If your image has any areas of transparency, they will become opaque black.

This makes JPEG best for large background images. For example in Space Blaster the background images (with stars, rocks and planets) are exported as JPEG. You can also choose a custom quality setting from 0-100 (100 being best). At quality 75, with only a slight quality reduction, JPEG reduces the file size of Space Blaster's background images by about 95% over the PNG-32 size! That's an amazing saving, and definitely noticable for any users on slow connections. Also, with the user focused on the action happening in the game, they're much less likely to notice the slight quality difference in the background. However, JPEG doesn't work so well for finely detailed or pixel-art images, and considering it also doesn't support transparency it's probably not a good idea to use it on the main game sprites.

Exporting PNG-8 images

PNG-8 stores a pixel in 8 bits (as opposed to 32 for PNG-32), which means a PNG-8 image can only have 256 different colors in it. It supports alpha channels, but only within the 256 colors. This also means if the image has more than 256 different colors it must be reduced to only 256, which also affects the quality. However, the 256 color restriction also means PNG-8 can achieve much better compression - often just a third of the PNG-32 file size!

Many games actually fit the 256 color limit just fine. Consider retro games with pixelly or blocky artwork - often these images are well under 256 colors. This makes them ideal for the format. However, Construct 2 can automatically detect PNG-32 images which only use 256 colors - see the next section for more.

If you export an image with more than 256 colors to PNG-8, Construct 2 uses an advanced dithering algorithm (PNGNQ) to reduce the image to 256 colors while matching the original as closely as possible. Often it's very difficult to tell apart the original from the 256-color version! Have a look at some of the samples and judge for yourself. This means if you're worried about the size of your game, you can try simply setting all images to PNG-8. This can bring a huge saving in the download size while only slightly affecting the visual quality.

We've also licensed a special tool called PNGOut that squeezes PNG-8 files as small as possible. It uses some clever techniques to strip out all unnecessary information and find the most efficient way to compress the data. This helps reduce the file size even more on top of the saving made by converting to PNG-8.

Exporting PNG-32 images

You might think there's not much that can be done to help reduce the size of PNG-32 images. They are true color with a full alpha channel and are a lossless format (meaning they store the image exactly without degrading the quality at all). But you'd be wrong!

First of all, so long as you enable PNG recompression on export, Construct 2 counts the colors in PNG-32 images. If they can fit in 256 colors, it automatically converts it to PNG-8 to reduce the file size. You don't even need to specifically set PNG-8 in the editor. If you have a retro game all set to use PNG-32 and all the images fit in 256 colors, just make sure PNG recompression is enabled and everything will be squeezed down to PNG-8 automatically on export. With very little effort you can get a huge saving on the download size! And the quality is not affected at all.

Secondly, if the image really does have more than 256 colors, it's run through another tool called PNGCrush. This tries lots of different ways of compressing the image and also strips out unnecessary information, while exactly preserving the image quality. This can often shave 10-15% off the file size. Since it doesn't affect the quality at all, it's a free saving. If you enable 'brute' recompression it will spend longer finding the very best compression method, but this usually only saves another 1-2% and can take several times longer on export.

Some data

To demonstrate the effect of the options, I've exported the venerable Space Blaster through three different export formats. In each case I measured the size of the images folder only, so that doesn't include scripts or audio. Here are the results:

All PNG-32 with no recompression: 4.92 mb
Background images JPEG (quality 75), rest PNG-32 with Standard recompression: 1.75 mb
Background images JPEG, rest PNG-8: 1.15 mb

As you can see, choosing the right image settings is crucial to reducing the download size. Just setting the backgrounds to JPEG and enabling standard recompression reduced the download size by about 65% - nearly 3 times quicker to download! Converting the rest of the project images to PNG-8 (slightly reducing their quality) increased this to a reduction of about 76% - over 4 times quicker to download!

Conclusion

Construct 2 now works quite hard to make your game's download size smaller on export by using tricks like color counting. This helps some kinds of games get a big file size reduction for free. However, you can still help a lot by choosing JPEG for the right images. You can go even further and set PNG-8 for the rest of the project's images, making it probably as small as reasonably possible. Finally, be sure to enable PNG recompression on export so Construct 2 does its tricks! It makes the export take a little longer (it works on all CPU cores to go as fast as possible), but it's well worth it.

Oh, and happy holidays! :)

Now follow us and share this

Tags:

Comments

1
pkeod 3,541 rep

You are awesome, Ashley! :)

Any change of making an external tool which can scan a directory and offer optimization for different files...? :)

Saturday, December 24, 2011 at 2:49:11 AM
2
Thunder 2,987 rep

I remember reading here somewhere on the forum where a user posted about renaming graphic files to unusual names to make it harder for an end user to mess around with the files.

I think it would be cool if there was a name scrambler on export for image files.

Example:

barn_red.png normally would turn into barn_red_default.png on export. How about a check box that would scramble the name if you would like. For instance barn_red.png now turns out to be rdbn_are_default.png. Or just anything really. That way you can still have all of the real image names in the editor and the exported version would be scrambled.

Probably to much work, but it was just a thought...

Happy Holidays.

Saturday, December 24, 2011 at 3:25:48 AM
6
Nipponshin 5,353 rep

Amazing work guys! It will save me a lot of time not having to worry about this when I'm making games, keep up the good job and Happy Holidays to you Ashley and everyone else at Scirra :)

Saturday, December 24, 2011 at 3:48:34 AM
2
Kyatric 67.1k rep

Thanks for the clear article and instights once more.
Have a merry christmas.

Saturday, December 24, 2011 at 3:53:09 AM
6
noirfluo 6,911 rep

Really useful article! Thank you very much!!!

Saturday, December 24, 2011 at 9:03:29 AM
3
Adam 3,723 rep

happy holidays!

Saturday, December 24, 2011 at 9:37:05 AM
5
TehLulzinator 4,204 rep

Great article Ashley! It's nice to have a deeper understanding of all the features, really love these blog posts.

Merry Christmas everyone~!

Saturday, December 24, 2011 at 1:20:58 PM
4
edisone 17.8k rep

tnx for very good blog post and merry Xmas everyone ^^

Saturday, December 24, 2011 at 2:01:48 PM
5
newt 84.5k rep

Nice read. Hopefully browsers will start to use even better formats such as WebP. http://code.google.com/speed/webp/

Saturday, December 24, 2011 at 7:23:08 PM
0
charlieman 2,307 rep

I think you could get even smaller download sizes if C2 could use one image to hold all the frames in an animated sprite instead of one per frame.

Hope you guys bring this functionality soon

Saturday, December 24, 2011 at 9:04:01 PM
3
Velojet 20.7k rep

This sort of smart work (from smart guys!) is what makes Construct 2 the best of breed. Happy hols to youu!

Monday, December 26, 2011 at 3:07:07 AM
3
ludodesign 29.8k rep

This is good for some things. And makes dropbox more happy =)

Wednesday, December 28, 2011 at 4:39:44 PM
4
Bigheti 15.7k rep

It was a real lesson of image formats for use with C2. I never imagined using JPEG in the background! I used PNG32 ...
By purchasing this software also have the excellent support team Scirra in a variety of subjects. Unbelievable! To me you are the best for 2011. God bless you!

Wednesday, December 28, 2011 at 10:02:31 PM
3
basilfamer 2,659 rep

You guys are awesome! I love how you're working on every aspect of Construct 2

Thursday, December 29, 2011 at 5:25:09 PM
3
hwijaya 2,973 rep

I cannot wait to play. Thanks for making it so good!

Friday, December 30, 2011 at 8:44:01 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.