QA finding
An image has no width and height, so the page may jump when it loads
QA Warning Severity: Low
Part of the audit Usability rules. Finding id: qa.unsizedImages.
What it costs you
Content that jumps while someone reads or is about to tap makes them lose their place or hit the wrong link. It also counts against the layout shift score search engines measure.
What to do
Give the image its width and height, or reserve its space in CSS.
What it checks
- Page jumps as images load
How to fix it
Declare the size of the image
How to check: Reload the page on a slow connection setting in the browser's developer tools: the text below the image does not move when the image appears.
A real case
On Yahoo! JAPAN News article pages the text moved down when the main image loaded. After the team reserved the image's space, page views per session rose 15.1% and session duration 13.3%, which the team reports as a correlation.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_rendered_height | 50 | Images shown lower than this many pixels are not returned; an icon moves the page very little. |