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! :)