How Google Photos’ Web UI Masters Speed, Scale, and Stunning Layouts

Secrets Revealed: How Google Photos Built a Lightning-Fast Web UI

Ever wondered how Google Photos delivers a seamless web experience, even with millions of photos? As a former engineer on the Google Photos team during its 2015 launch, I helped build the web UI, focusing on the photo grid. Our goal was ambitious: a full-width, aspect-ratio-preserving layout that’s scrubbable, handles hundreds of thousands of photos, scrolls at 60fps, and feels instantaneous. Here’s how we pulled it off.

Why Was This So Hard?

Two massive challenges stood in our way: size and speed.

1. Huge Metadata: Users with large collections—some with over 250,000 photos—generate megabytes of metadata (URLs, dimensions, timestamps). Sending it all at once would ruin our instant-loading goal.
2. Photo Size: Modern HDPI thumbnails (50KB+ each) add up quickly. Loading thousands could slow browsers to a crawl or crash them, as seen in older Google+ Photos, which lagged after 1,000–2,000 photos and crashed at 10,000.

We focused on four key areas: Scrubbable Photos, Justified Layout, 60fps Scrolling, and Instantaneous Feel. Let’s dive in.

1. Scrubbable Photos: Jump to Any Moment

Traditional pagination or infinite scrolling makes finding old photos a chore. We wanted a scrollbar that lets users jump anywhere in their library, like a document. The problem? Sending all photo metadata was impossible due to its sheer size.

The Solution

We split photo collections into server-side sections (e.g., by month or custom criteria like geolocation). On page load, we send only lightweight section counts and metadata summaries—even for millions of photos, this is tiny. For example, a user’s library might be summarized as “Jan 2023: 150 photos, Feb 2023: 200 photos.”

On the client side, we estimate section heights using photo counts and an average aspect ratio. When users scroll, we fetch detailed metadata for visible sections, break them into daily segments, and render the layout. If the estimated height differs from the actual, we shift subsequent sections in milliseconds, keeping the scrollbar accurate and seamless. This lets users scrub through years of photos effortlessly.

2. Justified Layout: Beauty Without Cropping

Most photo galleries crop images into squares for easy layouts. We refused to compromise on aspect ratios, aiming for a full-width grid with uniform spacing and preserved photo shapes.

The Simple Approach

A basic justified layout scales photos in a row to a fixed height, adjusting when the row exceeds the browser’s width. This works but often creates uneven row heights, especially with panoramas or odd-shaped photos.

The FlexLayout Breakthrough

We took inspiration from text line-breaking algorithms used in publishing. Our FlexLayout approach evaluates an entire section at once, considering every possible row combination to find the best layout. It treats photos as fixed units, allows row heights to flex within a range (e.g., slightly shorter or taller than a target like 180px), and assigns “badness” scores to non-ideal rows.

For 14 photos, FlexLayout might explore 19 row arrangements, forming 12 unique grids. It builds a map of possible breaks, assigns costs to each, and picks the optimal path. This produces more uniform row heights, handles panoramas gracefully, and minimizes awkward layouts. For 1,000 photos, it evaluates billions of layouts in just 10 milliseconds—fast enough to feel instant.

3. 60fps Scrolling: Smooth as Butter

A great layout is useless if scrolling feels sluggish. Browsers aim for 60fps (16ms per frame), leaving us ~10ms to update the grid without lag.

Keeping the DOM Lean

We only render ~50 visible photos at a time, removing off-screen ones to save memory and prevent crashes. Entire sections or segments are detached as groups for efficiency.

Minimizing Updates

We use absolute positioning to isolate changes—sections, segments, and photos are positioned relative to their parent, so adjusting one section doesn’t affect others. We also use CSS contain to tell the browser which elements can be updated independently. Scroll and resize events are batched to run once per frame, avoiding redundant calculations. By separating reads (checking positions) from writes (updating them), we prevent layout thrashing.

Smart Layout Timing

During browser resizes, we use quick estimates for non-visible sections and delay full FlexLayout calculations until users scroll to them, staying within the 10ms frame budget.

4. Instantaneous Feel: The Art of Illusion

Speed isn’t just technical—it’s about perception. We used clever tricks to make the grid feel faster than it is:

• Pre-loading: We load thumbnails for the next page and tiny placeholders (e.g., 889B vs. 71.2KB for HDPI thumbnails) for up to five screens ahead, prioritizing based on scroll direction and speed.
• Pixelated Placeholders: Low-res images are rendered pixelated (not smoothed) for a deliberate look without costly blur effects.
• Smooth Transitions: When replacing placeholders, we use a 100ms opacity fade. For full-screen views, we scale thumbnails instantly, then fade in the full image.

Empty sections use CSS-generated textures mimicking photo rows, sized to match the grid’s target height, so scrolling feels natural even before content loads.

The Payoff

The result? A Google Photos web UI that’s scrubbable, visually stunning, and blazing fast. FlexLayout has been ported to Android and iOS, ensuring consistency across platforms. The team monitors scrolling frame rates, load times, and other metrics to keep improving.

Next time you zip through Google Photos, watch for the pixelated placeholders during fast scrolls or the subtle loading textures. It’s a blend of engineering precision and a touch of UI magic, delivering a grid that feels alive and responsive, no matter how many photos you throw at it.