Best Practices for Responsive Images in CSS and HTML

In the early days of the web, serving images was simple. You uploaded a single image, set its width to 100%, and called it a day. Today, users visit your site on everything from 4-inch smartphones to 30-inch Retina monitors. Serving a large desktop image to a phone wastes mobile bandwidth.

Here are the best practices for implementing responsive images on modern websites.

1. Use the srcset and sizes Attributes

Instead of offering a single image file, use srcset inside the <img> tag to provide a list of different sizes of the same image. The browser will automatically download the most appropriate size based on the device screen width and pixel density (DPR).

<img 
  src="photo-800.jpg" 
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" 
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Sample Responsive Image"
/>

• 400w, 800w, 1200w tell the browser the actual width of each image file in pixels.
• sizes tells the browser what width the image will render at relative to the viewport.

---

2. Leverage Next-Gen Formats with the <picture> Tag

If you want to serve modern formats like AVIF or WebP while keeping JPEGs as a fallback for older browsers, wrap your image in a <picture> tag.

The browser will scan the <source> tags from top to bottom and load the first format it supports:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Responsive Next-Gen Image" loading="lazy" />
</picture>

---

3. Always Implement Lazy Loading

Lazy loading ensures the browser only requests and downloads images that are visible in the viewport. Images further down the page will load dynamically as the user scrolls.

Simply add loading="lazy" to your <img> or <picture> elements:

<img src="image.webp" alt="Lazy Loaded Image" loading="lazy" />

Note: Never lazy-load the hero image or any image that is above the fold, as this delays the Largest Contentful Paint (LCP) metric.