In this article we're going to be discussing how to lazy load an image with dimensions applied in WordPress. You may be browsing through your Chrome devtools console and come across this error message:

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance.

What Does This Lazy Loading Error Mean?

Before we can fix this error, let's define exactly what it means. if you're seeing this error message, you're probably lazy loading images in WordPress. What this means is that the image won't load unless the visitor scrolls to it. This reduces the amount of data transferred when the website loads, and speeds up the overall page speed.

This quick video clip perfectly visualizes how lazy loading works.

There are many common lazy loading plugins that you can use to implement this feature into your WordPress website:

And many more options.

These plugins typically implement lazy loading by finding every image tag, and adding a lazy load attribute. This is done like so:

<img src="image.png" loading="lazy" alt="…">Code language: HTML, XML (xml)

You can also choose to do this manually by adding the loading=”lazy” attribute to whatever image you need to have this functionality.

The official definition of what this actually does is as follows: * ‘lazy’ to defer the load until the image or iframe reaches a distance threshold from the viewport.

This error triggers because you have lazy loading enabled, but you don't specify the dimensions of the image.

This means that the placeholder spaces collapsed before the image loads.

By specifying the dimensions of an image before it loads, the browser will load a placeholder for that specific image to load into.

For example, every specify an image that has a dimension of 500 by 600 pixels, there will be a 500 by 600 pixel space for it to load into. This means that it won't push content up and down (The official term for this phenomenon is “reflowing”).

Tf you don't specify the placeholder dimensions, the image will push content up and down (Out of the way) as it loads when the visitor scrolls into the viewport. Chrome doesn't like this, triggering the lazy loading error:

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance.

This is an issue with the actual images, not the individual plugin, and it is triggered by Chrome's native lazy loading.

(A side note, this is a layout shift. in some instances, layout shifts can be bad, but these aren't counted as negative layout shifts simply because they are triggered by the user).

Is This A Big Problem?

If you're experiencing this error, it's not a massive problem. Google will not penalize the website rank wise if you have this issue. At the worst, it's a minor inconvenience to visitors as content is moved around as the image loads into the page.

How To Fix This

The easiest way to fix the image dimension lazy loading issue in WordPress is to do as the error report suggests: add dimensions to lazy loaded images in WordPress.

this means that instead of looking like this:

<img src="image.png" loading="lazy" alt="…">Code language: HTML, XML (xml)

Your image html should look like this:

<img src="…" loading="lazy" alt="…" width="200" height="200">
<img src="…" loading="lazy" alt="…" style="height:200px; width:200px;">Code language: HTML, XML (xml)

Typically, WordPress will automatically add the image with and height attributes. However, if you need to do this manually you can do this from the Gutenberg editor, or from the text tab in the classic editor.

If none of these fixes work, you can try changing your lazy loading plugin, and/or your theme. However, this may be impractical, especially from the theme end of things. In that case, you may want to try out this plugin which we found on GitHub. It loops over all the images in the post, and wraps them in a figure structure. It also makes the responsive image reserved space in the page, thus preventing the reflow (or movement of content).

https://github.com/SabatinoMasala/codecaptain-image-to-figure-converter

Another technical fix would be adding dimensions to your functions.php file for specific theme image sizes. You can specify the size of the image, and then attach a standard dimension to that size. You can also add new standard sizes for WordPress as well.

add_image_size( string $name, int $width, int $height, bool|array $crop = false )Code language: PHP (php)

Here's some example code that could be adapted for use in your website:

add_image_size( 'thumbnil', 600, 350, true );
add_image_size( 'medium', 600, 350, true );Code language: JavaScript (javascript)

There are actually a lot of things that you can do regarding this function, and they are discussed in the WordPress developer reference.

This may work, but it removes the responsiveness of the image. Another more complicated solution, but one that probably works best in all situations is called the “padding bottom hack”. introduced in 2013, in a smashing magazine article, this hack specifies a responsive aspect ratio placeholder and size for the image.

Basically, it wraps the image in a Div, and uses padding-bottom to size the Div to match a 16 by 9 ratio. The image is then sized to fill into that reserved space. Here’s the code, sourced from this article:

.img-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}Code language: CSS (css)

Conclusion

To conclude, the best way to solve this error in the Chrome console - [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. - is to simply do as it suggests, and add dimensions to that image. You can do this in Gutenberg, the classic editor, HTML, and more.

TLDR; add dimensions to lazy loaded images in WordPress!

As always, if you have any questions about lazy loading image reflow in WordPress, reach out in the comments below.