WebP support in resize_image

Feature requests
#1

I had a go at adding support for WebP as an output format for resize_image.
I was about to create a pull request for the code, and was told to post here first to ask if anyone else thought this was a good idea, so here I go :slight_smile:

WebP is a new image format, that is developed by google. It can do lossy and lossless, you can read more by googling it (as I am not allowed to put more than 2 links in this post because I am a new user).

I used the webp crate to do the actual encoding, and everything seems to be working fine. The only “problem” i see is that when you select the format “auto” Zola will look at the file extension of the source image (that is to be resized) and guess if it is lossy, that is not really something you can do with WebP, since it can be both. The outcome will be that a lossy WebP image can be encoded into a lossless png, but that is only a problem if you take a WebP as source and select auto, so not really related to my pull request.

You can see the code changes required here:
https://github.com/getzola/zola/compare/master...PhilipK:webp

I have tested it out on my out Zola page, it only has 22 image but here are my size numbers:
png 2.62 MB
webp lossless 1,65 MB

jpg (quality 50) 0,44 MB
webp (quality 50) 0,10 MB

So what are peoples thoughts, is this a good feature for Zola?

3 Likes
#2

webp support seems ok: Can I use... Support tables for HTML5, CSS3, etc

Go ahead with the PR, that’s a nice one!

#3

How’s the current browser support for WebP?

#4

See my link above: Can I use... Support tables for HTML5, CSS3, etc

1 Like
#5

Whoops. I shouldn’t post here before the second cup of coffee.

It seems that my current main browser - Safari - is supported badly yet. It seems to be a good idea to revisit the site visitor statistics before enabling this format then.

#6

Why wait?
You don’t need browsersupport for webp. Just provide fallbacks that HTML already provides.

In this case that is provided by the picture element. can i use picture
But even when browsers don’t support picture the fallback img will still work.

<picture>
  <source srcset="https://via.placeholder.com/300.webp/09f/fff?text=webp" type="image/webp">
  <img src="https://via.placeholder.com/300.jpg/094/fff?text=jpeg" alt="Alt Text!">
</picture>

When you view above code in a browser that doesn’t support webp, or even picture , then you’ll just see the jpeg.

This way you will provide those that use browsers that do support webp with smaller and faster webpages.

For those that use resize_image insize zola templates it will be usefull if this information is provided in the documentation, so they wont be caught off guard when using webp.

3 Likes