"intrinsicSize" attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute

However, as powerful as the <picture> element is, sometimes it gives us more power than is actually needed to achieve suitable responsiveness. Sometimes all it really takes is a regular <img> element using the srcset and sizes attributes inline.

That image only contains 200 pixels horizontally, but the browser stretches it to 400px wide or even farther!Luckily, you’ll see there’s an easy “fix” there at the end: our old good friend the width attribute!<img src="example.gif", srcset="example.gif 200w" sizes="(min-width: 400px) 400px, 100vw" width="200" /* <=== TA-DA! */ class="logo">As long as you can specify the width attribute so it reflects the true maximum size of your largest image, you won’t run into this problem of having sizes make your image wider than it naturally should go.

Of course in the world of responsive images, we put constraints on our images with CSS:img { max-width: 100%;}Now the image appears at it’s natural size unless it’s constrained by the parent container! Excellent.

It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation. If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.

Ah yes, excactly the right answer. Img tags are for information, css backgrounds are for layout.

You should always specify the height and the width of an image if only to help the browser lay the page out even before the image has been downloaded.