Jens Oliver Meiert

HTML, @width, and @height

Post from February 17, 2011 (↻ December 12, 2016), reflecting Jens the .

This and many other posts are also available as a pretty, well-behaved e-book: 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.

About the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is a philosopher and developer (Google, W3C, O’Reilly). He experiments with arts and adventure. Here on he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Amazon. If you have any questions or concerns (or recommendations) about what he writes, leave a comment 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:

Or maybe say hi on Google+, Twitter, or LinkedIn?

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

Found a mistake? Reward! Email me,

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

Last update: December 12, 2016.

“Everyone has the right to freedom of information and communication.”