What will happen if you do not specify the width and height for an image?

The browser will start loading the image but will not know its exact dimensions until it is fully loaded. This can lead to the following issues:

• Content Shift (Layout Shift): When loading an image without specified dimensions, its display can shift the rest of the page content. This negatively impacts user experience and performance metrics such as Cumulative Layout Shift (CLS).
• Repaint: The browser has to recalculate and redraw the page layout after receiving the actual image dimensions.

It is recommended to always specify image dimensions using the width and height attributes or to use CSS to reserve space for the image before it fully loads.

<img src="image.jpg" alt="Image description" width="300" height="200">

Or with CSS:

img {
  aspect-ratio: 3 / 2; /* Set aspect ratio */
  width: 100%; /* Or another fixed/relative width */
  height: auto; /* Height adjusts automatically */
}