braindump

Progressively deliver new image formats with CSS & Cloudflare Workers

Summary

Highlights

<picture>
    <source type="image/avif" srcset="zebra.avif">
    <source type="image/webp" srcset="zebra.zebra">
    <img alt="Zebra" src="zebra.jpg">
</picture>
background-image:
  image-set(
    "zebra.avif" type("image/avif"),
    "zebra.webp" type("image/webp"),
    "zebra.png" type("image/png")
  );

CSS workarounds

Writing your worker

Real world results