CSS Responsive Images

Responsive images are essential for modern web development. They ensure your website loads efficiently, adapts to various screen sizes, and looks perfect on all devices, from mobile phones to 4K displays. Here, we cover everything you need: srcset, sizes, the <picture> element, and CSS techniques like object-fit and object-position.

`srcset` & `sizes` Attributes

The srcset attribute lets you define multiple image sources with different widths or pixel densities, while the sizes attribute tells the browser the expected display size of the image. This ensures smaller images load on mobile, improving performance.

Syntax

<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" 
     sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px" 
     alt="Responsive example">

Retina/High-DPI Screens

You can also define density descriptors for high-resolution screens:

<img src="image.jpg"
  srcset="image.jpg 1x, [email protected] 2x"
  alt="High DPI image example" />

`<picture>` Element for Art Direction

The <picture> element provides fine-grained control over which image is shown, depending on the device, viewport, or format support.

Syntax Example

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="City skyline" />
</picture>

Responsive Art Direction

You can serve different images for different viewport sizes:

<picture>
  <source srcset="hero-mobile.jpg" media="(max-width: 600px)">
  <source srcset="hero-desktop.jpg" media="(min-width: 601px)">
  <img src="hero-desktop.jpg" alt="Responsive hero image">
</picture>

CSS `object-fit` & `object-position`

Sometimes, images need to be cropped or scaled to fit a container while maintaining visual quality. The CSS property object-fit is ideal for this.

`object-fit` Values

Value	Description	Use Case
cover	Fill the container, crop excess parts if necessary	Hero banners, card thumbnails
contain	Fit the whole image inside container, may leave empty space	Product images, profile photos
fill	Stretch to fill container, may distort image	Background-style images
none	Keep original size, overflow if container is smaller	Decorative images
scale-down	Behaves like `none` or `contain` whichever is smaller	Responsive thumbnails

`object-position`

Controls the alignment of the image within the container:

img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 300px;
}

Complete HTML + CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Images Example</title>
  <style>
    .hero {
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
    .hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .gallery img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <section class="hero">
    <picture>
      <source srcset="hero-mobile.webp" media="(max-width: 600px)">
      <source srcset="hero-desktop.webp" media="(min-width: 601px)">
      <img src="hero-desktop.jpg" alt="Stunning landscape">
    </picture>
  </section>

  <section class="gallery">
    <img src="photo-480.jpg"
         srcset="photo-480.jpg 480w,
                 photo-768.jpg 768w,
                 photo-1200.jpg 1200w"
         sizes="(max-width: 600px) 480px,
                (max-width: 900px) 768px,
                1200px"
         alt="Beautiful mountain">
    <img src="photo2.jpg" alt="City skyline" style="object-fit: contain;">
  </section>

</body>
</html>

CSS Handbook

CSS Handbook