HTML, “@width,” and “@height”

Published on February 17, 2011 (↻ February 5, 2024), filed under (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

As the width and height attributes are to remain part of HTML, limit their use.

The reason to avoid @width and @height is that they are presentational and hence constitute potential maintainability issues.

The only reasons to ever use @width and @height—alleviating excessive “page jump” issues on page load, providing information about the intrinsic dimensions of the replaced element in question, if necessary, or overwriting such dimensions—should rather be addressed over context, as in #gallery img { height: 100px; width: 100px; }, or over the explicitly presentational style attribute.

Was this useful or interesting? Share (toot) this post, become a one-time nano-sponsor, or support my work by learning with my ebooks.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

  1. On February 17, 2011, 21:58 CET, Mathias Bynens said:

    How does width=100 height=100 constitute potential maintainability issues where style="width: 100px; height: 100px;" wouldn’t?

  2. On February 17, 2011, 22:47 CET, Jens Oliver Meiert said:

    Mathias, @style is of course presentational and hence potentially problematic, too, when it comes to maintenance. Other methods should be favored, however the reason why I include it here is that @style is presentational by design and suffices to cover @width and @height if dimensions do really need to be specified in the markup.

  3. On February 18, 2011, 0:07 CET, Neovov said:

    Hi Jens,

    I think I read somewhere that not defining @width and especially @height cause a browser reflow during the media load which can be easily avoided.

    Just two more remarks:
    - I think the same thing can be applyied to . Especially with using @preload=none.
    - @width and @height seems still needed for since a flash, for example, can draw things depending on the context. This is the same for .

    I don’t see other use cases for @width and @height.

    Cheers.

  4. On February 18, 2011, 9:44 CET, Niels Matthijs said:

    Additionally, @style is perfect for variable styling (like cms-controlled background images, %-size graphs, …). Generally speaking stuff that would otherwise pollute your stylesheet or is simply impossible to predict up front.

    As for @width and @height … never needed those before.

  5. On March 1, 2011, 14:29 CET, Christine said:

    Hi Jens,

    you mentiond, @style could be problematic, when it comes to maintenance. I use it to define the size content boxes, that should have fixed dimesions. You recommended other methods, Could you give me a hint?
    Thank you.
    Christine.

  6. On March 1, 2011, 17:26 CET, Jens Oliver Meiert said:

    Christine, try to use the context (as in #preview img { height: 90px; width: 160px; }) if you really need to define image dimensions. If images have all unique dimensions and absolutely have to have their measures defined, by all means, use @style. There’s a chance these require markup edits anyway at some point.

  7. On March 29, 2011, 14:41 CEST, Gunnar Bittersmann said:

    I tend to disagree. If @width and @height are used to avoid page jumping, it is better to provide the intrinsic dimension information in the markup, not in the stylesheet – for maintainability reasons: When the image will be replaced by another image of different size in the future, one will not have to edit both markup and stylesheet.

    As Mathias already mentioned, I don’t see the benefit of a @style attribute. Don’t think of intrinsic dimensions as presentational information but as meta-information about the image. Hence @width and @height in the markup make perfect sense to me.

  8. On May 7, 2011, 20:56 CEST, Nicolas said:

    alleviating excessive “page jump” issues on page load : big issue effectively. It’s one of the top problem in order to have a speed rendering of a webpage. I definitively use width/height attributes for every images I use. Perhaps it could be added with PHP automaticcaly and cached?