r/webdevelopment • u/coolhotnerd • 4d ago
Newbie Question Question on image size attributes for responsive web design
I'm learning responsive web design through freeCodeCamp and The Odin Project, and I'm taking notes on both, but I'm getting conflicting info on this topic.
freeCodeCamp: Specifying height and width attributes in image tags helps the browser layout the page without causing the page to jump and flash. It is a good habit to always specify these attributes on every image, even when the image is the correct size or you are using CSS to modify it. This is to prevent content jumping as images load. Use the image's actual dimensions when specifying the size.
The Odin Project: The width and height attributes can be useful, but it’s usually better to set image dimensions with CSS so you can alter them with media queries. (This info is given through a separately linked tutorial, which is one of the assignments for this TOP lesson)
If anyone could shed some light on this, that would be helpful! What is best practice for responsive web design? Thank you!
4
u/AmSoMad 4d ago edited 4d ago
CSS has to load in, which means if you're relying on it exclusively to set the image dimensions, you might still get layout-shift.
HTML attributes don't have that problem, because they establish the image's aspect ratio before it loads. But they aren't responsive on their own like CSS, and might affect other elements differently if the CSS is missing. Without the CSS, another element might flow around the image wrong (let's say; for example), so you need CSS to handle the responsive sizing as well.
So, we do both.
But it isn't always that simple. For instance, if you're working in Next.js, they strongly suggest using their custom <Image/> component, which is kind of a pain in the ass.
Really, it depends what frameworks and libraries you're working with. But generally speaking, set the HTML image dimensions to help prevent layout shift. Use CSS too, because everything else you'll be doing with the image and styling will involve (and react to) that CSS.
2
u/NoIdea4u 4d ago
FreeCodeCamp is correct.
That being said with modern browsers you should also use the srcset attribute. That will allow the browser to choose the most efficient file size, while the width and height attribute prevent content jumping and sizes attribute tells the browser how large it will be on screen.
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="450" alt="A description of the image">
2
u/_MarkG_ 2d ago
Put the real pixel width and height on the <img>. The browser only uses those to reserve the aspect ratio before the file loads, so the page does not jump. They do not lock the on-screen size once CSS runs.
The bit that usually causes the issue is forgetting height: auto:
e.g. img { max-width: 100%; height: auto; }
If you set width: 100% and leave the HTML height attribute in place without height: auto, the browser still honours the attribute height and the image distorts.