1

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?

Improve this question
3
  • In this day and age you shouldn't need to specify a width or height because HTML5 doesn't require width or height. Also computers are faster at processing images than they was two decades ago, personally I'd ignore Gtmetrix and use webpagetest.org – Simon Hayter♦ Jul 14 '15 at 14:17
  • Them not being required is not a good reason not to include them, for the reasons given in both answers below. – Tim Fountain Jul 14 '15 at 15:28
  • Well, that would be my opinion yes. You can overcome the listed problems with good usage of CSS and JS. – Simon Hayter♦ Jul 14 '15 at 17:04
5

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

Improve this answer
5
  • Then what should it be? – William Edwards Jul 14 '15 at 12:37
  • @WilliamD.Edwards While this answer is correct, it is not a requirement or invalid to leave them out, and I'm assuming your test result was not from the W3C validator. – Rob Jul 14 '15 at 12:42
  • 1
    The values for width and height attributes should match the dimensions of the image. – Tim Fountain Jul 14 '15 at 12:42
  • @TimFountain Wouldn't you be technically resizing it then? – William Edwards Jul 14 '15 at 12:47
  • 1
    No, the browser is smart enough to know that if dimensions in the <img> tag match the dimensions of the image file, no "resizing" is needed and it can be rendered as-is. It only needs to render it at a different size if the dimensions are different (which should basically never happen). – Tim Fountain Jul 14 '15 at 12:56
4

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

Improve this answer
0

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.

Improve this answer
1
  • That javascript isn't responsive at all. It's a weird way of placing an image, that's it :) – Martijn Jul 15 '15 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.