Images not loading (the .avif problem)


I’m creating a website using the Connect, Card and Listing widgets.

I noticed that the cards and listings for an entire series of works do not have their image displayed on either the cards or the listings. This happens when in browsers like Safari (Mac), Safari (iOS) and Edge.

Looking at the code in DevTools, I noticed that the images come as .avif files. This type of image file is not supported in some versions of these browsers, so I concluded that this must be the problem.

In the original NFT, the uploaded images were in PNG format with transparency. Then Manifold converted those images to .avif… (don’t know why)

Is there any way to make the Card and complete-listing widgets display an image provided by me, forcing the widgets to load an image as a fallback to the avif images on the client-side?

Or is there any other workaround for this AVIF problem?

Everything else is working perfectly, hats off to the Manifold community!

The production version of the site is:
The code can be consulted at GitHub - vitorjaguat/auction-page2: Listings page for Manifold assets

Really appreciate any sort of help.

Hi. The reason the original pngs are converted to avif format for display is to reduce page load times. Avif is supported in the latest safari browsers but not some of the others, and not on edge. We’ll look into an alternative way to display images on these browsers (Eg go to jpg), however transparency will be lost in those scenarios.

Hi, we just deployed a change to use webp over avif due to browser compatability issues. Can you give it a shot now?

1 Like

Hi wilkins, yes, it looks like it’s working fine now! Thank you so much!!!
I have another doubt about the claim widget, but I will make another topic on this.
Thanks again!

Sounds good. By the way, you should be using the marketplace 3.4.0 widgets if you aren’t.