Grav: Webp image format enhancement

[tidiview]

may be that's wrong; if so forgive me.

Would it be possible to add webp image format to the native GRAV caching media process?
By that I mean that when there is a webp file, it's cached like for a jpeg one.

I added a webp setting in a media.yaml file in config like in the docs, but I can't see anything.

The idea is to be able to have structures like:

<figure><picture markdown="1">  
<source srcset="/link/to/my/Webp/image.webp" type="image/webp">  
![image-title](/link/image.jpg) {.class}  
</picture></figure>

for browser that accept webp format.

Thanks in advance

[rhukster]

I'm not sure webp has a enough market penetration to make it worth supporting natively. Maybe someone could create a plugin?

[euene]

Market penetration of WebP probably isn't too strong, but browser support is at over 72% globally which is actually quite decent.

[flaviocopes]

I don't know how they calculate their stats on caniuse.com but Chrome+Opera+Android doesn't look like 72% to me, anyway been marked as enhancement.

[fredrikekelund]

@flaviocopes caniuse.com probably get pretty good statistics, since they're based on statcounter.com. But there's a difference between global and local stats, I only get 52% support for Sweden, for instance.

If we wan't to get WebP support for the page.media.images array, then we'll likely need support from Gregwar/Image (and there are additional considerations for cross browser support). There's a ticket in their bug tracker for that (https://github.com/Gregwar/Image/issues/77), but there hasn't been a whole lot of movement in that project for some time. I don't know how far you can get around this with the plugin architecture (I think it might be quite difficult), but there is a ticket for looking into alternative libraries for image manipulation #77

[ganar]

I would like to have WebP support as an option: I have a client's site with 64% of views coming from compatible browsers, most of them mobile.
I would like to be able to apply the enhancement via TWIG in the templates, using a <picture> polyfill.
This would be transparent to the users, but would greatly improve the speed of the site to 64% of the audience.

[rhukster]

Our image library doesn't really support this, if we can change the library we might be able to revisit this.

[fuslwusl]

Mobile first means WebP is used by nearly every Android phone which means more than 80% of mobile devices. And Google ranks fast mobile pages better that was one reason for me to switch from Wordpress to Grav. By the way Grav rocks an you did a great job! To further improve pagespeed it would be great getting native or plugin support for webp to avoid deep server configuration issues. The php image gd lib is able to create webp so it should be possible to create the images using php.
https://www.php.net/manual/de/function.imagewebp.php
Is there a chance to get WebP support very soon?

[rhukster]

The latest version of Grav 1.7 will have support for webp as Gregwar/Image library has now been updated to support it.

[01Kuzma]

And how it could be now used in real world example with fallbacks?
For instance, if image's list right now is displayed with this code:

{% for image in page.media.images %}
    {{ image.cropResize(806,582).html }}                        
    <p class="text-justify">{{ image.meta.description[grav.language.getLanguage] }}</p>                  
{% endfor %}