Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image elements do not have explicit width and height

Lighthouse keeps telling me that "Image elements do not have explicit width and height" eventhough i've tried to add it both in css or in img but the problem persists:

img.medium {
  max-width: 29rem;
  width: 100%;
}

or

<img
   src={user.seller.logo}
   alt={user.seller.name}
   width="100%"
   height="auto"
/>

How can i tackle this?

like image 440
Francesco Avatar asked Nov 30 '20 15:11

Francesco


People also ask

Which the attribute define the width and height of the image?

The width attribute specifies the width of an image, in pixels. Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

Why should you include the height and width specification for all images?

Web performance advocates have often advised to add dimensions to your images for best performance to allow the page to be laid out with the appropriate space for the image, before the image itself has been downloaded.

Why wouldn't you include width and height attributes in the IMG tag?

The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file.


1 Answers

Short Answer

Add the image's native width and height in pixels as attributes on the image. This lets the browser calculate the aspect ratio for the image.

<img width="600" height="400" src="some-image.webp"/>

Long Answer

width: 100% does not give an element an explicit width.

What it does is define the width relative to it's parent container.

height:auto also does not give an image an explicit height, you are instructing the browser to make the image height whatever it thinks is appropriate based on the image proportions or the size of the container.

The biggest problem with this is the height of an image (as although the width of 100% is not explicit, it will be easy to calculate the actual width purely from the CSS).

When the page is requested the browser does not know the proportions of the image until it starts downloading.

For this reason the page renders (assuming you have inlined your critical CSS) then it requests the image and finds out how tall the image is. The container for the image will then change size to accommodate this image and you will get a layout shift, contributing to cumulative layout shift.

How to fix it

Option 1 - define the width and height using attributes

Option one is to define the image height and width as integers representing pixels by using attributes:

<img width="600" height="400" src="some-image.webp"/>

In modern browsers this will then be used to calculate an aspect ratio for the image and sufficient space will then be allocated on the page before the image starts downloading.

You can then use width:100%; height: auto; as you do now and it will all work as expected.

Using width and height attributes is the recommended best practice.

please note - the width and height values only have to be the correct aspect ratio if you are using CSS to override the dimensions (so width=200 height=100 would give the same result as width=400 height=200 assuming you set the width in the CSS).

Option 2 - use "Aspect Ratio Boxes"

In this technique you define the image height as a proportion of the width within your CSS.

In essence we give the image a zero height and then use padding to allocate the correct amount of space.

.image-div {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%; /*aspect ratio of 16:9 is 100% width and 56.25% height*/
  background: url(/images-one.webp);
} 

If you don't need to support Internet Explorer (as it is a little temperamental) you can use calc().

padding-top: calc(900 / 1600 * 100%);

This padding technique is explained in detail in this article from css-tricks.

Although this is a bit of a hack, the advantage is no inline attributes on your images, so it is useful for people who like to keep their HTML clean (and for certain scenarios such as if you want make all images the same aspect ratio)

The problem with both

There is only one issue with both techniques, you need to know the image width and height before they are rendered in order to calculate the aspect ratio.

There isn't much you can do to avoid this unless you are willing to make a fixed height and width container for the image.

Then if the image is a different aspect ratio to your container you will have some white space around the image but the page will not have a layout shift (which would be preferable in most circumstances) - assuming you use overflow:hidden etc. on the container.

.container{
  width:50vw; 
  height:28.125vw; /*fixed height, doesn't have to be aspect ratio correct, see example 2 */
  overflow:hidden;
  margin: 20px;
}
.container2{
  width:50vw; 
  height:40vw; /*fixed height, but this time there is extra white space (shown as dark grey for the example) below the image.*/
  overflow:hidden;
  background: #333;
  margin: 20px;
}
img{
    width: 100%;
    height: auto;
}
<div class="container">
<img src="https://placehold.it/1600x900"/>
</div>

<div class="container2">
<img src="https://placehold.it/1600x900"/>
</div>
like image 83
Graham Ritchie Avatar answered Nov 15 '22 16:11

Graham Ritchie