Image Loading on the Web

Images are usually the heaviest thing on a page. A few simple techniques go a long way toward making them feel instant.

Load less, later

Native lazy loading defers offscreen images until they are needed, while responsive sizes make sure each device downloads only as many pixels as it can show.

Serving modern formats like AVIF and WebP can cut file sizes in half with no visible difference, and a CDN that resizes on the fly means you never ship a 4000px photo to a phone.

Make the wait feel shorter

Blurred placeholders, dominant-color backgrounds and preloading the hero image all reduce layout shift and make the page feel faster than it is.

None of this is complicated on its own. Put together, it’s the difference between a page that feels heavy and one that feels instant.