Jens Oliver Meiert

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

Post from February 17, 2011 (↻ September 1, 2021), filed under .

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.

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

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.


  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.

  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?

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me,

You are here: HomeArchive2011 → HTML, “@width,” and “@height”

Last update: September 1, 2021

Professional frontend developers produce valid HTML and CSS.