Specify image size? (Full Version)

All Forums >> [Web Development] >> Accessibility



Message

BobbyDouglas -> Specify image size? (12/26/2007 13:20:19)

If you have an image that is supposed to be displayed using it's default size, what's the point of specifying the size in the HTML code for the image?

What are the downsides?



jaybee -> RE: Specify image size? (12/26/2007 14:59:19)

The browser renders faster if you tell it what size to display the image rather than let it figure it out for itself. If it's just one image it doesn't make a lot of difference but if there are many images then it does.

Plus, if you're using css for layout then not specifying the size can affect what displays especially if you're using floats.



BobbyDouglas -> RE: Specify image size? (12/26/2007 18:06:51)

How do you know it renders faster with the extra HTML that specifies the size? Did you read about this somewhere? Did you test it yourself?



jaybee -> RE: Specify image size? (12/26/2007 19:05:53)

No I just made it up. [8D]

It's one of the basic lessons of Web 101. The browser has to layout the page, if you tell it what goes where and what size it is then it can do it faster than if it has to work it all out.

If you have fast Broadband and you're using css for layout then it's not obvious but if it's table layout and you're on dial-up you can see it happen. It starts to layout the table then things start to shift around the page.



Tailslide -> RE: Specify image size? (12/27/2007 4:30:21)

I agree with Jaybee - if you don't add the height/width you end up with the page elements shifting around to make room for the images.

The only time I wouldn't add image dimensions into the HTML would be if I was deliberately stretching an image to 100% of a div for some reason (not a background image) and then the div would have a measurement of some kind anyway.



BobbyDouglas -> RE: Specify image size? (12/27/2007 11:14:08)

In most cases, divs have a specified width, but not always a height. The only thing that would shift is the text inside the fixed width div, right?

Anyone know of a FF extension to downgrade your download speed to test this out?



caz -> RE: Specify image size? (12/27/2007 13:38:48)

You could try the speed report in Tools on the Web Developer toolbar.



Tailslide -> RE: Specify image size? (12/27/2007 13:40:11)

Not sure I understand you Bobby - maybe we're talking about different things because this is a basic "given" surely...

Without dimensions the page will try to structure itself. Usually you'll get text etc first which will take up maximum allowed space. Then the images will finish downloading and the text etc will then have to make room for it thus shifting around which is a really ugly effect.

If you have the dimensions in the markup then the text (I'm saying text just for argument's sake) will know how big the image is and will make space for image in the first place without shifting around - therefore the page is downloaded in it's final form more quickly than if you don't use dimensions as you don't need to wait for the images.



mtfm -> RE: Specify image size? (12/27/2007 15:40:53)

interesting stuff. But a question, if I may... other than download speed, is there any other reason to have dimensions listed?

I have been leaving my dimensions off, if for nothing else than for flexibility. I make an intraweb, and many liks are images and whatnot that are sometimes held by other people or departments, and subject to change without notice. If I specified the size, and then they swapped the picture out for a smaller one, the new picture would look weird.



Tailslide -> RE: Specify image size? (12/27/2007 15:59:12)

If you're in that situation and can't change the dimensions dynamically then you probably just have to live with the shifting page. The disadvantages are offset by the advantage of not including them. For a "normal" website it's usually best to include the dimensions.



womble -> RE: Specify image size? (12/27/2007 16:27:20)

This discussion's just reminded me of one of Jaybee's posts the other day about Firefox 3 and ditching scaling text for zoom text. Would the new zoom feature have any effect on the enlarging of images, perhaps providing a further reason for why dimensions should be specified, or does it purely affect text?

quote:

interesting stuff. But a question, if I may... other than download speed, is there any other reason to have dimensions listed?


I've been looking around to see if there's any accessibility reason why image dimensions need to be specified (there's plenty of references to how it helps a page render faster, but nothing on accessibility), and the only thing I can think of is that for anyone using magnification software it could be very disorientating if page elements keep shifting around where image sizes aren't specified. It can be disorientating enough using a magnifier on a 'busy' page without bits of the page shifting around as it renders.



jaybee -> RE: Specify image size? (12/27/2007 17:46:16)

Zoom magnifies the entire page, including images which means if your graphics are low res they get very pixelated.

Or, to be accurate, it's meant to zoom the entire page but in IE it's pretty random as to the results.



BobbyDouglas -> RE: Specify image size? (12/27/2007 19:37:05)

The only thing I've known/tested is that images that lack the specified size, will move other elements(usually text) around as the image is resized to the full size it is supposed to be.

So really, this comes down to users on slow connections. However, despite the moving of text, it should take less time to load the entire page, because you are loading less content without specified sizes. But then you have to look at the extra time it takes for the entire page to render. Which is quicker?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375