: Confused about missing width and/or height attributes So I tested my site on https://gtmetrix.com and it said: The following image(s) are missing width and/or height attributes. I'm confused by

@Harper822

The message...

The following image(s) are missing width and/or height attributes.


...means that the image tag should have values assigned to width and height which then is used to construct a placeholder until the image is loaded.

Your HTML code for your image is probably similar to this:



To solve this HTML wise, use the following HTML code for your image:

<img src="whatever.jpg" alt="picture of something" width="xxx" height="yyy">


Replace xxx and yyy with the actual width and height of the image in pixels. If you use incorrect values or if you omit the values, then more redrawing will happen in the browser which in layman's terms means a bit more waiting time for the page to completely load.

If you are trying to adjust the image for responsive design and you are okay with using Javascript, then use it to create an image tag and set the properties of the image accordingly including the size of it, then attach the image to another element on screen. Here's some code to help you get started:

<div ID="box"></div>
<script type="text/javascript">
mywidth=100;
myheight=100;
mypicture="some_image.jpg";
mainbox=document.getElementById('box');
i=document.createElement('IMG');
i.style.width=mywidth+"px";
i.style.height=myheight+"px";
i.src=mypicture;
i.alt="picture";
mainbox.appendChild(i);
</script>


Just replace the values of mypicture, mywidth and myheight with the URL of the actual picture itself, and the correct width and height of the picture.

Vote Up Vote Down

@Deb1703797

The browser requests this for performance. Say you have a paragraph of text with an image of 100x100 pixels in the top left corner.


Browser builds the page, no image yet, so it builds it with just text
The image now loads, and suddenly there's space needed
Browser rebuilds the page, with the proper room for the image


If you give width and height to the image, it'll go like this:


Browser builds the page, no image yet but has sizes, so it builds it with the right clearance.
The image now loads, place it in the reserved holder


It saves the rebuild. A rebuild takes a little time, which can be noticed on mobile devices. It also costs a little performance, memory and CPU, which are limited on mobile devices. In the example above it's just 1 image, but when you have 20 images, you'll notice this.

The tricky part is when you also want to be responsive, then sometimes it's not very comfortable to add an size. I tend to add as much as I can without limiting myself (e.g. sometimes only a height/width, sometimes none).

Vote Up Vote Down

@Harper822

Adding the height and width attributes to your IMG SRC HTML tag allows
the browser to know how much space to leave for an image. Without
these values, the browser gives an image no space until the image is
loaded, which means anything surrounding the image is adjusted after
the image has loaded.
www.computerhope.com/issues/ch001158.htm

Vote Up Vote Down