Home » Blogs » How to fix “Image elements do not have explicit width and height” in Speed Testing tools
  1. QuickRead
  2. What happens if you don’t fix these issue
  3. How to fix it?
  4. Modern best practices
  5. Responsive images
  6. Conclusion

How to fix “Image elements do not have explicit width and height” in Speed Testing tools

1. QuickRead

You may have seen an action point of “Image components do not have specified width and height” if you ran your website through Google Lighthouse, Page Speed Insights, web.dev measure, or other similar tools.
We will address “Image Elements do not have specific width and height” in this tutorial.

2. What happens if you don’t fix these issue

Consider this simple page:
< h1 >Your title< /h1 >
< p >Introductory paragraph.</ p >
< img src=”hero_image.jpg” alt=”” />
< p >Lorem ipsum dolor sit amet, consectetur adipiscing elit…< /p >
This might happen in two stages: first, while the HTML is being downloaded, and later, once the picture has been downloaded. The following code would force the main content to move down once the picture is downloaded, allowing the space required to show it to be calculated:
Layout shifts are highly inconvenient for the user, especially if you have already begun reading the content and are abruptly thrown off by a jolt of movement, forcing you to retrace your steps. This also requires the browser to perform more effort in order to update the page layout when each picture arrives from across the internet. On a complicated website with a lot of images, this can put a lot of strain on the device at a time when it presumably has a lot of other things to worry about!

What if we use CSS to overcome this issue

When you try to change the widths and heights of an image with CSS, it might cause problems. For example, if you want to limit the width of your pictures, you might use the CSS below:
img {
max-width: 100%;
}
This will override the width of the picture and limit it as needed, but if you have explicitly specified the height on the image tag, you will not be overriding that (just the width), and you will end up with a stretched or squashed image since the aspect ratio of the image will no longer be maintained:
This can easily be rectified by adding a height: auto line to the CSS, which overrides the height attribute from the HTML:
img {
max-width: 100%;
height: auto;
}
This provides enough information for the browser to compute the image’s width, as it can look at the width of its parent container to determine how wide the image should be.
< code >Height: auto< /code >, on the other hand, is the source of the issue. It does not explicitly provide the image’s height but rather instructs the browser to create the image at whatever height it deems suitable depending on the image’s width.
The issue is that when the HTML is processed, the browser does not know the width or height of the original image. It does not know how big the image is until it starts downloading it.
As a result, the following occurs:
  • Your HTML is downloaded by the browser.
  • It locates an image element and searches for any associated styles (which you should have inlined as part of your critical CSS).
  • It then renders the image element, but because it does not know the height, it gives it a height of 0 pixels.
  • It then requests the image, which is 1600 pixels by 900 pixels in size.
  • The information is then used to produce a 16:9 aspect ratio.
  • It then returns to the picture element it discovered before, examines the calculated width (let us suppose it is 400 pixels on the screen), and uses the aspect ratio to determine the height (400 / 16 * 9 = 300px).
A Layout Shift occurs as a result of this. This is then included in the site’s Cumulative Layout Shift (CLS).
This is something you should correct right away because it is part of Google’s site vitals and will soon be a measure that impacts your search rankings.

3. How to fix it?

There are a number of options for dealing with this, but here are two of the most popular, with the first being the preferred/ best practice.

Option 1: Use the width and height attributes to define the image’s width and height

The first approach is to use the height and width attributes to specify the image’s width and height.
< img src=”some-image.webp” width=”1600″ height=”900″ />
It is worth noting that the attributes do not contain the units (pixels), which should be defined as integers.
This will subsequently be utilized by modern browsers to compute the image’s aspect ratio.
By using a width and height attribute, the browser can now determine the aspect ratio before rendering the image element and reserve adequate space for the image to download.
Using the width and height attributes is the suggested best practice for avoiding layout changes from images.
One thing to keep in mind is that the browser will still respect your CSS sizing.
As a result, if you use width:100% and height:auto as in the original CSS example, it will still operate and follow your CSS rules. The only difference is that it can now figure out how large height: auto should be.
Another intriguing fact is that the aspect ratio of your height and width attributes is all that matters. As long as the width and height ratios are the same, all of the following will produce the same behavior:
< img width=”1600″ height=”900″ />
< img width=”800″ height=”450″ />
It is worth mentioning, however, that selecting a size that is as close to the exact size as possible is advised just in case your CSS goes awry.

