Safari breaking with images <Image while pointing to prismic CDN

Developing with Prismic
,
1

Hi Prismic team,

I’ve noticed an issue with images delivered through Prismic when opened in Safari.

Example usage in a Next.js project:

<Image
  src="https://images.prismic.io/lovetales/aERYIbh8WN-LV2L8_2B211728-33C2-480E-A8C1-6A0BDC4F719E_1_105_c.jpeg?auto=format,compress"
  alt="Original photo"
  fill
  className="object-cover"
/>

This works fine in Chrome and Firefox, but in Safari some images appear broken.

After investigating, it looks like when using ?auto=format, Prismic sometimes serves formats (like certain WebP/AVIF variations) that Safari doesn’t support, or the Content-Type header doesn’t match the file extension. Safari then refuses to render the image.

Workarounds tested:

  • Removing auto=format → works in Safari.

  • Forcing a format explicitly (fm=jpg&compress) → works in Safari.

  • Letting Next.js handle the optimization instead of Prismic → also works.

Questions:

  1. Is this expected behavior with auto=format?

  2. Is there a recommended way to ensure Safari compatibility while still benefiting from automatic optimization?

  3. Could Prismic detect Safari capabilities more accurately before serving unsupported formats?

Thanks for your help!

Visible in production: https://lovetales.ai

Screenshot 2025-09-13 at 9.52.38 PM
Screenshot 2025-09-13 at 9.52.38 PM1920×966 56.2 KB

2

Hi Marving,

Thanks for the clear report and repro code.

Is this expected with auto=format? No. Our image CDN (imgix) should pick a format Safari accepts based on the request’s Accept header and send the matching Content-Type. If Safari gets an unsupported format or a mismatched Content-Type, that’s a bug (often cache/header-related), not expected behavior.

Recommended way to stay Safari-safe:

Easiest: force a format and keep compression: auto=compress&fm=webp (Safari 14+). If you must support older Safari, use fm=jpg or let Next/Image handle optimization (as you tested).

With Prismic’s components you can do:

<PrismicNextImage field={imageField} imgixParams={{ auto: 'compress', fm: 'webp' }} />

Can Prismic detect Safari more accurately? Format negotiation already uses Accept. If it’s failing, it’s usually due to caching without Vary: Accept or a Content-Type mismatch for a cached variant. We can investigate, but we’ll need specifics.

To help us dig in, could you share:

  1. A direct URL to one image that breaks (with auto=format).

  2. Safari version + OS (e.g., Safari 17.5 on macOS 14.5).

  3. The response headers for that URL from Safari’s Network panel (at least Content-Type, Content-Length, Cache-Control, Vary, and the request’s Accept).

  4. Whether you have any CDN/proxy in front of your site that might cache images.

In the meantime, these safe configs avoid AVIF edge cases:

Force WebP: ?auto=compress&fm=webp

Maximum compatibility: ?auto=compress&fm=jpg

If you prefer keeping auto=format, a temporary workaround is to rewrite requests from Safari <16 to add fm=webp at the edge/app level, but forcing fm via imgixParams is simpler.

Share one failing URL + headers and we’ll take a closer look.

3

Thank you for the insight @Phil !