The right image for every screen.

Images are usually the heaviest part of a page. Here the same photo exists in three real sizes and your browser picks the smallest one that still looks sharp on your screen.

Why it matters

Faster pages win customers.

Most local searches happen on a phone, often on a mobile connection. Sending a phone the same large image as a desktop wastes data and time, and slow pages lose visitors and rank lower in search.

Resolution switching with srcset

Browser mockup of the Ridgeline Plumbing & Air demo website showing a hero section with a call button — Resize your window and reload to see the browser choose a different file.

File sizes of the variants used above, measured from the generated files
File	Width	Size
work-ridgeline-480.webp	480 px	12.3 KB
work-ridgeline-960.webp	960 px	32.4 KB
work-ridgeline-1440.webp	1440 px	54.6 KB

A phone that picks the 480 px file downloads 12.3 KB instead of 54.6 KB, about 77 percent less.

Art direction with picture

On narrow screens the picture element swaps in a square crop (21.8 KB) instead of shrinking the wide image.

Crop of the Ridgeline Plumbing & Air demo website, square on narrow screens and wide on larger ones

What is under the hood

srcset with width descriptors lists the files; sizes tells the browser how wide the image will be shown, so it can choose before layout.
width and height reserve space, which prevents the page jumping as images load.
loading="lazy" and decoding="async" keep off-screen images from slowing the first view.
Files are WebP, generated from the originals with a script before the build.

Back to the lab