#Best practices HTML img tag

10 messages · Page 1 of 1 (latest)

warm dawn
#

W3school states that we should use the height and width attributes in HTML for the img tag.

<img src="..." alt="" height="50" width="50">

But then I found this article that talked about how using width/height set to auto in CSS can cause the page render to make the page shift because the images are rendered after the text (https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). Using set width/height values works just fine, but with that method, it's hard to make the page responsive.

I currently have these styles set to my img...

width: 100%; max-width: 100%; height: auto; object-fit: contain;

... but they use the auto value.

In short, my question is this:
How do I follow the best practice of using the height and width attributes in HTML and at the same time be able to have a responsive design without the page shifting when it loads?

My page currently does not shift, but it's very simple and small as I'm learning. I'm worried that problems will occur if I continue to do this. So getting tips from people with more experience would be very appreciated!

next dagger
#

It makes no sense to set height:auto; or width:auto; because this is the default value for width and height.
It also makes no sense to set both width and max-width to 100%
So i would rather do something like this

img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

Here the image takes a width of 100% and it converts it to a block element since img tags are inline elements by default. then i set a 16/9 aspect ratio so it will keep the same aspect-ratio as the image gets smaller. then object-fit:cover; will prevent any stretching. Lets say you have a 1000x1000 image and you use aspect-ratio of 16/9 then it would create some stretching so object-fit:cover; would fix that.

And i would not recommend setting width and height in the width/height attributes. CSS stands for Cascading Style Sheets. It is used for styling. HTML is just markup. So you are supposed to use CSS for this. I guess the height and width attribute was something that was mostly used before CSS was invented ^^

#

@warm dawn

#

the only reason that you sometimes see height:auto; is because they may have defined another height previously. So then they set height:auto; to return it to the default value. But it's not very clear for someone else who reads the code. therefore it's better to do width:initial; or width:revert; to set it back to it's default value.

warm dawn
#

@next dagger Thank you! I did style it with only CSS at first, but I got kind of confused after reading this on the W3school website:

"Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads." (https://www.w3schools.com/html/html_images.asp)

so then I added in the HTML styling...

Should I ask someone about getting that part removed?

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

next dagger
warm dawn
next dagger
#

But it could be that you are reading an HTML file and you should set a width and height for the image. if the image have slow loading speed. the content can move around and stuff. So they say set width and height attribute because they do not want to include CSS on that page since it's an HTML Guide. Could be that...

warm dawn
#

That sounds likely. I've been learning HTML and CSS simultaneously, so I always default to CSS for styling. And the articles I found that recommended it is probably outdated as you said

next dagger