Explicit Image Dimensions
Reserve layout space before images load by setting width and height attributes.
Metrics
This technique does not move LCP.
This technique does not move TBT.
This technique can move up to 100% of CLS's share of the Lighthouse score.
This technique does not move FCP.
This technique does not move SI.
This technique does not move TTFB.
Overview
Setting width and height attributes on <img> tags tells the browser the aspect ratio of each image before it loads. The browser can then allocate the correct space in the layout immediately — meaning the rest of the page renders into its final position from the start, with no jumps or reflows as images arrive.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: LCP, TBT, FCP, SI, TTFB.
The Problem
Without explicit dimensions, an image starts as a zero-size element. Once its file downloads and the browser learns its intrinsic size, it must recalculate the layout — pushing all content below the image downward. This reflow happens on the main thread, delaying other work. It also produces visible layout shifts that users perceive as jank, directly harming your CLS score.
Performance Impact
CLS
Direct
eliminates layout shifts caused by images loading in
Risk: Low
read-only attribute injection — no rendering side effects
How it works
01
Browser encounters the img tag during HTML parsing
During the initial parse of the HTML, the browser reads all attributes on each tag before it starts downloading anything.
02
Explicit dimensions let the browser pre-allocate space
When
widthandheightattributes are present, the browser derives the aspect ratio immediately and reserves exactly that space in the layout — before the image file has arrived.03
Without dimensions, layout space is unknown until download
If no dimensions are set, the image collapses to zero. Once the file downloads and the browser learns its intrinsic size, it must recalculate the layout — triggering a reflow that shifts all content below the image.
04
The fix scans and injects missing attributes
The implementation collects
<img>tags withoutwidth/height, fetches each source file (locally or remotely) to read its intrinsic dimensions, and injects the attributes into the HTML before it reaches the browser.
PHP Implementation
<?php
function add_missing_image_dimensions( $html ) {
libxml_use_internal_errors( true );
$dom = new DOMDocument();
$dom->loadHTML( $html );
$images = $dom->getElementsByTagName( 'img' );
foreach ( $images as $img ) {
$src = $img->getAttribute( 'src' );
// Skip if both attributes already present
if ( $img->hasAttribute( 'width' ) && $img->hasAttribute( 'height' ) ) {
continue;
}
if ( empty( $src ) ) continue;
$size = @getimagesize( $src );
if ( $size && count( $size ) >= 2 ) {
list( $width, $height ) = $size;
if ( ! $img->hasAttribute( 'width' ) ) $img->setAttribute( 'width', $width );
if ( ! $img->hasAttribute( 'height' ) ) $img->setAttribute( 'height', $height );
}
}
return $dom->saveHTML();
}getimagesize() works for both local paths and remote URLs, but adds a network request for remote images. For production use, cache the results to avoid re-fetching on every page load.
Limitations
- Containers with CSS
background-imagedo not need explicit dimensions. The container’s size is determined entirely by CSS — the browser never waits for the background image to compute layout, so no reflow or layout shift occurs. - CSS layout rules can conflict with injected dimensions:
Common Mistakes
Assuming CSS width/height are equivalent to HTML attributes
HTML dimension attributes are parsed during the initial HTML parse phase, letting the browser compute the aspect ratio and reserve space before the image loads. CSS is parsed later — without HTML attributes or an explicit aspect-ratio, the browser cannot reserve space in advance and a layout shift occurs when the image loads.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement