Empty srcset Attribute on Images: Why It Happens and How to Fix It

What bseoa flags

<img src="/images/team.jpg" srcset="" alt="Our team">

The browser discards the empty srcset and loads src at every screen size. Phones download the full desktop image, and high-density displays never get the sharper version.

bseoa looks for width descriptors such as 480w, so it also reports a srcset that only uses pixel-density descriptors, like srcset="/team.jpg 1x, /[email protected] 2x". That markup is valid; if that is what the page uses, you can ignore this warning for those images.

Common causes

• JavaScript lazy-loading libraries that move the real candidates into data-srcset and leave srcset="" as a placeholder until the image scrolls into view.
• Theme or CMS templates that always print srcset="{{ image.srcset }}", even when no resized versions exist.
• Image optimization plugins that failed to generate derivatives for an upload.

Fix option 1: remove the attribute

If there's only one size of the image, drop srcset and give the image explicit dimensions:

<img src="/images/team.jpg" width="1200" height="800" alt="Our team">

Fix option 2: populate it

If you have resized versions, list them with width descriptors and add sizes so the browser can choose:

<img src="/images/team-800.jpg"
     srcset="/images/team-480.jpg 480w,
             /images/team-800.jpg 800w,
             /images/team-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     alt="Our team">

Fix option 3: switch to native lazy loading

If a lazy-loading script is creating the empty attributes, native loading="lazy" works in current browsers and keeps the real srcset in the HTML. Don't lazy-load the image most likely to be the Largest Contentful Paint element.

<img src="/images/team-800.jpg"
     srcset="/images/team-480.jpg 480w, /images/team-800.jpg 800w"
     sizes="(max-width: 600px) 100vw, 800px"
     loading="lazy" width="800" height="533" alt="Our team">