Add support of auto converting to WEBP

[umkasanki]

Could you add feature automatically convert JPEG to WEBP if the client browser it's supported? Like it works in IMGIX with format=auto. (AWS Server­less Image Han­dler already supports this feature)
I know what possible to use tag with source param, but simple markup of img tag is much handier.Thanks

[karensg]

Would be great indeed.

[khalwat]

Seems like it'd be possible. So if you do {{ someAsset.optimizeImages.srcset() }} you want it to auto-use webp if the browser supports it?

[umkasanki]

Yes, it will be great

[khalwat]

So I started to work on this when I realized it probably can't be done the right way. If I did it as I was thinking of doing it, it'd break when a site is static cached, or otherwise the output of the Twig template is cached.

The reason why services like Imgix can do it is they respond to the actual request for the file itself. So if you request:

https://example.com/image.jpg

...the webserver can look at the accept headers, and send back something else (a webp in this case). Requests for static resources like images shouldn't normally be routed through Craft, because they will be super slow if they are, thus Image Optimize would never have a chance to work this magic.

However, the Image Optimize documentation mentions how you can do the same thing on your server that Imgix and other such services do:

https://nystudio107.com/docs/image-optimize/Using.html#image-variants

Recipe: serve WebP with nginx conditionally

[karensg]

Thanks for your explanation, I am using Cloudfront with AWS image service. https://aws.amazon.com/solutions/serverless-image-handler/
Picture element works great. Only for the css there is no clean solution unfortunately.

There is this PR available at the moment: aws-solutions/dynamic-image-transformation-for-amazon-cloudfront#152
I guess when this is merged, we could set up Cloudfront to cache based on Accept header and let this service handle webp transformations.