Picture + webp

[stereobooster]

webp should be smaller in size than any other format. Except AVIF. Requires #645 PR first

Support is good:

• https://caniuse.com/picture
• https://caniuse.com/webp

Related to #644

[netlify]

✅ Deploy Preview for hugo-congo ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	74f82da
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-congo/deploys/651e881226da0700088de2a1
😎 Deploy Preview	https://deploy-preview-649--hugo-congo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jpanther]

I agree that adoption on this is getting better all the time and so it would be great to be able to use webp images, although I do wonder if we still need to have a fallback in case it's not supported by the browser? Should this be something that's a configuration flag in the theme?

[stereobooster]

My personal preference is to keep fallback. Regarding configuration: enableWebp with default true?

Also I implemented it only for render hook, but we have other images. I wonder if I can refactor it in shortcode and reuse everywhere

[stereobooster]

• Unconnected: in layouts/_default/single.html there is figcaption tag without figure. Is this intentional?
• Also I wonder if this code will upscale images, if for example it is 700px?

[stereobooster]

I can refactor code to use https://github.com/stereobooster/hugo-ideal-image if you want

[wolfspyre]

Would this break svg support?
I'm probably wrong, but in my mind, This evaluation is
if ( (not svg) AND $webp (which is a param bool) )
which I THINK would undesirably evaluate false in the case of:
is_svg? -> true
webp = false

I could be wrong tho.... I'm wrong a lot.

[stereobooster]

it will evaluate to false. But this branch is not meant for SVG. SVG is displayed in other branches

[stereobooster]

Since I wrote this code I come with more advanced and cleaner solution:

• https://github.com/stereobooster/hugo-ideal-image/blob/main/layouts/partials/picture.html
• https://github.com/stereobooster/hugo-ideal-image/blob/main/layouts/_default/_markup/render-image.html

I asked author if they want it to be integrated

[jpanther]

I can refactor code to use https://github.com/stereobooster/hugo-ideal-image if you want

I'm not particularly interested in including external modules into the base theme.

[stereobooster]

It's not a module, just an example implementation. I will inline all the code (which is picture.html) and then reuse it everywhere

[stereobooster]

closed in favour of #693