Resized WebP image

[danielbarenkamp]

Hi guys,

got a basic question: I am trying to get a resized webp image to serve when webp is available.

<picture>
    <source class="img-fluid" srcSet={require('../public/img/silas-baisch-ceITO2rlDgc-unsplash.jpg?webp&resize&sizes[]=300&sizes[]=600&sizes[]=1000')} type="image/webp" />
    <source class="img-fluid" srcSet={require('../public/img/silas-baisch-ceITO2rlDgc-unsplash.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000').srcSet} type="image/jpeg" />
    <img class="img-fluid" src={require('../public/img/silas-baisch-ceITO2rlDgc-unsplash.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000').src} alt="" />
</picture>

However this "?webp&resize&sizes[]=300&sizes[]=600&sizes[]=1000" always returns me a jpg and not a webp.

Is this even possible? Or any other best practice to not serve the full image to users.

[williamsk91]

Have you tried adding &format=webp like in this comment? #91 (comment)

[nathanosdev]

I've tried adding &format=webp and unfortunately it's not working. I get this error: NonErrorEmittedError: (Emitted value instead of an instance of Error) Unsupported MIME type: image/webp. I have the latest version of responsive-loader installed.

[nathanosdev]

It works for me if I use sharp instead of jimp. Using jimp I also encountered another issue that was solved here: #206

It would be great if this info regarding sharp and webp was added to the docs.

[abenz1267]

While using format=webp seems to work just fine on itself using an image tag, i'm struggling to find a solution when using a <picture> tag in order to provide a fallback.

Any tips?