It’s important to specify the width and height of an image in HTML

Child measuring the wall

When you’re adding an image into your website it isn’t mandatory to specify the width and height of the image. You could write the image code so that it looks like this:

<img src="logo.jpg" alt="logo">

Leaving these out will still allow the image to be shown in your web browser, and you might think that this is absolutely fine – but it’s not.

When your web browser is displaying the page it will see that you want to display and image, and start to download this image. Images usually take some time to download. Most web browsers  display the page as it is loading, filling in the images as they load later. The problem is, if you haven’t specified a width and height for the image in your HTML, the web browser won’t know how much of a gap to leave for the image, and so when it does finally load, it might have to shift all the items on the page around a bit. This is what is called a “repaint” as the web browser has to paint the screen again, this time with the image in place.

However if we do specify a width and height, like so:

<img src="logo.jpg" width="340" height="200" alt="logo">

The web browser knows exactly how big the image is, so can continue to display the rest of the page knowing how big the image will be, so that it can slot it in later when it has loaded. This is much more efficient, the page will load faster, and you won’t notice the elements on the page jumping around when the image loads.

Make sure the width and height are correct

When you’re adding the image HTML to a page, it’s possible to change the values for the width and height of the image to make the image appear larger or smaller than the file you’re linking to. It’s common that websites do this when they want to show a thumbnail of an image, and you can click to view the full sized image.

This is bad for two reasons:

  1. It means you’re forcing the user to download a much larger image when they don’t need to. You might be using a whopping 800kb image as a tiny thumbnail, where actually a separate image of 20kb might actually be all that’s needed. It will take longer for the larger file to download on your users computer, and will use up more of their bandwidth for no reason.
  2.  Stretching the file means that your web browser has to do some extra work. It has to download the full image, and then work out what it looks like at the size you’ve specified. This means that it needs to “repaint” the screen again, this time displaying the reprocessed image at the width and height you’ve set.

Always set the width and height of the image in the HTML to be the actual width and height of the image file.

What does Nibbler look for?

In our site checking tool Nibbler we look for all images on the webpage you’re testing, and check to see if the width and height have been set. If there’s no width or height, Nibbler will mark you down.

If a width and height have been set, Nibbler will download the image and check that you’ve specified the correct width and height of the image. If it finds that the width and height are inaccurate it will mark you down.

Conclusion

Including accurate information about an images width and height will make sure that web browsers have all the information they need to accurately display the image. Providing incorrect or no information will make your webpage slower to load, and might require your users to use more bandwidth than necessary.


Watch quick video tour of Sitebeam

Test your website with

or see prices & plans
  • http://cmtmarketing.net Jerry

    Timely for me! I have a client site that we need to adjust their image hxw site is loading slow. Good information, thank you