<picture> without an <img>: the fallback that is required

What the img inside a picture is for

<picture> is a wrapper that lets the browser choose between <source> candidates by media query or MIME type. It does not render anything itself. The <img> inside it is the element that actually displays, and the HTML specification requires it.

Without one, a browser that matches a <source> still has nothing to draw, and one that matches none has no fallback. The <img> is also where alt, width and height live, so leaving it out costs the accessible name and the layout reservation at the same time.

What squirrel checks

The rule runs on every crawled page over every <picture> element. It emits a single check named picture-element:

• Skipped when the page has no <picture> elements. Message: No <picture> elements found.
• Pass when every one contains an <img>. Message: All 4 <picture> element(s) have <img> fallback.
• Fail otherwise. Message: 1 of 4 <picture> element(s) missing <img> fallback, identifying each by the srcset of its first <source>, or unknown source when it has none. Severity error, weight 6.

This is a structural check. It does not look at whether the <source> candidates are valid or whether their types are correct.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" width="800" height="533" alt="…" />
</picture>

Put the <img> last, after every <source>, and give it the widest-support format. The alt belongs on the <img>. width and height can go on a <source> as well, which is how a source with a different aspect ratio reserves the right space.

Enable / disable

Disable this rule

[rules]
disable = ["images/picture-element"]

Disable all Images rules

[rules]
disable = ["images/*"]

Enable only this rule

[rules]
enable = ["images/picture-element"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• images/srcset: the simpler responsive form, when you only need sizes.
• images/modern-format: the format sources this element usually carries.
• images/alt-text: the alt that lives on the img inside.
• images/dimensions: the width and height that also belong on that img.

Images findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• The picture element, MDN
• The picture element, HTML Standard

Check your site

Run squirrel audit https://example.com and open the Images section of the report. Every picture element missing its fallback is listed by its first source. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.