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

by

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.

More Related Contents:

  1. Black image fade over image [duplicate]
  2. Image inside div has extra space below the image
  3. When to use IMG vs. CSS background-image?
  4. What is the effect of encoding an image in base64?
  5. CSS Display an Image Resized and Cropped
  6. Is there an equivalent to background-size: cover and contain for image elements?
  7. Removing whitespace between HTML elements when using line breaks
  8. Make an image responsive – the simplest way [duplicate]
  9. How can I make all images of different height and width the same via CSS?
  10. How can I display just a portion of an image in HTML/CSS?
  11. Fullscreen responsive background image in CSS
  12. CSS image resize issue
  13. Floating an image to the bottom right with text wrapping around
  14. Protect image download
  15. How to make in CSS an overlay over an image?
  16. Scale image to fit a bounding box
  17. img tag displays wrong orientation
  18. How does one use the onerror attribute of an img element
  19. How to change an image on click using CSS alone?
  20. How to make images stay within the rows of a css grid container?
  21. How to strike through obliquely with css
  22. How can I resize an image to a percentage of itself with CSS?
  23. CSS align images and text on same line
  24. How to auto-resize an image while maintaining aspect ratio
  25. download webpage and dependencies, including css images [closed]
  26. How to place Text and an Image next to each other in HTML?
  27. Why use a sprite sheet rather than individual images?
  28. How to forcefully print background image in HTML?
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment