AVIF images are broken in Chrome Canary

[kamituel]

AVIF files generated by eleventy-img are not working in recent Chrome Canary.

The underlying issue is with libheif, used by sharp, used by eleventy-img.

I've raised related issues with Chromium and with sharp recently.

Opening one here as well so that maintainers are aware of the issue and will know to update sharp dependency as soon as the fixed version is released.

[zachleat]

Awesome, thank you!

[zachleat]

Also reported via Twitter https://twitter.com/freshyill/status/1390419540610363393

Progress was made today lovell/sharp#2666

[zachleat]

Per lovell/sharp#2666 (comment) this has been downgraded from a break-the-web emergency with a fix applied to Chrome Canary 😅

[jaredgorski]

Seen in Chrome Dev.

[zachleat]

@jaredgorski where at?

[jaredgorski]

@zachleat I migrated part of my personal site to use eleventy-img yesterday and it was working on every browser I tried until this morning when I logged into Chrome Dev (on my work machine) and checked to see if it's working here as well. I opened https://jaredgorski.org/writing/13-we-bought-an-old-truck on Chrome Dev (updated to latest) and I see alt text. Accessing the asset directly doesn't result in a download, but rather this:

According to my cursory research into these issues on Chrome Canary, the behavior I'm seeing on Chrome Dev matches. Figured I'd mention it here in case this comes as a surprise.

[zachleat]

@jaredgorski Yeah, I appreciate it. I’m eyeing this very closely. There are a bunch of broken images currently in Canary on the https://www.11ty.dev/ home page. I believe these were generated with an old version of sharp/eleventy-img and were checked into the repo? Not 100% sure. I was able to regenerate all of the Built With Eleventy avatars in the latest versions and those are working fine.

Can you try to regenerate your images with the newest versions?

[jaredgorski]

@zachleat Very interesting; the avatars are all broken in Chrome Dev Version 94.0.4590.0 (Official Build) dev (x86_64).

I'm using eleventy-img 0.9.0 on my site, but I can regenerate (after work today) and report back here with results.

I'm unsure of the exact relationship between Canary and Dev in terms of releases, but I wouldn't be surprised if Dev gets Canary code. It seems as if Dev is one step closer to Stable than Canary, since it's a weekly update rather than nightly.

[GrimLink]

I can confirm this issue also exists on the Beta version as of Chrome 93.
I am also using the latest version of eleventy-img (0.9.0).
In the issue on https://bugs.chromium.org/p/chromium/issues/detail?id=1198455#c28 it is also noted that this back as per this version do the 'pixi' box requirement.

https://github.com/strukturag/libheif/releases/tag/v1.12.0 has the fixed applied.
So it just waiting until v0.29 of https://github.com/lovell/sharp releases that will also contain this fix.

[jackysee]

I'm using Firefox Nightly, the newly generated avif is also broken.
Even worse, Firefox cannot fallback to other format in the <picture> tag.

[zachleat]

Shipped with sharp v0.29.0 lovell/sharp#2666

[zachleat]

Shipping with @11ty/eleventy-img v0.10.0

[zachleat]

Per actions failure https://github.com/11ty/eleventy-img/actions/runs/1143536646 this also needs #100.