Use the HTML picture tag with 3 image formats .jpg .webp .jpf for best mobile performance

support
3

I would just use a single entry for the image file in the front matter since they are all the same except the extension then make a shortcode with this:

<picture>
    <source
      srcset="{{.Params.image}}.webp"
      type="image/webp">
    <source
      srcset="{{.Params.image}}.jp2"
      type="image/jp2">
    <source
      srcset="{{.Params.image}}.jxr"
      type="image/vnd.ms-photo">
    <img
      src="{{.Params.image}}.png"
      width="278"
      height="383"
      alt="Rebel">
</picture>

Then change your front matter image entry to this: images/blog/image-01 hopefully that gets you on the right path, good luck.

1 Like