GIF images delivered by images.prismic.io incompatible with Firefox

[jannisch]

This issue is not caused by prismic-client, but I couldn't find another way to contact your tech team.

Versions

• Firefox: 98.0.1
• OS: Windows 11

Reproduction

Open the Media library or view a page with embedded images served by images.prismic.io
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

What is expected?

(Microsoft Edge / Blink behaviour)

What is actually happening?

Since a few days or potentially weeks, GIF images can not be displayed in the Media library and when embedded in a website with the default parameters. The problem seems to be that the images are converted into image/avif. Firefox currently supports still AVIF images (which I can confirm), but not animated ones (see Bugzilla)

Solution

Please make sure that GIF images are not converted when opening in Firefox (user agent includes Firefox). All other still formats like JPG and PNG can still be converted into AVIF.

[lihbr]

Hey there, thank you so much for your contribution!

This issue is not caused by prismic-client, but I couldn't find another way to contact your tech team.

The issue is fine here no worries! I'm just flagging it with do not track for us as it's unrelated to @prismicio/client itself ☺️

---

I was able to reproduce the issue (still image on Firefox) and got more context about it.

Basically, Prismic uses imgix (another SaaS) as its image CDN. imgix gives you a lot of query parameters to manipulate images, among them some are for optimization and the one causing the issue here is auto=format. Prismic appends auto=format to every image it serves as it's considered a best practice and optimizes greatly images displayed on Prismic users' websites (basically, automatically saving a lot of bandwidth on the websites they make).

From imgix's documentation:

When auto=format is set, imgix determines whether the image can be served in a better format by a process called automatic content negotiation.

The part that's failing here is the "automatic content negotiation" part. In other words, Firefox is telling imgix that AVIFs are fine when in reality AVIF image sequences aren't. This is tracked by Firefox on Bugzilla as you pointed out already.

With that issue in mind, to imgix's credit, they cannot do much about it until either automatic content negotiation gets refined on Firefox or AVIG image sequences support gets implemented there.

With that context in mind, what can we do now:

On our end, we reported that issue to imgix and are hoping they add an exception on their CDN to fix this automatic content negotiation flaw for Firefox (internal: Slack thread)

On our end again, I'm not able to reproduce an empty image on the media gallery like your image above, I see a still image though (which is what I'd expect): https://user-images.githubusercontent.com/25330882/159688425-fc16d850-dae8-4ec7-a47c-f40b59eb4315.png. If this issue really last we'll consider removing the auto=format of images we display within our media gallery but I don't think we'll add a temporary patch on it soon as the image it still visible, just still.

On your end, you can remove format=auto from images you display on your website using the new asImageSrc() helper. I agree this is not convenient/feels wrong but it's the more direct way to solve the issue for now.

Basic, all images:

import * as prismicH from "@prismicio/helpers";

prismicH.asImageSrc(document.data.example_image, { auto: ["compress"] });

Advanced, only GIFs on Firefox:

import * as prismicH from "@prismicio/helpers";

// Checks if the client is Firefox, made this check really quickly, might be fragile
const isFirefox = navigator.userAgent.match(/firefox/i);

const disableFormatAutoForFirefoxGifs = (image) => {
	if (
		isFirefox
		&& prismicH.isFilled.image(image)
		&& new URL(image.url).pathname.endsWith(".gif")
	) {
		return { auto: ["compress"] };
	}

	return {};
}

prismicH.asImageSrc(
	document.data.example_image,
	{ ...disableFormatAutoForFirefoxGifs(document.data.example_image) }
);

Let us know if that answer your question and if we can help further ☺️

I'll keep this issue updated following imgix's effort~

[jannisch]

Dear Lucie, thanks a lot for your very detailed reply 🔥 I implemented the advanced workaround but still hope imgix is working on it

[lihbr]

Update 01/20/23:

Just a quick update on this issue to report that Firefox support for AVIF is still partial and does not support image sequence as of today.

[lihbr]

Firefox now supports AVIF's image sequences 🎉 (starting v113)

This GIF should be AVIF and animated when opened on Firefox: https://images.prismic.io/200629-sms-hoy/119601d5-37f2-411f-8d02-21253b56ca9b_damn.gif?auto=compress,format

Related Bugzilla ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=1686338