Responsive Images

Learn how to make images adapt to any screen size without wasting bandwidth or breaking layouts.

Step 1 of 6

Why images need special treatment

By default, an image displays at its natural pixel dimensions. A 2000px-wide photo will be 2000px wide on screen — blowing past the edges of a phone screen and creating a horizontal scrollbar. Unlike text, which naturally wraps to fit its container, images are rigid rectangles. They don't reflow.

But the problem goes deeper than layout. A 2000px-wide image might be 500KB or more. On a phone screen that's only 375px wide, most of those pixels are wasted — the browser downloads a huge file and then shrinks it down visually. The user waits for a massive download they can't even see at full resolution. On slow mobile connections (3G, spotty Wi-Fi), this can mean several seconds of loading time for a single image. Instagram solves this by serving different image sizes for different screens: a small image for phone thumbnails, a medium image for the feed, and the full resolution only when you zoom in. Responsive images give you the same power — serve the right image for the right screen.

Think of it this way: Imagine ordering a poster to hang in a small frame. The store sends you a billboard-sized poster because that's the original size. You have to cut it down to fit your frame, but you still paid for shipping a billboard. Responsive images are like a store that asks 'what size frame do you have?' and sends exactly the right size — saving shipping costs (bandwidth) and fitting perfectly.

Web Standard

Images are typically the largest files on a web page — often 50-80% of total page weight. The Lighthouse performance audit specifically checks for properly sized images. Serving oversized images is one of the most common performance problems on the web, and responsive images are the standard solution.

Learn more on MDN

HTMLMDN: Responsive images HTMLMDN: <img> element

HTMLREAD ONLY

PREVIEW