WebP support

[clee]

It would be really nice to support WebP images if they're right alongside the existing image files. In my own testing, my WebP images are regularly 15-20% the size of my original JPG photos, and I can't tell any visual difference when they're scaled down for display in the browser anyway.

https://css-tricks.com/using-webp-images/ has some helpful tips about how to gracefully fall back to non-WebP formats if WebP isn't supported (so basically if the browser isn't Chrome).

[theonejb]

@arahayrabedian Thoughts?

[arahayrabedian]

personally not worked with WebP, from what I've heard I'm neutral towards the technology itself, my biggest concern is the chrome-only thing, I think someone with more front-end experience can weigh in on that. I understand chrome is a leading browser, but what if I said "it's a safari only thing" or "it's a firefox only thing". It seems to violate the standard web-ness of things. Dunno if WebP is gaining ground, my impression is that it's remaining chrome-only but that was only after a brief look.

That said, there would be two ways I can see to implementing this

1. as already mentioned, serve a WebP file as soon as there's a compatible browser and an image available
2. Modify URL generation so that a resizing service serves WebP instead of resized jpegs when a browser supports it. This is subject to resizing service capabilities.

I lean towards the latter option as it has a shorter path through the code (and would violate less underlying assumptions) and is easier for a user to maintain consistency between their files. The flipside is what if you're not using a resizing service?

[theonejb]

@clee Thanks for taking the time to create this issue. And sorry for not being able to give feedback on this earlier.

I tend to agree with @arahayrabedian. While WebP as a format seems to have an advantage both in size and quality over JPEG/PNG/... I am wary of adding a Chrome only feature to 50mm. It just doesn't feel like the right direction to move in. Another concern I have is that adding features like this makes for a more complicated application and code base. My goal with 50mm is to have the simplest option available.

But I do understand why people would prefer WebP when available, so I'm not against it. It does offer a better experience to the viewer of your galleries. I looked at the second suggestion @arahayrabedian made and that led me to this document on content negotiation by Imgix.

If you are using Imgix, and your image urls have the query parameter auto=format, Imgix will serve WebP formatted images to browsers that support it; Chrome and Opera. It does the conversion on it's own, so the original purpose of 50mm — "throw images from camera into a bucket and it all works", is preserved.

Is that something you feel will solve this issue @clee ? If so, I'd be happy to add that functionality into 50mm. But like @arahayrabedian also mentions, this feature only works when you are using a resizing service, not if you're serving images directly.

[clee]

I am wary of adding a Chrome only feature to 50mm

I would like to point out that Firefox has supported WebP for over a year now: https://hacks.mozilla.org/2019/01/firefox-65-webp-flexbox-inspector-new-tooling/