Jens Meiert

HTML, @width, and @height

Jens O. Meiert, February 17, 2011 (↻ August 16, 2013).

This entry has been written by Jens the .

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

The reason to avoid @width and @height is that they have to be considered 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.

Read More

Enjoy the most popular posts, eventually including:

Comments

  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 O. 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 O. 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?

Leave a Comment

Unfortunately, comments are closed.

Found a mistake? Reward! Email me, jens@meiert.com.

You are here: meiert.comArchive for 2011 → HTML, @width, and @height

Last update: August 16, 2013.