Why should you add width and height to an image? | Shreya

Post

editor-img
Shreya
Oct 4, 2022

Why should you add width and height to an image?

If height and width are set, the space required for the image is reserved when the page is loaded.

However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.

The effect will be that the page layout will change during loading.

...

Let’s say we have a page

<h1>Heading</h1><p>Introduction</p><img src="flower.jpg" alt="Flower"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...</p>

media
media

Before the image is loaded > After the image is loaded

Since this image doesn’t have a height and width, it will show no layout till the HTML downloads the image. Once the image is downloaded the text after the image will jump to make way for the image on the page.

These layout shifts are very distracting for the user, suppose you are reading an interesting article and suddenly some images are downloaded and the jolt of the movement throws you off on the screen and you have to find where to start again.

This leads to a bad user experience and in cases with complex pages with many images that can put a lot of unnecessary load on the device.

So providing an appropriate height and width to the image was advisable.

The limitations of responsive images have been known for a long time and many workarounds, including the so-called padding-bottom hack, have been created to work around the issue.

This shows that padding percentages (including padding-bottom) are always based on the container width (to ensure consistent padding even if height and width differ).

This fact can be used to create a container where the height is set based on a width ratio.

But it has a few problems associated with it too:

  • It requires a hard-coded ratio to be calculated.
  • The CSS code is not exactly easy to remember — forgetting or removing a single line of the above CSS code will break the whole thing.
  • This requires all the image elements to be wrapped in an extra container.
  • This is a more advanced technique that not all web developers know about or use.

And, let’s be honest — it’s a bit of a hack! So, we really should fix this properly, shouldn’t we?

Fixing the resizing problem:

  • aspect-ratio

img { width: 100%; height: auto; aspect-ratio: 16/9; }

  • intrinsicsize

<img intrinsicsize="400x400" style="width: 100%">

  • attr

<style>img {width: 100%;height: auto;aspect-ratio: attr(width) / attr(height);}</style><img src="flower.jpg" alt="" width="500" height="500">

Rather than hard-coding the aspect ratio this uses the CSS attr to calculate the aspect ratio using the width and height of the image

Because this is just a CSS attribute the proposal contained an added twist- this could be added to the user-agent stylesheet used by browsers so would not even require any changes from web developers to benefit from this.

Firefox did include this as an experiment which made the browser more performant. After Firefox's successful implementation and results many other browsers also started to implement this in their respective browsers- but not all YET!

There are a few limitations to this though:

  • The fix works well to calculate the aspect-ratio based on fixed width and height but what about when those change? - this is called art direction
  • Lazy loading
  • Currently browser improvements have been made only for the <img> tags and not for <iframe>, <video>,<object> which is under discussion.