Confused about missing width and/or height attributes

by William D. Edwards   Last Updated July 14, 2015 15:01 PM

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 this, because the images itself already have the correct width and height. So why would I want to add these attributes?



Answers 3


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. http://www.computerhope.com/issues/ch001158.htm

user29671
user29671
July 14, 2015 12:35 PM

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).

Martijn
Martijn
July 14, 2015 13:29 PM

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.

Mike
Mike
July 15, 2015 04:12 AM

Related Questions



Long pause before loading my product thumbnails

Updated October 27, 2017 11:04 AM


Page loading problem very slow response time

Updated June 12, 2015 11:01 AM