Why am I getting "Image elements do not have explicit 'width' and 'height'" errors in Webflow even though I have specified the attributes?
TL;DR
- Inspect images to ensure they have explicit width and height HTML attributes, not just CSS styling.
- In Webflow, use the Image element (not background images) and set fixed dimensions via the Settings panel; if needed, add images with manual width and height using the Embed component for full control.
You're seeing the "Image elements do not have explicit 'width' and 'height'" error because Webflow may not have applied those attributes in the actual HTML, even if styles exist visually.
1. Understand the Error
- Lighthouse and SEO tools require that images include explicit
widthandheightHTML attributes, not just CSS dimensions. - Webflow often sets image sizes with CSS rules (e.g., width: 100%), which doesn’t count as explicit size attributes in the HTML.
2. Inspect the Elements
- Use browser developer tools (right-click → Inspect) to check if your
<img>tag includes width="123" height="456" directly. - If width and height are missing or set only in CSS, Lighthouse will still flag the image.
3. Correctly Set Fixed Dimensions
- Select the image in Webflow Designer.
- In the Element Settings panel (D key), scroll to the Image Settings.
- Confirm that the image is set with a fixed size — not just max-width or 100% width.
- Alternatively, use fixed dimensions in the Style panel and then:
- Publish your site
- Check the rendered HTML to confirm the
<img>tag has the correct width and height attributes.
4. Use Webflow's Native Image Element (Not Background Images)
- Errors often occur when images are added as background images to div blocks—these do not generate
<img>tags. - Replace background images with Image elements where SEO and accessibility are important.
5. How to Force Width/Height in HTML
Webflow doesn’t expose width and height attributes explicitly in the Designer. However:
- Use the Custom Code embed if critical:
- Add an Embed element from the Add Panel
- Manually insert an
<img src="..." width="300" height="200"> - This guarantees it meets Lighthouse requirements.
Summary
Webflow often styles images with CSS, but SEO tools want explicit width and height HTML attributes. To fix this, use actual Image elements with fixed dimensions or manually embed images using the Embed component to control the HTML output.