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

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.