AVIF and CSS Media Queries for Responsive Images

Combining the AVIF image format with CSS media queries enables web developers to deliver highly optimized, visually rich assets tailored to any screen size or display density. This article explores how AVIF's superior compression efficiency integrates with CSS responsive techniques—such as media queries and resolution switching—to significantly reduce payload sizes, accelerate Largest Contentful Paint (LCP), and maintain crisp visual fidelity across diverse devices.

Superior Compression at Any Resolution

AVIF (AV1 Image File Format) offers significantly better compression than older formats like JPEG, PNG, and even WebP. When delivering responsive imagery, developers traditionally faced a trade-off: serve a lower-resolution file to save bandwidth, or serve a high-density (2x/3x) asset that slows down page loads.

Because AVIF reduces file sizes by up to 50% compared to standard formats at equivalent visual quality, pairing it with media queries allows you to serve ultra-high-resolution assets to high-DPI (Retina) screens without the typical bandwidth penalty. A 2x AVIF image often weighs less than a standard 1x JPEG.

Implementing AVIF via CSS Media Queries

In pure CSS, responsive background images are typically handled by swapping image assets based on viewport width or screen resolution. Media queries check the device state, while functions like image-set() manage format negotiation and pixel density.

/* Responsive background image with format fallbacks */
.hero-banner {
  background-image: url("banner-mobile.jpg");
}

@media (min-width: 768px) {
  .hero-banner {
    background-image: image-set(
      url("banner-desktop.avif") type("image/avif"),
      url("banner-desktop.webp") type("image/webp"),
      url("banner-desktop.jpg") type("image/jpeg")
    );
  }
}

By combining @media rules with image-set(), the browser only downloads the AVIF asset if it supports the format and matches the designated viewport criteria, preventing wasted bandwidth on unsupported clients or non-matching viewports.

Pairing AVIF with Media Queries in HTML

Responsive imagery frequently bridges CSS and HTML. The HTML <picture> element utilizes CSS media queries directly via the media attribute while simultaneously handling format switching using the type attribute.

<picture>
  <!-- Desktop viewports: AVIF first, then fallback -->
  <source media="(min-width: 1024px)" srcset="large.avif" type="image/avif">
  <source media="(min-width: 1024px)" srcset="large.jpg" type="image/jpeg">

  <!-- Tablet and Mobile viewports -->
  <source media="(min-width: 600px)" srcset="medium.avif" type="image/avif">
  <source media="(min-width: 600px)" srcset="medium.jpg" type="image/jpeg">

  <!-- Default fallback -->
  <img src="small.jpg" alt="Responsive visual content" loading="lazy">
</picture>

The browser evaluates these media queries sequentially. When a query matches, the browser evaluates the type attribute, selecting the AVIF source if supported. This ensures that smaller mobile screens receive appropriately scaled AVIF files, while larger desktop displays receive high-dimension AVIF files, all with fallback mechanisms in place.

Handling Variable Pixel Densities

CSS media queries also evaluate device pixel ratios (DPR) through queries like (-webkit-min-device-pixel-ratio: 2) or @media (resolution: 2dppx).

AVIF shines in high-density responsive workflows. Artifacts that commonly appear in aggressively compressed JPEGs (such as color banding and blocking) are far less pronounced in AVIF. This enables aggressive compression curves on high-DPR devices where individual pixels are smaller and compression artifacts are harder for the human eye to detect.

Core Performance Advantages

  1. Lower Bandwidth Consumption: Serving appropriately sized AVIF assets across different breakpoints minimizes data consumption, particularly for mobile users on metered connections.
  2. Optimized Core Web Vitals: Delivering smaller, properly proportioned images accelerates page render times, directly improving Largest Contentful Paint (LCP) scores.
  3. Reduced Decoding Overhead: While AVIF decoding can be CPU-intensive on older hardware, serving smaller, viewport-specific dimensions rather than a single oversized image reduces the memory and compute overhead required to decode the file.