Introduce using AVIF back

[yangwao]

Seems right now, when users browse collections & explorer, doesn't seem we are using AVIF, especially on a slower net, and when people want to browse fast, it would improve the experience a lot. Back in days, we had it, but it seems not anymore.

Let's review that. The best would be to make some image container handlers to include this support.

Ref

• https://github.com/kodadot/nft-gallery/issues/4426
• https://github.com/kodadot/nft-gallery/issues/3829
• https://github.com/kodadot/nft-gallery/issues/3828
• https://blog.cloudflare.com/images-avif-blur-bundle/
• https://avif.io/blog/tutorials/cloudflare/
• https://blog.cloudflare.com/generate-avif-images-with-image-resizing/
• https://caniuse.com/avif

[yangwao]

Someone can review this on https://beta.kodadot.xyz if we are using AVIF already? If so let's close this one

[yangwao]

It's bettwe with webp, yet I guess it's not avif?

Seems for AVIF needs client to tell supports it?

const WEBP_ACCEPT_HEADER = /image\/webp/i;
const AVIF_ACCEPT_HEADER = /image\/avif/i;

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event));
});

async function handleRequest(event) {
  const request = event.request;
  const url = new URL(request.url);

  const headers = new Headers(request.headers);

  const accept = headers.get("accept");

  let format = undefined;

  if (WEBP_ACCEPT_HEADER.test(accept)) {
    format = "webp";
  }

  if (AVIF_ACCEPT_HEADER.test(accept)) {
    format = "avif";
  }

  const resizingReq = new Request(url, {
    headers,
    cf: {
      image: { ..., format },
    },
  });

  return fetch(resizingReq);
}

learn more - https://blog.cloudflare.com/images-avif-blur-bundle/

[preschian]

Closing this since cf-images automatically serve AVIF based on browser support. this is on chrome