Fast Pages with Very Large Pictures

A studio's website has a conflict built in. It has to show the work at full quality, and it has to load quickly on a phone in a taxi. For this site, we refused to pick one. Here's how that works.

Know what you're aiming for

Google's Web Vitals give three targets, measured at the 75th percentile of page loads: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less.

On a portfolio, LCP is nearly always a big picture, since it reports the render time of the largest image, text block or video in the viewport. That makes the hero image the thing to get right.

Keep the original, serve the right size

Nobody's phone needs a 5K picture. But a 5K screen does. So we keep every upload at full resolution and never recompress it on disk. The site then serves a copy made for the screen asking for it.

Responsive images make this work. srcset lists the candidates with their widths, sizes says how wide the slot is, and the browser picks. The sizes value needs to be accurate, or it'll fetch something too small or too big.

Format matters as well. AVIF supports lossy and lossless compression, and tests have shown more than 50% savings against JPEG in some cases. So we can keep quality very high and still send a much smaller file.

Reserve the space

Layout shift comes from pictures arriving late and pushing the page around. Every picture and film here has its real width and height measured when the site builds, so the frame is the right shape before anything loads.

Films only when they're needed

A page of case study films could download gigabytes. Here, a film loads only when it's near the screen, and plays only while it's on screen. Each has a poster, its first frame, so there's never an empty box. We also put an MP4's index at the start of the file, so that it can begin playing while it's still loading.

Respect reduced motion

Some people get ill from motion on screen, and they can say so in their device's settings. The prefers-reduced-motion media feature exposes this. All of our moving blocks check for it and hold still instead. It's a small amount of code, and it's easy to forget.

Motion that uses real pixels

Our moving galleries and strips move the real pictures in the browser, rather than playing a video of them. They stay sharp at any screen size, and they run only while on screen. The same scenes also render our social films.

For the kind of site where this matters most, have a look at Bold Italic, a film studio whose dark pages hand the screen over to the work. To talk about a site of your own, see our website development page.