Created
February 8, 2026 23:00
-
-
Save brandonhimpfen/b9de66f55b97f01a32b06f0958a4278b to your computer and use it in GitHub Desktop.
Responsive image patterns using srcset + sizes (with WebP/AVIF via <picture>), plus practical examples for width- and density-based images.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Responsive Images: srcset + sizes</title> | |
| <style> | |
| /* Demo-only styling */ | |
| .container { max-width: 900px; margin: 2rem auto; padding: 0 1rem; } | |
| img { max-width: 100%; height: auto; display: block; border-radius: 12px; } | |
| figure { margin: 0 0 2rem; } | |
| figcaption { font: 14px/1.4 system-ui, sans-serif; color: #444; margin-top: .5rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- ------------------------------------------------------------------ | |
| Pattern 1: Width-based responsive images (recommended) | |
| - Use `srcset` with WIDTH descriptors (e.g., 480w, 960w) | |
| - Provide `sizes` to tell the browser how big the image will be | |
| - Always set width/height to reduce layout shift (CLS) | |
| - Add loading/decoding for performance | |
| ------------------------------------------------------------------- --> | |
| <figure> | |
| <picture> | |
| <!-- Modern formats first --> | |
| <source | |
| type="image/avif" | |
| srcset=" | |
| /images/hero-480.avif 480w, | |
| /images/hero-768.avif 768w, | |
| /images/hero-1024.avif 1024w, | |
| /images/hero-1440.avif 1440w | |
| " | |
| sizes="(max-width: 600px) 100vw, (max-width: 900px) 90vw, 900px" | |
| /> | |
| <source | |
| type="image/webp" | |
| srcset=" | |
| /images/hero-480.webp 480w, | |
| /images/hero-768.webp 768w, | |
| /images/hero-1024.webp 1024w, | |
| /images/hero-1440.webp 1440w | |
| " | |
| sizes="(max-width: 600px) 100vw, (max-width: 900px) 90vw, 900px" | |
| /> | |
| <!-- Fallback (e.g., jpg/png) --> | |
| <img | |
| src="/images/hero-1024.jpg" | |
| srcset=" | |
| /images/hero-480.jpg 480w, | |
| /images/hero-768.jpg 768w, | |
| /images/hero-1024.jpg 1024w, | |
| /images/hero-1440.jpg 1440w | |
| " | |
| sizes="(max-width: 600px) 100vw, (max-width: 900px) 90vw, 900px" | |
| width="1440" | |
| height="900" | |
| alt="A scenic landscape used as a responsive hero image" | |
| loading="lazy" | |
| decoding="async" | |
| /> | |
| </picture> | |
| <figcaption> | |
| Pattern 1: Width-based <code>srcset</code> + <code>sizes</code> with AVIF/WebP fallback. | |
| </figcaption> | |
| </figure> | |
| <!-- ------------------------------------------------------------------ | |
| Pattern 2: Density-based responsive images (1x/2x) | |
| - Best for icons or images that display at a fixed CSS size | |
| - Use `1x`, `2x` descriptors instead of widths | |
| ------------------------------------------------------------------- --> | |
| <figure> | |
| <img | |
| src="/images/avatar@1x.jpg" | |
| srcset="/images/avatar@1x.jpg 1x, /images/avatar@2x.jpg 2x" | |
| width="160" | |
| height="160" | |
| alt="User avatar" | |
| loading="lazy" | |
| decoding="async" | |
| style="width: 160px; height: auto;" | |
| /> | |
| <figcaption> | |
| Pattern 2: Density-based <code>srcset</code> (<code>1x</code>/<code>2x</code>) for fixed-size images. | |
| </figcaption> | |
| </figure> | |
| <!-- ------------------------------------------------------------------ | |
| Quick rules of thumb | |
| - Prefer width-based srcset for content images (most cases) | |
| - Use density-based srcset for fixed-size images (icons/avatars) | |
| - Always include alt text | |
| - Include width/height to reduce layout shift | |
| - Keep sizes accurate to avoid downloading oversized images | |
| ------------------------------------------------------------------- --> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment