Author
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 AttributesThe 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.
<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">
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 DirectionThe <picture> element provides fine-grained control over which image is shown, depending on the device, viewport, or format support.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="City skyline" />
</picture>
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>
object-fit & object-positionSometimes, 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-positionControls the alignment of the image within the container:
img {
object-fit: cover;
object-position: center top;
width: 100%;
height: 300px;
}
<!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>