Export smaller projects with WebP images

18
Official Construct Post
Ashley's avatar
Ashley
  • 5 Sep, 2022
  • 1,049 words
  • ~4-7 mins
  • 2,616 visits
  • 6 favourites

Construct now supports using the WebP image format when exporting your projects. It can reduce the file size of images by 20-30% with few downsides, helping ensure Construct exports are as small and lightweight as possible. Read on to learn more!

The WebP image format

PNG and JPEG are actually very old formats. The specification for PNG was first published in 1996, and JPEG is even older, dating back to 1992. (GIF is older still, dating back to the late 80s!) WebP was introduced by Google in 2010, making it a little over a decade old - still relatively new by the standards of other image formats!

WebP supports both lossless compression (perfectly preserving the quality) and lossy compression (slightly degrading the quality to further reduce the size). This means it can replace both PNG (a lossless format) and JPEG (a lossy format).

Apple were characteristically late to the party and added support for WebP in Safari 14 (on macOS 11+), which was released in 2020. All other browsers supported WebP long before that, so now we have pretty much universal support for WebP across modern browsers. So we can rely on general support for WebP now!

WebP compression

Google claims that WebP achieves 25%+ better compression than PNG or JPEG. In my own independent testing this does generally hold up, but it depends on the content - usually you can count on at least a 20% reduction.

Lossless

Using the beautiful Cave Bridge example, it exports 2.9mb of PNG images, but just 2.1mb of WebP images. (Recompression is enabled in all these tests for the smallest possible size.) That's a saving of about 28% - and lossless, so it maintains identical art quality!

On the other hand the venerable Space Blaster exports 1.53mb of PNG files and 1.26mb of WebP files, saving around 18%. That averages out some more impressive results though, as compression depends on the content - one spritesheet with an explosion animation is 33% smaller as WebP.

Lossy

Lossy formats are harder to test, because they depend on perceived quality, and quality settings don't mean the same thing for different formats. However at a quality level of 75, the lossy background images in Space Blaster are 141kb as JPEGs, and just 68kb as WebP - around 50% smaller. WebP avoids the characteristic blocky look that can sometimes happen with JPEG, although it tends to resort to smoothing over details instead. See the comparison below with a scaled-up background planet from one of its images - click it to expand it, and look carefully and you can see JPEG artefacts along the edge of the planet, while the WebP version looks a bit smoother. Still, it's an impressive result for just 50% of the file size.

Using WebP in Construct

Previously you could set images to use PNG or JPEG format in the Image Format dialog in the Animations Editor. Now this lets you choose between lossless and lossy compression. Then on export you can choose which format to use for lossless and lossy images. This lets you easily try out exporting as WebP and then go back to PNG/JPEG if for any reason you want to. It also means in future we can potentially add more image formats, like AVIF or JPEG XL, and you'll be able to take advantage of those just by choosing the format on export!

Choosing WebP images on exportChoosing WebP images on export

WebP compatibility

WebP is now supported in all major browsers. However there are a few compatibility considerations to note.

  • As WebP is only supported in Safari 14+, using WebP means iOS apps will only support iOS 14+. Using PNG/JPEG lets you support iOS 12+. However Apple's official stats show the vast majority of devices are already on iOS 14+.
  • Safari 14-15 only supports WebP with macOS 11+. WebP isn't supported in Safari on older macOS 10.x systems, but it is with other browsers like Chrome. Numbers for macOS usage are hard to come by, but macOS 11 is a free update that was released nearly 2 years ago, so there's been plenty of time to allow for updates. WebP is also always supported with Safari 16+.
  • Some older web servers might not support WebP images. However WebP has been around for a decade already, and if it's not supported all it should need is setting the .webp file extension to use the image/webp MIME type. Learn more in the manual

If any of these are a problem for your project you may want to stick to PNG/JPEG for the time being, but even then you can likely still use WebP at a later date as these last remaining compatibility issues fade with time. For these reasons Construct still defaults to using PNG/JPEG making WebP usage opt-in, but we will likely switch to using WebP by default in future.

For Android, Windows WebView2 and NW.js exports, WebP has been supported for years already - longer than some other technologies Construct requires. So for these platforms there is no downside at all to using WebP, as support is guaranteed.

Also note Safari doesn't support encoding WebP images, so you can't export using WebP in Safari for the time being. It will however work in any other browser.

Conclusion

WebP lossless is pretty much a better PNG. There is no change to your art quality and yet it can reduce the size by 20-30%. WebP lossy does look different to JPEG, but arguably it avoids some ugly artefacts, and can achieve far superior compression. The only downside are some potential compatibility quirks noted above, but these should be minor and receding over time. In my testing I've noticed WebP is already very widely supported: Paint.NET opens them just fine, Windows can show thumbnails of WebP images in Explorer, and so on.

With Construct, an empty web export is just 230kb, despite supporting a huge selection of features. It's one of the most efficient engines on the market at providing small exports, ensuring your projects download quickly and don't keep the viewer waiting. Supporting WebP images helps ensure your exports are lightweight, and there's also the option of supporting even more advanced image formats like AVIF and JPEG XL in future. Jump in to Construct today and try it out.

Subscribe

Get emailed when there are new posts!

  • 16 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • My export is now 30% smaller - thanks!

  • That's actually pretty good!

  • great! never new earlier! make it default exporter...

  • Nice to have other alternatives, any saving in Sprite-Sheets size is more than welcome.

    Does C3 support (WebP to Base64)

    And Load it back in C3 from (Base64 to WebP)?

      • [-] [+]
      • 1
      • Ashley's avatar
      • Ashley
      • Construct Team Founder
      • 1 points
      • (4 children)

      Why would you need base64?

      • In almost all my Games I use load from URL to have better control of the Memory Management, is that not possible?

        That's a really important feature to have if you didn't add it yet as if it doesn't support it sadly is not gonna be really useful for users that heavily use load from URL like me.

        Edit:

        Just to make sure I explained it properly, what I meant is if we can convert a (WebP to Base64) at Run Time using Binary Data Plugin and after load it back any time From URL?

        Is that supported or will it have any issues?

        Load more comments (3 replies)
  • Nice, always cool to see features before 100% adoption as opt-in!

  • Cool. I used to hate webp because while it was perfectly supported in browsers for a long time, photoshop was still unable to open it. But it seems by now photoshop actually can do webp too, so it's finally useable :D

  • Fantastic addition! Please keep it up 👍

  • Great format and I use it for android.

    Please keep png/jpg as long as possible.

  • Good to see more browsers gradually supporting more formats.

    It's bizarre that even the new Windows 11 cannot natively open WebP images. Maybe in another 10 years.

  • This is awesome, thank you very much for this 🙏