"Image elements have explicit `width` and `height`" audit ok even with percentage values
See original GitHub issueFAQ
- Yes, my issue is not about variability or throttling.
- Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
URL
What happened?
With this HTML (from linked jsbin):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<img src="https://via.placeholder.com/300x200" width="300" height="200">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200" width="100%" height="200">
</body>
</html>
Only the second image is reported as missing “explicit width
and height
”:
Per MDN, The intrinsic width of the image in pixels. Must be an integer without a unit.
width="100%"
is however accepted by browsers, they seem to use it as if it was img { width: 100%; }
in CSS.
What did you expect?
I would have expected Lighthouse to report width="100%"
as not being an “explicit width
”.
What have you tried?
No response
How were you running Lighthouse?
Chrome DevTools
Lighthouse Version
9.6.2
Chrome Version
105.0.5195.125 (Build officiel) (x86_64)
Node Version
No response
OS
macOS
Relevant log output
No response
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Use explicit width and height on image elements - GTmetrix
Images and/or videos that do not have explicit width and height attributes can cause large layout shifts as your page loads.
Read more >Setting Height And Width On Images Is Important Again
To prevent layout shifts and improve performance scores, we need to always set width and height attributes on our images.
Read more >Fix Image Elements do not have explicit width and height (2022)
The width and height attributes allow the dimensions of an image to be specified using pixel values or percentages. This flexibility lets you ......
Read more >Image elements do not have explicit width and height
Long Answer. width: 100% does not give an element an explicit width. What it does is define the width relative to it's parent...
Read more >Quick Tips: How to fix "Image elements do not have explicit ...
Option 1 - define the width and height of the image using the width and height attributes. ... The first option is to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
re: % in html width, it seems like a good idea to suggestion this become a deprecation console message. I’d suggest filing this somewhere under the DevTools component on crbug.com https://bugs.chromium.org/p/chromium/issues/list
I don’t think it makes much sense. It is technically possible to use
%
and display the image with the correct aspect ratio. For example: