Image width/height as an attribute or in CSS?
HtmlCssHtml Problem Overview
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.)
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
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 - Html
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?
Solution 5 - Html
I'd say CSS.
HTML is about content,
CSS is about presentation.
Solution 6 - Html
I'd say HTML.
The width and height attributes are used to stop the page from loading and growing in a disjointed manner.
If you have ever been reading a block of text on a page only to have it pushed downward thanks to the late loading image above you know how frustrating it is!
Adding an ID to every image just to specify its width and height would be ludicrous and just almost as messy as adding the two width/height attributes anyway.
The catch is Firefox not using the width and height attributes to reserve the images space however, Im surprised they haven't updated it actually.
Solution 7 - Html
If you look at the HTML5 specification specifying height and width is an option not a requirement. Code is therefore valid with or without these attributes.
From a practical point of view it's highly desirable to specify them to prevent page reflows as mentioned above. However those suggesting it should be in the html because of this are missing the fact browsers use css when building the page initially. If they didn't the page would have to be redrawn for floated elements, specified padding, margins etc.
Whether to specify in html or css is best judged on individual circumstances. A large number of images of the same size would probably be best served with css, a single image with html. That said, if you are specifying other styles for the image (border colour, style or radius, float etc) it would make sense to add width & height to the css.
If you specify in html you can only use pixels. If you wanted to specify in say percentage you'd have to use css.
On a side note, we're encouraged to use ems & % rather than px to help avoid problems when users change browser settings etc, etc yet images are always referred to in pixels. Obviously there are practical reasons for using px for images. However keeping images in px would seem to negate the argument for not using them.
Solution 8 - Html
If it's part of your site template, I'd place it in the CSS file.
If it's just on one page, it should be inline (or defined in a block of page-specific CSS at the top).
Solution 9 - Html
My take is that it is part of the content,as you mentioned, much as the src attribute is too.
On the other hand there's no real need to specify width or height in either html or css, though it might help your page render faster.
Solution 10 - Html
I would go wi(d)th W3C Recommendation.
That is, defining the width and height as an attribute like this:<img src="example.png" width="150" height="150" alt="example image">
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
Solution 11 - Html
I could be wrong, and if I am, please, someone correct me... but I think Google and some other search engines index the content of alt tags.
Sometimes, for design aesthetics, I have created an image of text created with fonts that are not available via HTML, but are available to Photoshop, Illustrator, etc. If you have a precise typographic impression you want to create which involves textual information, the only way to get that across is to create an image of the typographical text and put the actual text in an alt tag for the sake of search engines.
If someone has a better solution, I'd love to hear it.
Meanwhile, tho, given a need for what I have described, it would seem reasonable to me to vote for HTML inline height/width parameters, along with alt text descriptions, as a matter of standard practice. It is, in fact content, not just design in such cases -- and such cases really should not be exceptions to the rule until CSS and search engines come up with an better solution.
Solution 12 - Html
How do email clients deal with img constraints as attributes vs inline styles?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
So, img size constraints should not be set with inline styles, primarily because Outlook 2007/2010/2013 does not honor them.
What happens when both attributes and inline styles are in use? Some clients use one or the other, and some use the inline width in combination with the attribute height:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
tldr: Use img attributes for html email.