Having images that resize correctly on mobile is great, but for some reason, they weren’t loading on Safari mobile—only the alt text would appear. This means either the image isn’t loading or the browser can’t render the image. Since the images are delivered by Contentful’s CDN, and the images loaded fine on desktop, I could easily cross that off my list. Next, I considered the image format. Is it possible that in 2019, Safari (let alone Safari mobile) doesn’t support WebP? I realize now that the title is a big spoiler, but it’s true. Images weren’t loading on Safari mobile nor desktop Safari.

Initially, I looked for an auto option for Contentful’s image format parameter, but none existed. Then, after a quick Google, I came across srcset—an HTML attribute I’ve been waiting a long time to find a use for. Amongst other things, this attribute lets you specify an ideal image format that might not be supported by all browsers, so if the format isn’t support, the browser falls back to another specified format. The actual implementation might look like this:

<picture>
  <source type='image/webp' srcset='myimage.webp'>
  <img src='myimage.png'>
</picture>

The source tag also lets you specify different images for varying media queries, but I don’t need those—yet. For the time being, this works perfectly well for me.