Quick Summary
Responsive images have always been one of the more complicated parts of responsive web design. A layout can adapt to different screen sizes relatively easily, but images introduce another problem: the browser still has to decide which file to download. Loading one large image everywhere may look fine visually, but it can force users on slower connections or smaller devices to download far more data than they actually need.
The challenge is that screen size alone does not tell us everything about the user. Someone browsing from a desktop computer may have a slow connection, while someone using a phone may be connected to high-speed Wi-Fi or 5G. Device type, viewport size, pixel density, connection speed, and the actual purpose of the image can all affect which version makes the most sense.
Responsive image techniques help solve this problem by giving browsers multiple image options and allowing the most appropriate resource to be selected for the situation. CSS can handle some cases very effectively, particularly background images, while HTML provides better tools when the image is part of the actual page content.
Responsive Images with CSS
When an image is being used as part of the visual presentation rather than as meaningful page content, CSS media queries can be a simple way to serve different image sizes. Instead of loading the same large background image on every device, the stylesheet can reference smaller or larger versions depending on the available screen width.
body {
background-image: url("image-small.jpg");
}
@media (min-width: 500px) {
body {
background-image: url("image-medium.jpg");
}
}
@media (min-width: 800px) {
body {
background-image: url("image-large.jpg");
}
}This approach gives designers more control over which asset appears at different breakpoints. A smaller mobile image can reduce unnecessary file weight, while larger screens can receive a version with enough resolution to remain sharp.
CSS also supports higher-resolution images for displays with greater pixel density. The image-set() function can provide multiple versions of the same image and allow the browser to select the appropriate asset.
.hero {
background-image: image-set(
url("hero.jpg") 1x,
url("hero@2x.jpg") 2x
);
}This is more efficient than automatically sending the highest-resolution file to every visitor. A high-density display can receive the sharper version while other devices can use a smaller asset.
Screen Size Is Only Part of the Problem
One limitation of relying entirely on CSS breakpoints is that viewport width does not necessarily reflect connection quality. A large screen does not guarantee a fast connection, and a small screen does not necessarily mean bandwidth is limited.
This is why responsive images are ultimately a resource-selection problem rather than simply a layout problem. The browser needs enough information to choose an image that provides acceptable visual quality without downloading unnecessary data.
For background images, CSS can often provide enough control. For images that appear directly inside the page content, HTML offers more appropriate tools.
Responsive Images in HTML
The srcset attribute allows developers to provide multiple versions of an image at different widths. The browser can then determine which file is appropriate based on the layout, viewport, and display characteristics.
<img
src="product-800.jpg"
srcset="
product-400.jpg 400w,
product-800.jpg 800w,
product-1200.jpg 1200w
"
sizes="
(max-width: 600px) 100vw,
800px
"
alt="Product image"
>Instead of forcing every user to download the largest file and then shrinking it visually with CSS, the browser can select a smaller source when that is sufficient. This reduces transferred data and can improve page performance considerably, particularly on image-heavy websites.
The <picture> element provides additional control when different image compositions are required. For example, a wide desktop hero image may need to be replaced with a tighter crop on mobile rather than simply scaled down.
<picture>
<source
media="(max-width: 600px)"
srcset="hero-mobile.jpg"
>
<img
src="hero-desktop.jpg"
alt="Featured collection"
>
</picture>This allows responsive design to address both performance and composition. The mobile visitor receives an image designed for the available space instead of a desktop image reduced until the important subject becomes difficult to see.
Why Width: 100% Is Not Enough
A common responsive technique is to apply max-width: 100% to images so they never overflow their containers. This remains useful for layout, but it does not solve the underlying performance problem.
img {
max-width: 100%;
height: auto;
}If the original file is 2500 pixels wide, the browser may still download that entire file even when the image is ultimately displayed at only 400 pixels wide. The CSS prevents the layout from breaking, but the visitor still pays the performance cost of the larger asset.
This matters significantly for e-commerce websites where product photography, editorial images, banners, and collection pages can introduce dozens of large assets into a single customer journey.
Responsive Images and E-commerce Performance
Images are often among the largest resources on an e-commerce page. Product photography is essential to the buying experience, but poorly optimized images can also become a major source of page weight.
Serving appropriately sized assets allows brands to maintain strong visual quality while reducing unnecessary downloads. Modern formats such as WebP and AVIF can further reduce file size when supported, particularly when combined with responsive image markup.
The objective is not simply to compress every image as aggressively as possible. Product imagery still needs enough detail for customers to evaluate materials, colors, textures, and construction. The better approach is to deliver the level of detail required for the size at which the image will actually be viewed.
A thumbnail on a collection page does not need the same file as a full-screen product gallery. A mobile hero does not necessarily need the same dimensions as a desktop banner. Giving each context an appropriately sized source creates a better balance between visual quality and performance.
Let the Browser Do More of the Work
Early responsive image techniques often depended on JavaScript, server-side detection, cookies, or complicated device assumptions. Modern browsers can now handle much of this decision-making natively when they are given the appropriate image sources.
This is generally preferable because the browser knows more about the current environment than the website can infer from screen width alone. Responsive markup provides options rather than attempting to predict every possible device.
CSS still plays an important role for decorative imagery and responsive layouts. HTML responsive image features handle content images more effectively. Used together, these techniques give developers much more control over image performance without requiring separate websites for different devices.
Quick Summary
Responsive images are not simply about making images visually resize with the page. The more important problem is making sure visitors download an image appropriate for the context in which it will actually appear.
CSS media queries and image-set() work well for responsive background images. For content images, srcset, sizes, and the <picture> element allow browsers to select between multiple image sources based on layout and display requirements.
Using the same oversized image on every device may be easier to implement, but it creates unnecessary page weight and can negatively affect performance. Responsive image delivery gives websites a better balance between visual quality, speed, and usability across devices.
