Understanding srcset and Connection-Aware Image Loading

Your Actual Use Case

Mobile: No modals, just scrolling gallery (filmstrip)
Desktop: Gallery grid + modals

Your goals:

1. Gallery (both mobile & desktop): Fast loading, prioritize speed
2. Desktop modals: High-res images IF connection is fast enough
3. Reality check: Browsers may not reliably use connection speed in srcset decisions

The Browser Reality Check

What Browsers Actually Consider (in practice)

Based on testing with network throttling, browsers prioritize:

1. Viewport size (most weighted)
2. Device pixel ratio (Retina displays)
3. Connection speed (least weighted, may be ignored)

Your observation is correct: Browsers may load high-res images even on slow connections if the viewport/pixel density suggests it.

What srcset Actually Does

srcset tells the browser “here are your options,” but the browser decides based on:

• Display size (viewport × pixel density)
• Available image sizes
• Connection speed (if browser chooses to check it)

The problem: Browsers don’t reliably check connection speed, so you can’t count on it.

Strategy 1: Hardcode Gallery, srcset for Modals

Gallery Images: Just Use Low-Res (No srcset)

<!-- Gallery: Always fast, always low-res -->
<img 
  src="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif"
  alt="Tower vertical">

Why:

• Gallery is for browsing, not detailed viewing
• Fast loading is more important than pixel-perfect quality
• Removes complexity - no guessing what browser will do
• Works great on slow connections (your priority)

Desktop Modals: Wrap <source> Variants in <picture>

Gallery cards still use the simple <img> above, but desktop modals follow the pattern documented in docs/photos-html.md: every modal is a <picture> whose <source> tags carry the width variants, while the <img> remains a lightweight fallback. That keeps the heavier 1200–3600 px files from downloading until the modal is actually opened.

<picture>
  <source
    media="(min-width: 769px)"
    type="image/avif"
    srcset="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif 600w,
            https://photos.alabut.com/shelterisland/tower-vertical-900w.avif 900w,
            https://photos.alabut.com/shelterisland/tower-vertical-1200w.avif 1200w,
            https://photos.alabut.com/shelterisland/tower-vertical-2400w.avif 2400w,
            https://photos.alabut.com/shelterisland/tower-vertical-3600w.avif 3600w"
    sizes="800px">
  <img
    src="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif"
    alt="Tower vertical"
    class="modal-image"
    fetchpriority="low"
    decoding="async">
</picture>

Why sizes="800px":

• Tells the browser that the modal image renders at ~800 px
• Prevents the browser from assuming 100 vw (which would trigger 1920 px downloads)
• Works nicely with the modal layout described in docs/photos-html.md

Trade-off:

• Browser may still grab the 3600 w source on slow connections (pixel density wins over bandwidth), but the download is delayed until the modal is visible.

Strategy 2: All srcset, But with sizes to Guide Decisions

Gallery Images: srcset with sizes to Force Low-Res

<!-- Gallery: Tell browser image is small, so it picks low-res -->
<img 
  srcset="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif 600w,
          https://photos.alabut.com/shelterisland/tower-vertical-3600w.avif 3600w"
  sizes="250px"
  src="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif"
  alt="Tower vertical">

Why sizes="250px":

• Gallery grid columns are ~250 px wide
• Browser calculates: 250 px × DPR = needed pixels (600 w covers every case)

Desktop Modals: Still Use <picture> + <source>

Even in this approach the modal structure mirrors the snippet above: wrap your variants in <source> so they don’t download until the modal shows. The sizes="800px" guidance still applies.

Comparison: Which Strategy?

Strategy 1: Hardcode Gallery, srcset Modals

Pros:

• ✅ Gallery is guaranteed fast (no guessing)
• ✅ Simpler code (no srcset or sizes in gallery)
• ✅ Works perfectly on slow connections

Cons:

• ❌ Gallery images might look slightly soft on Retina displays (but acceptable for thumbnails)

Strategy 2: srcset Everywhere with sizes

Pros:

• ✅ Gallery can potentially use higher-res on Retina (but may not due to sizes="250px")
• ✅ Consistent approach (both use srcset)

Cons:

• ❌ More complex
• ❌ Still relies on browser making good decisions (which may not check connection speed)

Recommendation: Strategy 1

Hardcode low-res for gallery, use srcset for desktop modals only.

Why:

1. Gallery speed is your priority - hardcoding guarantees it
2. Modals are where quality matters - srcset there makes sense
3. Simpler code - less to maintain, less to debug
4. Acknowledges browser limitations - doesn’t rely on connection speed checking

Implementation

<!-- Gallery: Always fast -->
<img 
  src="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif"
  alt="Tower vertical">

<!-- Desktop Modal: Let browser choose (with awareness it may not check connection speed) -->
<img 
  srcset="https://photos.alabut.com/shelterisland/tower-vertical-600w.avif 600w,
          https://photos.alabut.com/shelterisland/tower-vertical-3600w.avif 3600w"
  sizes="800px"
  src="https://photos.alabut.com/shelterisland/tower-vertical-3600w.avif"
  alt="Tower vertical">

About sizes in Modals

The sizes="800px" in modals tells the browser:

• “This image will be displayed at approximately 800px wide”
• Browser calculates: 800px × pixel density = needed pixels
• Without sizes: Browser assumes 100vw (could be 1920px), might load 3600w even when not needed
• With sizes="800px": Browser knows it needs ~800px, makes more informed decision

But: Browser still may load 3600w on slow connections if it prioritizes quality over speed (which is common).

Conclusion

• ✅ Gallery: Hardcode low-res (fast, simple, reliable)
• ✅ Desktop Modals: Use srcset with sizes="800px" (high-res when appropriate)
• ⚠️ Reality: Browsers may not check connection speed, so high-res may load on slow connections
• ✅ Acceptable trade-off: Modals are where users expect quality, and it’s only desktop (not mobile)

This approach prioritizes speed where it matters most (gallery) and allows quality where users expect it (modals), while acknowledging browser limitations.