Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. Add missing width and height attributes to your images

Add missing width and height attributes to your images

Modern browsers set the default aspect ratio of images based on their width and height attributes. Here is a basic example:

<img src="image.png" width="340" height="160" alt="my awesome alt" />

If your image is missing these attributes, it can cause layout shifts, which trigger CLS warnings in Core Web Vitals: Image elements do not have explicit width and height.

Image elements do not have explicit width and height warning
Image elements do not have explicit width and height warning

There are different ways to resize images using the width and height attributes. But in general, it’s best to stay away from using CSS entirely because it can cause a layout shift of the page as the CSS loads. This is what is also referred to as CLS.

There are also other methods you can use, such as taking advantage of srcset and responsive images, which WordPress supports out of the box. However, not all theme and plugin developers hook into this. And that’s where you might have a few images that are missing basic width and height attributes.

Add missing image dimensions

Follow the steps below to add missing width and height attributes to your images using Perfmatters.

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Under the “Options” tab click on the “Lazy Loading” sub-navigation menu.

Perfmatters lazy loading menu
Perfmatters lazy loading menu

Step 3

Scroll down and toggle on “Add Missing Image Dimensions.”

Add missing image dimensions
Add missing image dimensions

Note: You aren’t required to use lazy loading in Perfmatters to use the feature.

Step 4

Scroll down and click “Save Changes.”

How it works

As the page is rendered, any images that are missing width and height attributes will automatically get them added. The image dimensions are pulled from the image itself using a PHP function. Here is a basic example.

Before

<img src="image.png" alt="my awesome alt" />

After

<img src="image.png" width="340" height="160" alt="my awesome alt" />
Was this article helpful?

Related Articles