Automatic image format selection

APIs Images API
1

We’re using Contentful in combination with Next.js (and next/image), which allows us to intelligently transform images for different browsers.

Unfortunately, this doesn’t support switching image formats, preventing us from delivering next-gen images to modern browsers.

Does Contentful have any plans to add a auto option to the Image API’s format parameter? (determining the optimal format with the Accept header or User Agent sniffing)

Ideally, this would behave like Cloudinary’s f_auto parameter

Alternatively, are there any workarounds to enable this?

4 Likes
2

Agreed that this would be a great addition to the Image API. I’m in the same situation with Next and would like to use next/image but due to this restriction I can’t. My workaround is to use a custom component for the picture element and by specifying multiple source elements with webp and jpeg fallbacks you can mimic this behaviour. But this makes it a lot trickier to preload images using <link rel="preload"> so relying on loading="eager" is probably the best option until this is resolved.

Would be great if Contentful would consider adding this feature.

2 Likes
3

For anyone stumbling across this, our approach has been to miss out on image format optimization, but take advantage of resolution optimization with the following loader:

function contentfulImageLoader({ src, width, quality }: ImageLoaderProps): string {
  return `${src}?w=${width}&q=${quality || 75}&fit=fill&f=face`;
}

An alternative would be to proxy all image through Next’s image optimizer, but it definitely doesn’t feel like an ideal solution.

4

Hello @asher,

Source sets might be the solution you need if you want to, for example, display WebP images for Chrome and JPEG fallback for Safari. I wrote an article about it to Contentful’s blog a while ago, hopefully it’s useful to you.

6

Using the <picture> element with multiple <source> is an option for serving the correct image format for the client but that disables the ability to preload correctly using <link rel="preload" .../>.

With content negotiation we would be able to improve performance by both using preload as well as serving the best format for the current browser.

This is something that impacts everyone trying to increase image performance. And especially developers using NextJS (with next/image) with Contentful. Until it is added, will impact LCP.

1 Like
7

Does anyone know if this feature is even on the roadmap?

This feature would be really convenient to have, as right now the only alternatives are to use the picture element and image-set in CSS for background images. Unfortunately, both solutions make code much more verbose.

On the other hand all modern browsers support WebP format, so maybe one could use it as the default format as a workaround. However, this would not serve AVIF images to browsers that support it.

I understand it can make caching a bit harder, as then it’s not only based on the URL, but also on Accept header.