DEV Community

Praveen Puglia
Praveen Puglia

Posted on

1 1

How to use AVIF today!

Original Post: https://praveenpuglia.com/blog/how-to-use-avif-today/

Short one!

I am currently working on revamping my website, which I am hoping will be up soon! I am taking this opportunity to move away from Jekyll and choosing to go with Eleventy. To be honest, I am enjoying it quite a bit. Hopefully a post on that will soon be up.

One of the interesting things that I wanted to try out is to serve AVIF images because boy it compresses! Hoof! You can literally get the same quality in less than half the size.

Here' the thing though. AVIF support is pretty flaky at the moment. That means I would have to serve AVIF image to browsers that do support it and serve a diff format to those who don't.

Good'ol <picture> element comes to rescue. We declare multiple sources pointing to the same image in diff formats. The browsers pickup the best image they support. So Chrome and Opera end up serving AVIF to us and others serve the WEBP version.

<picture>
  <source srcset="home-banner.avif" type="image/avif" />
  <source srcset="home-banner.webp" type="image/webp" />
  <img
    class="home-banner"
    decoding="async"
    loading="lazy"
    src="home-banner.webp"
    alt="Home Banner"
  />
</picture>
Enter fullscreen mode Exit fullscreen mode

If you are wondering why we are using that <img> tag inside <picture>, please head over to MDN.

That's it!

Read More

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay