Common srcset and sizes Mistakes — How to Avoid Them

Common Responsive Image Mistakes

Even experienced developers make mistakes with responsive images. Here are the most frequent issues and how to fix them.

Mistake 1: Missing the sizes Attribute

<!-- BAD: No sizes — browser assumes 100vw -->
<img srcset="photo-320w.jpg 320w, photo-1280w.jpg 1280w" alt="Photo" />

<!-- GOOD: Accurate sizes -->
<img
  srcset="photo-320w.jpg 320w, photo-1280w.jpg 1280w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>

Without sizes, a 400px thumbnail in a sidebar could trigger a 1280px download on a 2x device.

Mistake 2: Lazy-Loading the LCP Image

<!-- BAD: Hero image is lazy-loaded -->
<img src="hero.jpg" loading="lazy" alt="Hero" />

<!-- GOOD: Hero image loads eagerly with high priority -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="Hero" />

Mistake 3: Too Many or Too Few Breakpoints

<!-- BAD: Wasteful — 50px increments generate huge HTML -->
<img srcset="photo-200w.jpg 200w, photo-250w.jpg 250w, photo-300w.jpg 300w, ..." />

<!-- BAD: Too few — jumps from 320 to 2000 -->
<img srcset="photo-320w.jpg 320w, photo-2000w.jpg 2000w" />

<!-- GOOD: 4-6 meaningful breakpoints -->
<img srcset="photo-320w.jpg 320w, photo-640w.jpg 640w,
            photo-1024w.jpg 1024w, photo-1536w.jpg 1536w" />

Mistake 4: Wrong Order in picture Sources

<!-- BAD: JPEG first — browser stops at first supported format -->
<picture>
  <source type="image/jpeg" srcset="hero.jpg" />
  <source type="image/webp" srcset="hero.webp" />
  <img src="hero.jpg" alt="Hero" />
</picture>

<!-- GOOD: Most efficient format first -->
<picture>
  <source type="image/avif" srcset="hero.avif" />
  <source type="image/webp" srcset="hero.webp" />
  <img src="hero.jpg" alt="Hero" />
</picture>

Mistake 5: Missing Dimensions

<!-- BAD: No dimensions — causes layout shift -->
<img src="photo.jpg" loading="lazy" alt="Photo" />

<!-- GOOD: Dimensions prevent CLS -->
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="Photo" />

Mistake 6: Incorrect MIME Types

<!-- BAD: Wrong MIME type for WebP -->
<source type="image/webp" srcset="hero.png" />

<!-- GOOD: Matching MIME type and format -->
<source type="image/webp" srcset="hero.webp" />