Modern web compressed image formats - Webp

Hi,

Can I suggest the ability to import the new compressed image formats such as webp?

I’ve recently been updating my website to speed it up by compressing all the images into webp and the results are amazing, often around 20% of an already Tinypng compressed png.

Best,
Leo

1 Like

The format is pretty new isn’t?
It could be not well supported on older devices.

I know very little about it, but perhaps it’s more about the browser supporting it rather than the device? If it’s the device then I’m in trouble because I’ve been switching all my website images to webp!

On an aside, figuring out the website, and dealing with all the issues that come up has been way more frustrating and confusing than building the apps in GDevelop. (I used Wordpress, which pretends to be easy but to my mind is an illogical mess!) Infact, I could see GDevelop as a great way to build an entire website. I wonder if that’s viable?!

I did some checking, webp is browser specific (and in many cases, browser only, seems like many image editing apps don’t native support it and just convert after exporting to png, oddly)

Theoretically it would not be device specific so long as electron meets these standards here: Frequently Asked Questions  |  WebP  |  Google Developers

Looks like anything Chrome Desktop 17 or Chrome mobilw 25 or newer supports it. Android webview 4.2 or newer supports it.

Animated webp is limited to chrome 32 or newer, but Gdevelol already doesn’t support single animated files anyway.

(Electron 18 uses chromium v100, so probably okay there?)

Edit: Good news, support is actively being looked into, Update supported filetypes for resources by arthuro555 · Pull Request #3862 · 4ian/GDevelop · GitHub

This doesn’t mean it will happen, nor if it happens you won’t run into compatibility issues, but looks like progress is being made.

Nah, it’s more than a decade old ;p
I’m surprised you haven’t heard of it, it’s much used on the web as the file sizes are low so it loads fast.

The pr has been merged, next version will allow using a webp file for sprites and WebM files for videos too.

YAAAAAY! This will be a fantastic addition to the engine. I’ve been waiting for it ever since Safari/macOS implemented support for webp.

Has any thought ever been given to vector based images, such as SVG? This would certainly help when scaling a game to various screen sizes/resolutions. Not sure if the browser would have to do all that math every single frame and therefore hurt performance.

The renderer of GDevelop doesn’t support vector graphic. While it supports SVGs, it just rasterizes it on-the-fly, so pre-rasterizing it via a tool like inkscape is just the same, except you get to control the rasterisation settings/quality and it is more performant since the renderer won’t have to do that additional work at runtime.

2 Likes

It’s great that the developers added webp into GDevelop. Thank you!

I converted all our images into webp and uploaded to our server. Strangely there was no download speed benefit, instead a huge reduction in download speed over our previous png based images.

I realise that there could be many factors causing this. Perhaps my server doesn’t like webp? We have a lot of image files to download and each call from the GDevelop to the server to download each webp file is, for some reason, not as efficient as for png?

A general observation we noticed with the webp format is that we got varied amounts of compression efficiency depending on the amount of transparency in an image. Images with a lot of transparency were smaller when compressed PNG (we use tinyPNG). It seems webp as a format does not compress transparency as well as tinyPNG. Images with no transparency at all worked best as webp although it badly smeared any text. With this in mind we’re considering a mix of webp and png.

For context you can see our Gdevelops live on our website (we went back to our png images): Wowthatsme.com

I’d be interested in your thoughts :slight_smile:

1 Like