responsive images
Also called: srcset, srcset and sizes, adaptive images, picture element
Responsive images serve an appropriately sized version of an image to each device using the HTML srcset and sizes attributes (or the picture element), so a phone downloads a small file and a large retina desktop gets a sharp one. This cuts wasted bytes and speeds page load.
Every image file has an intrinsic width. The problem responsive images solve is that one fixed file is either too heavy for a phone or too soft for a large high-density screen. The fix lives in plain HTML markup.
How the browser picks a file
With srcset you list candidate files and their real widths, and sizes tells the browser how wide the image will actually render in the layout. The browser reads screen size, pixel density, and viewport, then loads the smallest candidate that still fills the slot.
<img
srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(width <= 600px) 480px, 800px"
src="hero-800.jpg"
alt="Product on a desk">For a fixed display size on high-density screens, use pixel-density descriptors like hero.jpg 2x instead of width descriptors. When you need a different crop per breakpoint (art direction), wrap <source> tags in a <picture> element and switch on media.
Why not handle this in CSS or JavaScript? Browsers preload images before CSS and JS have run, so the sizing decision has to sit in the markup itself. That preload behavior is also why a wrong sizes value quietly forces oversized downloads even when the visible image looks fine.
How it affects your traffic
Images are often the largest contributor to a page's total weight, and Google states that oversized images make pages slow and expensive to load. On mobile that shows up as sluggish loads that push visitors away and weaken the page-speed signals Google measures. Google's own image documentation tells developers to use srcset or the picture element, so this is table stakes, not a nice-to-have. Our On-Page SEO work audits every template's images and ships correct srcset and sizes so one page serves a light file to phones and a crisp file to desktops.
Get On-Page SEO that moves the needle
We turn terms like this into ranked pages and qualified pipeline. Start with a free Initial SEO Strategy.