Progressively deliver new image formats with CSS & Cloudflare Workers

 By James Ross - 2020-11-30

Description

Learn how you can deliver new image formats such as AVIF with CSS and Cloudflare Workers, improving user experience and Core Web Vitals.

Summary

  • Progressively delivering new image formats with CSS and Cloudflare Workers November 30, 2020 Progressive enhancement is a core strategy on the web that allows you to build on the foundation of your website and design, by adding additional features/components progressively where possible.
  • Jake Archibald has a great article talking about all of the great benefits of AVIF that you can check out on their blog if you'd like to read more.
  • The image-set function in CSS seems to be a step in the right direction, but browser support thus far is very fractured, and differs a lot between browsers.
  • This is okay, but excludes non-JS users, and requires you to have render-blocking JS in your head, unless you want images to be downloaded twice as the script is executed with defer, which would defeat the entire purpose of optimizing your page weight.

 

Topics

  1. UX (0.27)
  2. Frontend (0.22)
  3. Backend (0.05)

Similar Articles

An Interactive Guide to CSS Transitions

By joshwcomeau - 2021-03-06

This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.

By Responsible Web Applications - 2021-02-16

HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box