I have images that use the image-fluid and image-thumbnail attributes. It is my understanding that setting a height and width value is not needed or desired?
<img src="../../assets/images/bradlogo.jpg" class="img-fluid img-thumbnail" alt="Brad Lawryk Logo">
Brad, setting the width and height on an image helps prevent layout shifts by letting the browser reserve the correct space before the image loads.
These values don’t just define the intended display size, they also establish the image’s intrinsic aspect ratio (for example, 1200×800 gives a 1.5:1 ratio).
Ideally, the width and height you specify should match the image’s real intrinsic dimensions, and then CSS can scale the image as needed for the layout.
Thanks Ben, so what would you set the height and width to? It would be different depending on device? Isn't that what the responsive setting is for?
It is best to set the values to the actual size of the image. This is not a set fact, e.g., for an image sized 1200x800 you could give values of 900x600 or 600x400, as long as the aspect ratio is the same as the image's intrinsic value.
But won't that mess up displaying on desktop compared to mobile? Thank you for your help. I just don't get how to do it and what it should be set at?
If I set it at the size for desktop won't that cause the same layout shift in mobile as not having a value because it will assume the image is much larger than it is in view?
Brad, just try it on a test project where you have the image just as you want it. Then add the values for the width and height, as large as possible and as small as possible and you will see that there is no visual change. The change is purely to assist rendering and stopping layout shifts.
Interesting. I experimented a bit and set the values to the actual image size and it seems to have no effect on the layout/loading. Thank you @ben . I will use this from now on.
Much appreciated.