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>