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    lt img src  images academia vs business png  width  740  height  382  alt      gt    Or in the CSS style with width height    lt img src  images academia vs business png  style  width 740px  height 382px   alt      gt    Or both    lt img src  images academia vs business png  width  740  height  382  style  width 740px  height 382px  alt      gt

User · Answer

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 resized  by dragging the anchors on its side   it generates something like this      lt img style  width 55px height 55px  width  100  height  100  src  pic gif  border 0  gt     subsequent testing shown that inserted images did not contain this  rogue  style attr 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

User · Answer

I m going to go against the grain here and state that the principle 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 a width of 15 and a height of 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

User · Answer

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     lt  --html-- gt   lt ul gt  lt li gt   lt img src    img products thumbs productid jpg  alt      gt   lt  li gt  lt  ul gt    Option c  Too messy to maintain

User · Answer

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   lt link type  text css  rel  stylesheet  href  css style css      Your HTML   lt 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

User · Answer

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

User · Answer

The historical reason to define height width in tags is so that browsers can size the actual  lt img gt  elements in the page even before the CSS and or image resources are loaded  If you do not supply height and width explicitly the  lt img gt  element will be rendered at 0x0 until the browser can size it based on the file  When this happens it causes a visual reflow of the page once the image loads  and is compounded if you have multiple images on the page  Sizing the  lt img gt  via height width creates a physical placeholder in the page flow at the correct size  enabling your content to load asynchronously without disrupting the user experience   Alternately  if you are doing mobile-responsive design  which is a best practice these days  it s quite common to specify a width  or max-width  only and define the height as auto  That way when you define media queries  e g  CSS  for different screen widths  you can simply adjust the image width and let the browser deal with keeping the image height   aspect ratio correct  This is sort of a middle ground approach  as you may get some reflow  but it allows you to support a broad range of screen sizes  so the benefit usually outweighs the negative   Finally  there are times when you may not know the image size ahead of time  image src might be loaded dynamically  or can change during the lifetime of the page via script  in which case using CSS only makes sense   The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you re trying to achieve

User · Answer

lt img id  uxcMyImageId  src myImage  width  100  height  100    gt    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

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

Examples related to html

Examples related to css

Examples related to image