Server connect image filetype WebP

[max_gb]

Adding on to this thread, it is an additional cost but Gumlet API seems a good option for taking static images and resizing and optimizing them, along with delivering it in multiple formats such as webp. If there is no browser support then it reverts back to the original. Pretty cheap as they only charge for bandwidth, $1 per 10GB.

[JonL]

@patrick

You could use the picture tag to have fallback to jpg, but again no IE support. (There is a polyfill to fix that)

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Adding possible solution for another scenario where you have images being loaded.

If you are loading background images via CSS dynamically you can use Modernizr library and APP connect to load webp or fallback format.

Go to Modernizr

Make a custom build for webp detection.

Download the build.

Add script to your page.

<script src="path/to/modernizr-custom.js"></script>

Create variable so App Connect has access to it.

<script>
	dmx.global.set('canWebp', Modernizr.webp)
</script>

Use ternary operator where you are loading dynamically background images.

<div class="card-img-bg" dmx-style:background-image="'url(https://yourdomain.com/image.'+(canWebp?'webp':'jpeg')+')'"></div>

If the browser supports webp it will load webp, if not it will load jpeg file.

[psweb]

@Teodor

Great idea, unfortunately webp is not well supported by all browsers currently:

A year and a bit later, its supported now, well Safari is slightly behind, but who uses Safari, bahahaha.
Maybe we can get WebP integrated now that its more widely used.

Tired of seeing lighthouse tell me i need WebP and dropping my score.

[psweb]

I see Safari fully supports WebP now, took them a while but they got there, only 8 years after Google Chrome began supporting it, haha.
https://caniuse.com/webp

[TMR]

I’m looking at moving over to Webp so having a native component in Wappler that would do this would be excellent. Like everyone else, I’m getting hammered with loading times on pages with a lot of images. Webp is the perfect solution.

As a stop gap, I found a nifty, and reasonably priced API which will do the conversions for me here:
https://cloudconvert.com/apis/file-conversion

[Alexander_Paladines]

I think that result more convenient the use of image CDN service as cloudimage.io even in free plan, and te possibility to pay $1 per GB of overuse.
They already delivery an optimize image format as webp.

[TMR]

Thanks for that, its a great suggestion, that free account looks very good value! Even the other pricing levels are more than reasonable.

[Teodor]

WebP support was added to Server Connect a while back.