Transform image in webp and get srcset

Question

Is possible from a jpg image from an entry field return a serset in webp fomat? Something like:

<source type="image/webp" srcset="800w webp image, 1200w webp image ">

Because I can convert in web or get the srcset from the original image but I don't know how to convert the original image and get a srcset.

Thanks in advance and kind regards, Davide

Answer 1

Yes you can – assets include a getSrcSet method which will generate all the requested image sizes and return a srcset string. This method accepts an image transform which can include the desired output format.

{% set image = entry.someImageField.one() %}
{% set webpTransform = {
    format: 'webp',
    quality: 75,
} %}
<source type="image/webp" srcset="{{ image.getSrcSet([800, 1200], webpTransform) }}">

Note that in order for this to work, your server needs to have either GD or ImageMagick installed with WebP support.

Check out the documentation on Image Transforms for more information.