Image width/height as an attribute or in CSS? [duplicate]
What's the "correct" semantic way to specify image height and width? In CSS...
width:15px;
or inline...
<img width="15"
?
CSS seems like the right place to put visual information. On the other hand, few would argue that image "src" should not be specified as an attribute and the height/width seem as tied to the binary image data as the "src" is.
(Yes, I realize from a technical, end-user perspective this really doesn't matter.)
Solution 1:
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.
Solution 2:
I think that depends on HOW you are using the attribute. If you're styling multiple images within a list or table so that they lay out correctly, then put the width/height in your CSS to avoid the need to add another set of tags to every image in the list. Use something like
ul.gallery img: { width:117px; }
On the other hand, if you are inserting an image into some content and it needs to be a certain size to make the document flow properly, then put it in the HTML. That way you don't have to muck up the style sheet for each different image in the html. And this way, if you change the content to a different image, of remove the image all together, you don't have remnants of code scattered in your CSS to remember to delete.
Solution 3:
The height and width should be included in the HTML. The reason being is that it creates the spacing on the page. If for whatever reason the img fails to load (and you've been a good boy and included an alt..the browser will show that frame (using the w and h provided) with the alt inside.
The main beneficial reason is preventing the "pop" effect. When a browser loads the page sometimes larger aspects such as img take longer to load, and if you have not specified the w and h in the HTML the browser will temporarily collapse that area thinking its not there. Then, when it finally loads everything pops into proper place.
This is especially annoying but still pretty annoying on a computer because you are going to click on a link and all of a sudden the page shifts down and you've accidentally clicked the wrong link.
Solution 4:
I'd say CSS.
HTML is about content,
CSS is about presentation.
Solution 5:
Per the <img> article at MDN, the HTML attributes indicate the intrinsic dimensions of the image, i.e. its real dimensions. That's why, whereas HTML 4 also allowed percentage values, HTML5 only allows px values. (common pitfall: the "px" should not be written)
If you want to display the image with these dimensions, job done. Otherwise, you also have to add CSS to specify the display size.
Of course, it's better to serve the image in the displayed size, to avoid browser resizing, save bandwidth, etc. but that's not always possible.
See also the answers to this question: What's the difference between HTML's and CSS's width attribute?