Image width/height as an attribute or in CSS? [duplicate]

Question

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.)

Hinckley

Answer 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.

Oleander

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

is this question not relating to the width attribute specifically and not the actual image itself? – Mexican

Neither question nor answer appears to understand the notion of semantic HTML. Height and width are presentational attributes regardless of where you put them. For semantics we establish what the image means to content in the alt tag. I don't remember why it was so important to width/height in the HTML but I suspect it was in case you hit browsers without CSS rendering. It's not a semantics issue. If anything it thwarts separation of concerns to a degree. – Rehabilitate

it's better inline. In fact, HTML validators will give you warnings that the width and height are missing. – Dappled

They cause completely different behavior for auto margins. If you have a fixed element for example with top/bottom/left/right set to zero and you stick an image in it you want to center wrapped in a div, then in order to center that div with auto margins, you MUST specify a CSS width/height, because specifying an HTML attribute width/height has no effect and the margins remain zero. I have no idea why the difference exists. For example: jsfiddle.net/L1rk46xy See centered text. Remove the "style" tag on fixed div and watch it lose centering in spite of width/height attributes. – Manslayer

both approaches are valid, but they serve different purposes. If the size is part of the content and is unlikely to change, specifying it directly in the HTML markup is more semantic. However, if the size is purely presentational or if you need to apply consistent styling across multiple images, using CSS is preferable. – Chunk

Answer 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.

Teens

Answer 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.

Poddy

And one can also put it as inline css so it won't be overriden by external css file. – Lonergan

WebKit-Browsers also reserve the space when using CSS. Firefox will always collapse an 404 image (with attribut and/or with css). – Photoemission

You don't need width/height attributes to prevent the "pop" effect. This can be done from CSS as well. – Villatoro

Answer 4

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?

Peahen

Thanks for the, in my opinion most, informative answer. But I am wondering why the browser should need the real image dimensions (before loading).. – Samoyedic

So that while a page is loading, the browser can properly position the page contents (around the image) before the image is actually downloaded, by putting a placeholder. Otherwise the browser would have to shift the contents once the image is loaded. See the following article which covers the basics, and goes into more difficult issues about CSS resizing: Setting Height And Width On Images Is Important Again. – Peahen

Answer 5

I'd say CSS.

HTML is about content,
CSS is about presentation.

Retainer

The problem is that the image is content, how to display it is information. The non-presentation attributes of content are still content. – Tack

@Evan - "how to display it is information". Me no agree. Information does not depend on how it's presented. Whether you display a series of numbers as a graph, or as a list, the numbers (i.e. the information) will still be the same. – Retainer

Everything can be reduced to be number. You wouldn't want your image rendered as a number because the data doesn't describe anything other than an image. It's not presentational in the sense of the normal html/css divide to identify the data as an image. <IMG> here is symantic-markup. Likewise, it wouldn't be wrong to say anything about the data behind the image, such as its native width and height. I'd argue it's just as right to do that, as it is to display "alt" information about the image: they're both meta-data about the native image, oblivious to context and display. – Tack

To further that analogy you can render alt text many different ways, and presumably some time with CSS 4.0 perhaps you'll get control of how the user agent renders the alt text. Right now, regardless of the image's native height and width you can render it different. The functionality that has yet to be created for alt-text has long been created for image display (via the presentational width and height css-attributes on the image element). – Tack

Answer 6

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.

Kuebbing

Answer 7

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.

Dangelo

But when you write it into the css, doesn't it reserve the place as well? Only if the page loaded very slowly and the css was in a seperate file you would see content being kicked around, wouldn't you?! But then that would be the case for everything on the page, so the image wouldn't matter much. But you could just write it in a css block above. Or am I overlooking something here? – Samoyedic

Answer 8

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).

Christal

Answer 9

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.

Headstone

Answer 10

How do email clients deal with img constraints as attributes vs inline styles?

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >

https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >

https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >

https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >

https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared

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;" >

https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared

tldr: Use img attributes for html email.

Catto

Answer 11

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

Unready

Answer 12

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.

Rainey

Are you arguing that there is value in Google indexing the width attribute of the img tag?? – Angadreme

While you go into one possible reason why one would want to specify the exact size of an image explicitly, you are not really answering the question (which is how/where to specify an image's size, as HTML attributes vs. in a CSS rule). – Uel

P.S. these days web fonts (via CSS3 @font-face rules) would appear to be the preferable solution (over prerendering text as an image) for having text rendered in a particular font that might not be present on a client machine. – Uel