GoogleChrome / GoogleChrome/lighthouse

"Image elements have explicit `width` and `height`" audit ok even with percentage values

Open
#14,449 16 comments 1 reaction 1 assignee Assigned to @connorjclark View on GitHub
bug P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 20h
Merged PRs (30d)
19

Description

### FAQ

- [X] Yes, my issue is not about [variability](https://github.com/GoogleChrome/lighthouse/blob/main/docs/variability.md) or [throttling](https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md).
- [X] Yes, my issue is not about a specific accessibility audit (file with [axe-core](https://github.com/dequelabs/axe-core) instead).

### URL

https://jsbin.com/kadiwajeza

### What happened?

With this HTML (from linked jsbin):

```html



JS Bin



```

Only the second image is reported as missing "explicit `width` and `height`":

![CleanShot 2022-10-14 at 16 01 34](https://user-images.githubusercontent.com/78213/195865892-f7816a50-c3da-412c-abd0-04eb0dc1e2dd.png)

Per MDN, [The intrinsic width of the image in pixels. Must be an integer without a unit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-width).

`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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.