When working with images on the web, it's extremely important that you define the width and height attributes on that image if you know its size before-hand.
Here's why.
Let's say we're working on a website and we don't define our image widths and heights. Initially, when the page is first loaded up, the height of the img tag is 0px. Once the image is loaded in, there's going to be a very noticeable (and very bad) layout shift where the page's content jumps around because now an image with a particular height and width have loaded in.
From an accessibility standpoint, this is really bad. Google actually measures sites against layout shifts like this (they call it Cumulative Layout Shift, you can read more about that on web.dev). One of the best, and easiest, ways to combat Cumulative Layout Shift (CLS) is to just define your image widths and heights ahead of time so that your page content doesn't jump around after images have loaded in.
To do this, you'll just need to know what size your image is intrinsically. You can find this out by inspecting your image using your operating system's files detail explorer.
One super important thing to know about this is that the width and height you define on the img tag does not need to be the final width and height of the image (though sometimes, it is). All these two attributes do is define some aspect ratio and some empty box so that content doesn't jump around.
So as long as the image rendered is the same aspect ratio on all devices, you won't have a layout shift.
