Image dimensions

Pages should tell the browser how much space each image will take up before the image finishes loading, so text and other content do not jump around as pictures appear. Silktide reports visible images that reserve no space ahead of time.

An image reserves space when it declares both width and height attributes, or when the image or one of its containers has a aspect-ratio:

<!-- No reserved space: content below jumps when this loads -->
<img src="hero.jpg" alt="Team photo">

<!-- Reserved with intrinsic dimensions -->
<img src="hero.jpg" alt="Team photo" width="1200" height="800">

<!-- Reserved with an aspect ratio -->
<img src="hero.jpg" alt="Team photo" style="aspect-ratio: 3 / 2; width: 100%; height: auto;">

Why this matters

When the browser does not know an image's size in advance, it must download the file before it can finish laying out the page, and content below the image shifts downward as each picture loads. This is cumulative layout shift (CLS), one of Google's and a search ranking signal.

Layout shift is also genuinely annoying: readers lose their place while scrolling, and buttons that move at the moment of a tap cause accidental clicks.

How to fix it

Add width and height attributes matching the image's natural dimensions. The browser uses them to reserve correctly proportioned space even when CSS scales the image responsively.
Alternatively, set aspect-ratio in CSS on the image or on a wrapper element. Responsive layouts that absolutely position the image inside a container (as many image components do) can reserve space this way:

<!-- The wrapper reserves the space; the image fills it -->
<div style="position: relative; aspect-ratio: 16 / 9;">
  <img src="hero.jpg" alt="Team photo" style="position: absolute; inset: 0; width: 100%; height: 100%;">
</div>

Most modern frameworks and content management systems can output dimensions automatically; check your image component or media settings.

How Silktide tests this

Test only pages that are eligible for search indexing.
Find every visible <img> on the page, skipping hidden images (such as tracking pixels) and elements you have excluded from checking.
Pass the image if it has both width and height attributes.
Otherwise, look for a CSS aspect-ratio (other than auto) on the image itself, then on each of its ancestors in turn. Styles are the computed values from a real browser rendering the page, so rules applied through classes and stylesheets are counted.
Flag each remaining image individually so it can be highlighted on the page.

This check appears under Speed as advice and does not change the Speed score, which comes from the Lighthouse performance score. Lighthouse measures layout shift on the pages it tests; this check finds the images that cause it on every page.

Troubleshooting

My image has a fixed size in CSS and is still flagged

A stylesheet that gives an image a fixed width and height also stops it from shifting, but Silktide only recognizes width and height attributes or an aspect-ratio. That is why this is a warning rather than an error. If the image cannot move, the finding.