How to use <picture> to provide webp images?

Using Ghost
1

Hi there,

how can I make use of picture tags to provide img’s with webp files?

WebP support was added with 4.9.0 and I already read the responsive asset manual page.

Therefore, I already know that I can use responsive images via

<img class="post-image"
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 600w,
            {{img_url feature_image size="l"}} 1000w,
            {{img_url feature_image size="xl"}} 2000w"
    sizes="(max-width: 1000px) 400px, 700px"
    src="{{img_url feature_image size="m"}}"
    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>

Which is great. But how do I enhance this to this?

<picture class="post-image"> ↓↓ something like this ↓↓
  <source                           ↓↓↓↓↓↓↓↓↓↓↓
    srcset="{{img_url feature_image type="webp" size="s"}} 300w,
            {{img_url feature_image type="webp" size="m"}} 600w,
            {{img_url feature_image type="webp" size="l"}} 1000w,
            {{img_url feature_image type="webp" size="xl"}} 2000w"
    sizes="(max-width: 1000px) 400px, 700px"
    type="image/webp"
  />
<img
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 600w,
            {{img_url feature_image size="l"}} 1000w,
            {{img_url feature_image size="xl"}} 2000w"
    sizes="(max-width: 1000px) 400px, 700px"
    src="{{img_url feature_image size="m"}}"
    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>

Any help appreciated

PS: In the assets manual page, you could rephrase this sentence:

Responsive images can be defined in the package.json file.

To

Responsive images can be defined in the package.json file of your current theme.

I searched the package.json for a while until I realized that you probably meant the theme’s package.json file

2

You can upload jpg/png or webp versions of your images. There’s no automatic generation of different formats.

3

Thanks for the quick reply.

That’s unfortunate. Is this a feature, which gets developed in the near future?

Currently, I need to upload the image twice. How to I render the picture tag? How can this be done for the featured image?
How Could you please provide a short guide?

Kind regards

4

Images can only have one source, if you want webp images then they need to be uploaded in webp format. Support for webp wasn’t introduced until it had very wide browser support so it should be pretty safe to just use webp.

5

Okay, so there is no possibility to include a jpeg as fallback as of now?

6

Correct.

7

Webp is not supported on Safari on macOS older than Big Sur, so no, it is not “pretty safe” to provide just webp. Can we have a way to convert the images upon upload and get webp URLs in the img_url helper? As well as have post images use that.