SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Attributes

    Hello. It is said that adding width and height attributes to img tag help browsers render image file better.

    <img src="#" id="first" width="50" height="50" />

    But do these width and height attributes belong to semantic html and should always reside in html or do I have to transport these attributes to css, as below?

    #first {

    width:50px;
    height:50px;

    }

    And lastly if css is to be used, is same improvement of image rendering still retained?

    Thanks in advance.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say they belong in the CSS. The improvement in rendering consists of the browser knowing how much space to reserve for the image. If the dimensions aren't specified in the CSS or through HTML attributes, the browser uses a (usually very small) default size. Once it starts downloading the image and finds out the true dimensions it has to reallocate space for it, which usually means reflowing all subsequent content. The effect, as far as the user is concerned, is that the content of the page keeps moving around for a while.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast aldomatic's Avatar
    Join Date
    Dec 2006
    Location
    Big D
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always wondered this myself, great to see some insight on the topic.

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Correct me if I'm wrong, but haven't IMG height and width attributes been deprecated?

  5. #5
    ャ.ャ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I myself consider the width and height attributes of an image element as added information more then presentation. [They describe the image.] When it represents the actual width and height of the image. Use it to change the width and/or height then I would consider it presentation and should be offloaded to CSS.

    Thats my personal opinion.

    Correct me if I'm wrong, but haven't IMG height and width attributes been deprecated?
    Nope its part of the strict doctype
    http://www.w3schools.com/tags/tag_img.asp
    Last edited by logic_earth; Jun 25, 2008 at 18:08.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would never even consider putting image height and width in CSS. The attributes aren't presentational; they're attributes of the image.

    And if you put it in the CSS, you'd have to stick an ID on every single image, reference all those images in your stylesheet.... which would add a lot of pointless bulk everywhere.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Karpie on this one - leave them in the HTML. That way even if the CSS doesn't get applied, the browser can still render the image without having to guess the dimensions of the file.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karpie View Post
    And if you put it in the CSS, you'd have to stick an ID on every single image, reference all those images in your stylesheet.... which would add a lot of pointless bulk everywhere.
    For aesthetic reasons, I think it's likely that you won't have different sizes for every single image. You might use two or three different sizes on a site, which means you can use one or two classes instead of IDs.

    And the width and height are presentational, in my opinion. The meaning (semantics) of the image doesn't change whether you include them or omit them.
    Birnam wood is come to Dunsinane

  9. #9
    ャ.ャ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    And the width and height are presentational, in my opinion. The meaning (semantics) of the image doesn't change whether you include them or omit them.
    But you have to download the image in order to get those semantics.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    But you have to download the image in order to get those semantics.
    No, the semantic meaning of the image is whatever text equivalent you've specified in the alt attribute. That doesn't change whether the image is visible or not, or whether the dimensions are specified in the markup or not.

    The only difference after downloading the image is that the presentation of the information is different (as an image rather than as the text equivalent).
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Karpie and Dan here.
    Hrvoje Markovic
    Croatiankid designs

  12. #12
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Aberdeen, Scotland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alongside others here, i'd add my weight to defining these attributes in the html. There is however another method not discussed here yet...that is to output your images at the size required for display, (this should be done anyway in my opinion), this way there is the option to not include width and height attributes in the html nor to define it in css, instead you offload that task to the browser itself, which will know the width and height when it downloads the image...of course, you're making the browser do more work than it needs to...hence just define it in the html.....just added this method in the interests of the bigger picture in this discussion

  13. #13
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The way I see this, there are three issues here: the semantic, syntax and the practical.


    From a syntax point of view, the height and width attributes are perfectly legal, in that they are part of the DTD. They are listed as implied, though, so they are technically required to be present at all.


    From a semantic point of view, it can be argued that the attributes are presentational. The W3C does not consider the attributes presentational, however, as can be deduced from the quote below, and the fact that the attributes are not listed as deprecated:
    Quote Originally Posted by [url=http://www.w3.org/TR/REC-html40/struct/objects.html#adef-height-IMG]W3C[/url]
    All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets
    Of course, W3C's perception of the world isn't gospel, but I would still consider it a very strong indication.


    The conclusion of the practical point of view might depend on the required usage. If all images are to be of the same size, moving the height and width specifications to a style sheet will save some bandwidth (and possibly some time, at least if the pages are hand-coded). If the images are not all the same size (such as the images on my websites, none of which have the same size), setting up classes and applying them would take more time and require more bandwidth than using the attributes. In that case, the size could be set up through an inline style, but this would not save bandwidth and would not give any of the benefits CSS would usually give.

    The main practical problem is if the user has disabled style sheets. My guess if that these users would often be those who either have a slow connection or who have visual impairments. These users will also suffer the most from 'skipping' pages, either because it would do so for a long time or because it would be very difficult to follow the text. Still, this is a fairly small minority, and therefore a minor issue.


    Therefore, the way I see it, there is no right or wrong in this case. The syntax doesn't require anything, the semantic question is ambiguous and the practical benefits either depends on the usage or are negligible. Personally, I will continue to specify the attributes in the HTML document itself, as it is far easier for my purposes.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  14. #14
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Australia
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IMG height and width tags are necessary in my opinion. Also I always CSS unless its a mock up for a customer.
    If I don't use the tags then I make sure the images are inside tables with the same set height and width for all images. I do this when the images have a max height & width but are meant to be different shapes.

    Both ways keeps the images neat and tidy, also reserving room for the text. This option leaves your site with the same form of layout, whether the images load or not.

    Also I would never do CSS for each ID, I would class my images into each area of width and height they are..

  15. #15
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Eudanil View Post
    Also I would never do CSS for each ID, I would class my images into each area of width and height they are..
    That's still rather impractical, when your images' size varies so much, that you'd need to set up around 200 classes.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  16. #16
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Australia
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've never needed to set up that many classes. If your images range that much in size then you have a crappy looking site

  17. #17
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Says you, who uses tables for images. Look who else can make gross generalizations

  18. #18
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Australia
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used it once, on one for class cos our lecturer was on at us quite often over how much time we spend on the site.

    But one wouldn't do that many classes for a site unless they were very messy

  19. #19
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, quite a debate going here...

    Why are the height/width attributes necessary at all?

    I always save my images in the size they'll be used so is there even a need to specify?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  20. #20
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Eudanil
    If your images range that much in size then you have a crappy looking site

    [...]

    But one wouldn't do that many classes for a site unless they were very messy
    Or maybe I just have a website with antique photographs, all of which are of difference height, because there were no image size standards at the time? Actually, that is a pretty likely reason, since I have a website just like that. It is even listed in my signature, but for your convenience, I will write the address here: http://www.panzerphotos.dk/index

    Now, you can of course argue that you find this site 'crappy looking', but I know that other people would disagree.

    Since you statement was written as fact, and I have proven above that it is at least up for discussion, your statement is invariably false.

    JimmyP
    If you don't set the width and height, the page will 'skip' until all the images have been downloaded, which is very annoying while reading.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've been told, unequivically, that I must add height and width attributes in the HTML, and not the CSS (unless I want to repeat myself). I was told at IWDN that without the attributes, the browser will go through the page twice, once for content and then again after it has all the images loaded and can see what their measurements are (what Christian said).

    Unless it's used to change the display of the height and width, setting them in the HTML is not presentational in my mind, any more than the src is presentational. The image IS so-many pixels by so-many pixels. It just IS. I am not describing it. It is an intrinsic value just like the other values that are in that image file like EXT data, whether it's indexed or RGB, whatever.

    I could wobble on this when talking about vectors, but since I cannot display them properly on a website (ahem, IE), I am only referring to raster images then.

  22. #22
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to ask another related question. Say I have three images on the page. They are all 500x500 px sizeds. I dont add width and height attributes to images. But I wrap each image with a div and assign 500px values to height and width css properties of those divs. In other words I preserve a wrapper area for those images. In that case does the page skip or not?

  23. #23
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the div exists just to wrap the images then it's extra markup for no reason. Just put the dimensions on the images directly. It would preserve the space, but if that's all you're using the DIV for then there's no reason to use a DIV. However keep in mind that IMG is inline and DIV is block at default display if you're still going to use DIV.
    Hrvoje Markovic
    Croatiankid designs

  24. #24
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to declare IMG width and height so you will not encounter any problem especially on IE Browsers.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •