Should I specify the width and height of my images within the img tag? MDN says that the browser would leave a space for the image to appear in, resulting in quicker and smoother load times if i specify its dimensions within the img tag.
If I later decide to change the width and height of the image using CSS would that affect load time?
Setting max-width
and max-height
in CSS will enable modern browsers to restrict it to specified size but also keep the ratio:
img {
max-width: 40px;
max-height: 60px;
}
In terms of where to put it, I prefer keeping everything style-related in a separate file, so I know where to look if I’m focusing on styling.
I typically can get away with only using max-width for an image and it will adjust proportionally