Option 2 – “aspect ratio boxes”

The “CSS padding hack” is another name for this method.
Instead of declaring the image’s width and height, we define the image’s height as a percentage of the width within our CSS file.
To do this, we give our image a height of zero pixels (which is how it would appear at first, recall) and then use padding-top to provide the proper amount of space in the page to avoid a layout shift.
HTML
CSS
.image-div {
overflow: hidden; /* not necessary if div is empty and other styles do not interfere */
height: 0; /* not necessary if div is empty and other styles do not interfere */
padding-top: 56.25%; /*aspect ratio of 16:9 at 100% width requires a 56.25% height*/
background: url(/my-image.webp);
}
You may also use calc() if you do not need to support Internet Explorer
CSS using calc()
.image-div {
overflow: hidden; /* not necessary if div is empty and other styles do not interfere */
height: 0; /* not necessary if div is empty and other styles do not interfere */
padding-top: calc(900 / 1600 * 100%); /*aspect ratio of 16:9, notice how we reverse the values as we are calculating the height from the width this time*/
background: url(/my-image.webp);
}

Why would you use anything like this?

It is obviously a hack because it necessitates the usage of a background image on a div.
It is also useless for anything but decorative images because you can not include an alt property for those who utilize assistive technology or have images turned off.
However, if you are a purist, it does offer the advantage of keeping your HTML clean…but I do not think that is a compelling argument to utilize it!

What if you do not know the image’s precise dimensions?

Both of the methods above have a major problem that you may have noticed.
To calculate the aspect ratio / add the proper width and height while designing the page, you must first determine the width and height of the image.
The obvious answer is to handle this on the back end and save the width and height attributes using caching methods, however, this may not be viable.
You may have to make a little sacrifice if you are trying to address this problem on an existing site with thousands of images, or if you can not calculate the image width and height, etc.

Container with a set height

Assume that all of the images on your site have an aspect ratio of somewhere between 1:1 and 16:9.
What we could do is place a fixed-height container around all of our images.
As a result, a browser can devote space on the page for the container rather than the image.
The disadvantage is that images with different aspect ratios will result in white space at the bottom of the container.
Because the extra white space is not as visible when images on a site have comparable aspect ratios (some are 16:9, others are 16:10), this method is generally best employed when images on a site have similar aspect ratios.

4. Modern best practices

Because modern browsers now establish the image’s default aspect ratio depending on the width and height attributes, it is important to set them to avoid layout changes. Developers just need to provide width and height, as usual, thanks to the CSS Working Group:

Puppy with balloons
and all browsers’ UA stylesheets provide a default aspect ratio depending on the element’s width and height attributes:
img {
aspect-ratio: attr(width) / attr(height);
}
Before the image has loaded, this calculates an aspect ratio based on the width and height attributes. It offers this information right at the start of the layout computation. When the width of an image is specified (for example, width: 100%), the aspect ratio is utilized to determine the height.
The aforementioned image aspect ratio modifications have already been implemented in Firefox and Chromium and will be implemented in WebKit soon (Safari).
If your image is within a container, you may use CSS to adjust it to fit the container’s width. To avoid the picture height being a fixed number, we specify height: auto (for example 360px).
img {
height: auto;
width: 100%;
}

5. Responsive images

When dealing with responsive images, srcset specifies which images the browser may choose from and what size each image should be. Each image should have the same aspect ratio so that the width and height attributes may be specified.
Puppy with balloons

6. Conclusion

To summarize, Cumulative Layout Shift should be minimized for a better user experience and to preserve your Search Engine Rankings as soon as possible.
If you have not already, the three steps outlined above should help you address the problem on your site
For 99 percent of cases, We propose finding a mechanism to automatically adding a width and height attribute to your images.
The only time this will not work is if you use the srcset property to deliver images with a varied aspect ratio based on the screen size (known as art direction). You will have to use either media queries and the padding hack or the fixed height container method in that case.
chat-with-us

Latest Posts