The latest Construct updates and browser updates have made possible some interesting new improvements for both video support and images. We wanted to highlight these in a blog post, so here's a quick run-down of what's new!
Video improvements
Here are some new improvements affecting both Construct's Video recorder object, which allows recording video and audio, as well as the Video object for video playback.
Video recorder - MP4 H.264 support
Construct's Video Recorder object can record your game, the entire screen, or input from a camera or microphone. Previously it would record WebM VP9 video in Chrome (and other Chromium-based browsers like Edge), and MP4 H.264 in Safari. This was because Chrome didn't support recording in H.264 and only supported WebM recording. As MP4 H.264 is a more widely supported format, this inconsistency was occasionally annoying and we sometimes got questions about supporting MP4 recording in Chrome.
Back in r375 we made some improvements to the Video Recorder object to allow choosing the container, video codec, and audio codec separately. We also improved the codec selection algorithm for "auto" mode. This work has now paid off as the latest Chrome 126 release now supports recording MP4 H.264 as well - and that also means Construct now defaults to recording videos as MP4 H.264 in Chrome. So now you can record widely-supported MP4 videos in both Chrome and Safari!
Video - more codec support
Construct's Video plugin makes it easy to play video files in your project. Previously it only supported WebM with VP8 or VP9, or MP4 H.264.
However technology continues to advance, and these are both quite old video formats now. In r391 (and now available in the latest stable release) we expanded the Video plugin to support more video formats, including WebM AV1 and MP4 H.265. These more modern formats allow for even better quality with even smaller file sizes. The AV1 video format is a particularly interesting one as it is a modern and highly efficient format which is also open and free to use in any way - which can't be said of H.264 and H.265 (although the patents will eventually expire on those). AV1 is now also widely supported, with the sole exception of Safari only supporting it on modern hardware such as the iPhone 15 Pro and M3 MacBook Pro. Eventually as old hardware falls out of use it will become effectively universally supported, which will make it a great choice for cross-platform video playback.
The AV1 codec logoSo you can now use AV1 and H.265 videos in the Video object for more efficient video files - and until support becomes universal, you can take advantage of the ability to specify both a primary format and secondary format, so you can add a widely supported format like MP4 H.264 as a fallback in case the more modern format isn't supported.
Check supported video formats
Construct provides a quick way to check which video formats are supported for playback and recording: choose Menu - About, and then click Platform information. Near the bottom you'll find information about the supported video and audio formats in the current browser.
Image improvements
A couple of years ago we added support for exporting your project images as WebP, which we blogged about at the time. By now support for WebP is universal, and it's the new default in Construct. Lossless WebP images are usually significantly smaller than PNG while preserving identical quality, and lossy WebP also supports alpha unlike JPEG - so it's now a no-brainer to use WebP. It can significantly reduce your project's download size with pretty much no downside.
Originally you could not export WebP images when using Safari, because while Safari supports reading WebP images, it lacks built-in support for encoding WebP. We've now made use of a WebAssembly WebP encoder to support exporting WebP in Safari too, making sure it's universally supported regardless of the browser.
As ever technology continues to advance and new image formats appear which are still more advanced and more efficient. AVIF is an interesting new lossy format based on still images from the AV1 video codec, which can produce amazingly small files which retain impressive quality. This blog post by Jake Archibald from 2020 is a great summary of AVIF. The AVIF format is also now widely supported, and now Construct supports it too - when exporting your project you can choose to export lossy images as AVIF, which can help reduce your project's download size even more.
Lossless on the left and AVIF compressed to just 18kb on the right. It's hard to spot the difference! Credit: Jake ArchibaldAVIF supports lossless images too, but it doesn't seem better than WebP lossless, so we've only enabled AVIF support for lossy images.
Conclusion
We're committed to bringing you the latest and greatest technology in Construct, and we're always working hard to make improvements and take advantage of all the excellent additions constantly being made to the web platform. Using modern video and image formats can do a lot to reduce the download size of your project and help improve quality for lossy images too. These new formats are, or will likely become, the new standard formats for the web. With wide support for the latest formats, there is little downside and lots to be gained, with high-quality, high-efficiency formats supported consistently cross-platform. And the web is always getting better! More new formats may emerge in future, including JPEG XL or other more advanced video codecs - and rest assured once they're widely supported we'll be integrating them with Construct so you can take advantage too.