Responsive images let you give the browser more than one image file to choose from. Instead of forcing every visitor to download the same large image, you can provide smaller and larger versions for different screens, layouts, and display densities.
The main attributes are srcset and sizes. Together, they help the browser choose an image that fits the space where it will actually appear.
Image-heavy pages can get slow when mobile users are forced to download desktop-sized images. Responsive images help reduce wasted bandwidth, improve page speed, and keep galleries, cards, articles, screenshots, and thumbnails lighter.
The src image is still the fallback. The srcset list gives the browser extra image choices.
<img
src="/images/photo-800.jpg"
srcset="/images/photo-400.jpg 400w,
/images/photo-800.jpg 800w,
/images/photo-1200.jpg 1200w"
sizes="100vw"
alt="Example landscape"
width="800"
height="533">
The 400w, 800w, and 1200w values describe the actual width of each image file. They do not mean “use this image at 400px screen width.” They tell the browser how wide each source file is.
srcset="/images/card-400.jpg 400w,
/images/card-800.jpg 800w,
/images/card-1200.jpg 1200w"
The sizes attribute tells the browser how wide the image is expected to appear in the layout. This helps it pick the best file from the srcset list.
<img
src="/images/card-800.jpg"
srcset="/images/card-400.jpg 400w,
/images/card-800.jpg 800w,
/images/card-1200.jpg 1200w"
sizes="(min-width:900px) 33vw, 100vw"
alt="Responsive card image"
width="800"
height="533">For a full-width hero image, the image may be close to the viewport width. If this is your main above-the-fold image, do not lazy-load it.
<img
src="/images/hero-1200.jpg"
srcset="/images/hero-640.jpg 640w,
/images/hero-1200.jpg 1200w,
/images/hero-1800.jpg 1800w"
sizes="100vw"
alt="Hero image"
width="1200"
height="675"
loading="eager">For a card grid, the image may be one-third of the viewport on desktop, half width on tablet, and full width on mobile.
<img
src="/images/thumb-600.jpg"
srcset="/images/thumb-300.jpg 300w,
/images/thumb-600.jpg 600w,
/images/thumb-900.jpg 900w"
sizes="(min-width:900px) 33vw,
(min-width:600px) 50vw,
100vw"
alt="Card thumbnail"
width="600"
height="400"
loading="lazy">
For a centered article column, the image might never be wider than the article content area. In that case, the sizes value should describe the article width, not just the viewport width.
<img
src="/images/article-800.jpg"
srcset="/images/article-480.jpg 480w,
/images/article-800.jpg 800w,
/images/article-1200.jpg 1200w"
sizes="(min-width:900px) 760px, calc(100vw - 32px)"
alt="Article example"
width="800"
height="500"
loading="lazy">
For small fixed-size images like icons, avatars, or badges, you may see 1x and 2x density descriptors instead of width descriptors.
<img
src="/images/avatar-80.jpg"
srcset="/images/avatar-80.jpg 1x,
/images/avatar-160.jpg 2x"
alt="User avatar"
width="80"
height="80">
Use <picture> when you need more control, such as serving a different image format, crop, or art direction for different layouts.
<picture>
<source
type="image/webp"
srcset="/images/photo-600.webp 600w,
/images/photo-1200.webp 1200w"
sizes="100vw">
<img
src="/images/photo-1200.jpg"
srcset="/images/photo-600.jpg 600w,
/images/photo-1200.jpg 1200w"
sizes="100vw"
alt="Responsive photo"
width="1200"
height="800"
loading="lazy">
</picture>For below-the-fold images, combine responsive image choices with native lazy loading. Responsive images decide which file to use. Lazy loading decides when the image should load.
<img
src="/images/example-800.jpg"
srcset="/images/example-400.jpg 400w,
/images/example-800.jpg 800w,
/images/example-1200.jpg 1200w"
sizes="(min-width:900px) 700px, 100vw"
alt="Example image"
width="800"
height="533"
loading="lazy">
Always include image dimensions. The width and height attributes help the browser reserve the right amount of space before the image loads.
<img
src="/images/card-800.jpg"
srcset="/images/card-400.jpg 400w,
/images/card-800.jpg 800w"
sizes="100vw"
alt="Card example"
width="800"
height="500"
loading="lazy">
<style>
img{
max-width:100%;
height:auto;
}
</style>Responsive images are useful for hero images, blog images, thumbnails, card grids, galleries, screenshots, product images, directory images, article images, and image-heavy pages where one file size does not fit every screen.
Common mistakes include forgetting the fallback src, writing inaccurate sizes, using huge images for every source, omitting width and height, lazy-loading the main hero image, or creating multiple image versions that are still too large.
Responsive images decide which file size the browser should use. Native lazy loading decides when below-the-fold images and iframes should load. They work well together, but they solve different problems.
Use srcset and sizes when you have the same image at different sizes. Use <picture> when you need different formats, different crops, or more explicit source control.
Use responsive images when the same image appears at different display widths across devices or layouts. They are especially useful for image-heavy pages, galleries, thumbnails, screenshots, and large article images.
Skip it for tiny decorative images, simple icons, small CSS background images, or pages where the image is already small, compressed, and only displayed at one size.
If you want to delay off-screen images and iframes, read the native lazy loading guide. If you want faster long-page rendering, read the content-visibility guide. If you need custom visibility logic, read the Intersection Observer guide.
Read more about responsive images on MDN Web Docs and web.dev.