Design Responsive Images and Media Loading

Performance & Reliability · performance, loading, responsive

Updated 2026-07-28

Never send a desktop image to a phone. Serving one large file to every device is the most common and most expensive performance mistake in a visual product.
Define the aspect ratio in the layout so the space is reserved before the file arrives. Images that pop in and resize the page are a layout shift with a picture attached.
Choose the loading strategy per position:

The main image above the fold loads eagerly and with high priority.
Everything below the fold loads lazily.
Images inside a collapsed panel or an unopened tab do not load at all until opened.

Give lazy loading a margin so images start arriving slightly before they are needed. Loading exactly at the viewport edge means users see the placeholder every time they scroll.
Show something in the meantime that matches the final image, such as a dominant colour or a blurred thumbnail. A grey box tells the user nothing about what is coming.
Do not autoplay video below the fold. A clip with autoplay downloads in full regardless of the preload hint, which can cost more than the rest of the page combined.
Treat the poster frame as the real design. Most viewers never press play, so the still has to carry the message on its own.
Cap what a single screen can pull. A gallery that loads two hundred full-size files is a design decision, not a technical inevitability.

Images are usually the heaviest thing you ship, so their loading behaviour deserves the same attention as their crop.