Should image size be defined in the img tag height/width attributes or in CSS?

Question

Is it better coding practice to define an images size in the img tag's width and height attributes?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

Or in the CSS style with width/height?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />

Or both?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />

Answer 1

Definitely not both. Other than that I'd have to say it's a personal preference. I'd use css if I had many images the same size to reduce code.

.my_images img {width: 20px; height:20px}

In the long term CSS may win out due to HTML attribute deprecation and more likely due to the growth of vector image formats like SVG where it can actually make sense to scale images using non-pixel based units like % or em.

Answer 2

<img id="uxcMyImageId" src"myImage" width="100" height="100" />

specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.

Answer 3

While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.

Like this:

In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />

In css/style.css:
img.thumbnail {
   width: 75px;
   height: 75px;
}

If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.

Answer 4

The reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the image resource actually loads (otherwise the page can reflow on load complete).

However, there are times when you may not have the image size ahead of time (src might be loaded dynamically, or image can change during the lifetime of the page) in which case using CSS makes sense.

Answer 5

Option a. Simple straight fwd. What you see is what you get easy to make calculations.

Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}

<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

Option c. Too messy to maintain.

Answer 6

Strictly speaking, using the width and height attributes of the <img> tag are not forbidden under the HTML4.01/XHTML1.0 DTDs, including Strict. However, speaking of best practices, it's generally accepted that separating HTML from CSS is a good idea. Keep the dimensions in the CSS if you can help it.

Answer 7

I'm going to go against the grain here and state that the principal of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width. Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes. This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has with 15 and height 200"). Such user agents wouldn't necessarily process any CSS.

The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.

So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.

Answer 8

I'm using contentEditable to allow rich text editing in my app. I don't know how it slips through* but when an image is inserted, and then resize (by dragging the anchors on its side), it generates something like this:

< img style="width:55px;height:55px" width="100px" height="100px" src="pic.gif" border=0>

(subsequent testing shown that inserted images did not contain this "rogue" style param).

when rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.

When I output the page to a ms-word document via setting the mime type application/msword / or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).

Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.

cheers.

opps.. my answer is.. no. leave both attributes directly under img, rather than style.