Ordinarily it is considered good practice to supply height and width values for any IMG tag. This permits a browser to display text around 'place-holders', without having to wait for any images to Download <!--more--> before proceeding. The advantages are thus that (a) the user has something to look at whilst the images Download <!--more-->, and (b) the page as a whole (seems to) Download <!--more--> faster.<br />
<br />
However, one of my webpages (url below) makes use of a number of tiny images many times over. At the moment no HEIGHT or WIDTH attributes are specified, which means that although there is a small amount of 'jiggling' whilst the page Download <!--more-->s, the total Download <!--more--> time is minimized (since there would be a good few more KB of code if I specified HEIGHT and WIDTH attributes every time one of those tiny images is called).<br />
<br />
My question is this: given that in this case specifying HEIGHT and WIDTH attributes would actually increase the total Download <!--more--> time, are there any other good reasons to include HEIGHT and WIDTH values?<br />
<br />
Many thanks in advance<br />
Chimp<br />
<br />
Manuel DeLanda Annotated Bibliography:<br />
<!-- m --><a class="postlink" href="http://www.btinternet.com/~cyberchimp/delanda/">http://www.btinternet.com/~cyberchimp/delanda/</a><!-- m --><!--content-->I don't know of any good reasons for or against, but could you specify the image externally??<br />
<br />
e.g. in the body<br />
<br />
<span class="image1"></span><br />
<br />
and in an external css doc<br />
<br />
.image1{width:150px; height:150px; background-image: url("graphics/image1.jpg"); background-position: center; background-repeat:no-repeat;}<br />
<br />
You could probably leave out the position and repeat attributes.<br />
<br />
Dave<!--content-->THis isn't related to your problem, but I looked at your site and you have the main area defined as 604px. Your orange line with the white boxes looks like it's defined at 100% width. The part where it includes the year and and the down/up arrows fit within the 604px area. However, the orange and white box part of it goes beyound that. I know my resolution is not exactly common, but I have a width of 1400, so I see an area of 604px being used and 796px using the orange lines with white boxes. I think it would be better if you keeped the orange line the same width as the main area, and maybe even putting a white border around the whole thing.<!--content-->If he weren't using spans anywhere else on the page he could just use,<br />
<br />
<span></span><br />
<br />
and<br />
<br />
span{width:150px; height:150px; background-image: url("graphics/image1.jpg"); background-position: center; background-repeat:no-repeat;}<br />
<br />
and if he is using span's (I haven't looked), he could use div's or some other element.<!--content-->Maybe you could use PHP to add the height and width to each image tag once the page has loaded.<!--content-->Re: SPAN Image. Oooh, that is an interesting possibility, and could reduce the file size even further. Most of the images are links though (to a different url each time), so how would I incorporate (a) the link, and (b) the requisite ALT and TITLE attributes? Can you put these in a CSS?<br />
<br />
Re: Orange 'Year Band'. Thanks for taking a look, spufi, its always good to get feedback like this. I'll definitely consider confining the 'year bands' to the width of the rest of the page. (I'll pass on the white border, though
.)<br />
<br />
Re: PHP. Alas I don't know my PHP from an STD, or even whether my webspace provider supports it. Ah, so much to learn...<!--content-->Originally posted by cyberchimp <br />
Re: SPAN Image. Oooh, that is an interesting possibility, and could reduce the file size even further. Most of the images are links though (to a different url each time), so how would I incorporate (a) the link, and (b) the requisite ALT and TITLE attributes? Can you put these in a CSS? <br />
<span></span> is a very bad idea. Probably worse than even using zillion images. Non-visual browsers will not display any content. You are actually negating one of the most important advantages of using CSS for layout - accessibility.<br />
<br />
For your image rollovers, you have:<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#a1980" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('y1980','','images/1980r.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1980.gif" name="y1980" border="0" alt="1980s |" title=""></a><br />
How much will height="20" add to this already large amount of text?<!--content-->Originally posted by nkaisare <br />
<span></span> is a very bad idea. Probably worse than even using zillion images. Non-visual browsers will not display any content. <br />
<br />
If the image is for presentational purposes only, then it's better that a non-visual browser doesn't display anything.<br />
<br />
As far as the dates are concerned he could insert the text inside the span tag, and specify one background image for them all. Then use more css to make a rollover background and text,<!--content-->The image is not for presentation purpose in this case. The image is a link (or thats what I reckon). And its imperative that a non-visual browser reads the alt text.<br />
<br />
Also, a better way of "hiding" images from a non-visual browser is to use <img alt=""> instead of <span></span>. For one, there is a possibility that in future, one may need to use a <span> for styling an inline content (say <span style="color: red">). You will be at pains trying to get back the layout that you started with.<!--content-->Originally posted by DaveSW <br />
As far as the dates are concerned he could insert the text inside the span tag, and specify one background image for them all. Then use more css to make a rollover background and text. <br />
Absolutely! <br />
<br />
I presume cyberchimp is already aware of that possibility... I saw his reply in another thread (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=11494&pagenumber=2">http://forums.webdeveloper.com/showthre ... genumber=2</a><!-- m -->)<br />
<br />
EDIT: Next post of Dave is bang on target. In the above url, Vladdy was discussing how to make CSS hover using background properties. I have a small example at<br />
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/web4vibha/alternate.html">http://www.prism.gatech.edu/~gte207x/we ... rnate.html</a><!-- m --><br />
The top tabs have a single background gif (transparent with rounded border) and <a> changes background color from gray to green.<!--content-->isn't<br />
<br />
<span class="dates"><a href=http://www.webdeveloper.com/forum/archive/index.php/"anchor1">1980</a></span> far shorter and just as accessible as<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#a1980" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('y1980','','images/1980r.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1980.gif" name="y1980" border="0" alt="1980s |" title=""></a> ??<br />
<br />
And if all the rollovers are in the css he will only need one image for his background and one for his rollover, decreasing Download <!--more--> time yet again.<br />
<br />
Specifying a class means he needn't worry about needing the span tag for something else. <br />
<br />
And why would my code above need alt text??<br />
<br />
<br />
EDIT: perhaps we should all stop posting at once!! it's getting confusing!!<!--content-->Okay, guys, you've convinced me - I'll have another go at using text for those year links. (The problem that I had when I tried this before, and the reason I resorted to images, was getting all the characters - 1992, 2003, etc - to display elegantly. What looked okay on one browser got 'hunched' on another, even if I employed all sorts of dubious non-accessible methods to 'fix' font sizes.)<br />
<br />
Incidentally, it wasn't just the year images that I was thinking of, though, when I posted. There's also the tiny 'upward arrows' at the end of each annotation. I'm intrigued by the idea of using CSS to make these roll, but I'll wait on Vladdy's reply in the other thread before I attempt that one.<br />
<br />
Finally, no-one has actually thrown any light on my original question. Both the site validators that I use (W3C (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) and Watchfire (<!-- m --><a class="postlink" href="http://webxact.watchfire.com/">http://webxact.watchfire.com/</a><!-- m -->)) flag up missing HEIGHT and WIDTH attributes as errors, but I'm still not quite sure how serious this actually is.<!--content-->
<br />
However, one of my webpages (url below) makes use of a number of tiny images many times over. At the moment no HEIGHT or WIDTH attributes are specified, which means that although there is a small amount of 'jiggling' whilst the page Download <!--more-->s, the total Download <!--more--> time is minimized (since there would be a good few more KB of code if I specified HEIGHT and WIDTH attributes every time one of those tiny images is called).<br />
<br />
My question is this: given that in this case specifying HEIGHT and WIDTH attributes would actually increase the total Download <!--more--> time, are there any other good reasons to include HEIGHT and WIDTH values?<br />
<br />
Many thanks in advance<br />
Chimp<br />
<br />
Manuel DeLanda Annotated Bibliography:<br />
<!-- m --><a class="postlink" href="http://www.btinternet.com/~cyberchimp/delanda/">http://www.btinternet.com/~cyberchimp/delanda/</a><!-- m --><!--content-->I don't know of any good reasons for or against, but could you specify the image externally??<br />
<br />
e.g. in the body<br />
<br />
<span class="image1"></span><br />
<br />
and in an external css doc<br />
<br />
.image1{width:150px; height:150px; background-image: url("graphics/image1.jpg"); background-position: center; background-repeat:no-repeat;}<br />
<br />
You could probably leave out the position and repeat attributes.<br />
<br />
Dave<!--content-->THis isn't related to your problem, but I looked at your site and you have the main area defined as 604px. Your orange line with the white boxes looks like it's defined at 100% width. The part where it includes the year and and the down/up arrows fit within the 604px area. However, the orange and white box part of it goes beyound that. I know my resolution is not exactly common, but I have a width of 1400, so I see an area of 604px being used and 796px using the orange lines with white boxes. I think it would be better if you keeped the orange line the same width as the main area, and maybe even putting a white border around the whole thing.<!--content-->If he weren't using spans anywhere else on the page he could just use,<br />
<br />
<span></span><br />
<br />
and<br />
<br />
span{width:150px; height:150px; background-image: url("graphics/image1.jpg"); background-position: center; background-repeat:no-repeat;}<br />
<br />
and if he is using span's (I haven't looked), he could use div's or some other element.<!--content-->Maybe you could use PHP to add the height and width to each image tag once the page has loaded.<!--content-->Re: SPAN Image. Oooh, that is an interesting possibility, and could reduce the file size even further. Most of the images are links though (to a different url each time), so how would I incorporate (a) the link, and (b) the requisite ALT and TITLE attributes? Can you put these in a CSS?<br />
<br />
Re: Orange 'Year Band'. Thanks for taking a look, spufi, its always good to get feedback like this. I'll definitely consider confining the 'year bands' to the width of the rest of the page. (I'll pass on the white border, though
.)<br /><br />
Re: PHP. Alas I don't know my PHP from an STD, or even whether my webspace provider supports it. Ah, so much to learn...<!--content-->Originally posted by cyberchimp <br />
Re: SPAN Image. Oooh, that is an interesting possibility, and could reduce the file size even further. Most of the images are links though (to a different url each time), so how would I incorporate (a) the link, and (b) the requisite ALT and TITLE attributes? Can you put these in a CSS? <br />
<span></span> is a very bad idea. Probably worse than even using zillion images. Non-visual browsers will not display any content. You are actually negating one of the most important advantages of using CSS for layout - accessibility.<br />
<br />
For your image rollovers, you have:<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#a1980" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('y1980','','images/1980r.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1980.gif" name="y1980" border="0" alt="1980s |" title=""></a><br />
How much will height="20" add to this already large amount of text?<!--content-->Originally posted by nkaisare <br />
<span></span> is a very bad idea. Probably worse than even using zillion images. Non-visual browsers will not display any content. <br />
<br />
If the image is for presentational purposes only, then it's better that a non-visual browser doesn't display anything.<br />
<br />
As far as the dates are concerned he could insert the text inside the span tag, and specify one background image for them all. Then use more css to make a rollover background and text,<!--content-->The image is not for presentation purpose in this case. The image is a link (or thats what I reckon). And its imperative that a non-visual browser reads the alt text.<br />
<br />
Also, a better way of "hiding" images from a non-visual browser is to use <img alt=""> instead of <span></span>. For one, there is a possibility that in future, one may need to use a <span> for styling an inline content (say <span style="color: red">). You will be at pains trying to get back the layout that you started with.<!--content-->Originally posted by DaveSW <br />
As far as the dates are concerned he could insert the text inside the span tag, and specify one background image for them all. Then use more css to make a rollover background and text. <br />
Absolutely! <br />
<br />
I presume cyberchimp is already aware of that possibility... I saw his reply in another thread (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=11494&pagenumber=2">http://forums.webdeveloper.com/showthre ... genumber=2</a><!-- m -->)<br />
<br />
EDIT: Next post of Dave is bang on target. In the above url, Vladdy was discussing how to make CSS hover using background properties. I have a small example at<br />
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/web4vibha/alternate.html">http://www.prism.gatech.edu/~gte207x/we ... rnate.html</a><!-- m --><br />
The top tabs have a single background gif (transparent with rounded border) and <a> changes background color from gray to green.<!--content-->isn't<br />
<br />
<span class="dates"><a href=http://www.webdeveloper.com/forum/archive/index.php/"anchor1">1980</a></span> far shorter and just as accessible as<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#a1980" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('y1980','','images/1980r.gif',1)"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1980.gif" name="y1980" border="0" alt="1980s |" title=""></a> ??<br />
<br />
And if all the rollovers are in the css he will only need one image for his background and one for his rollover, decreasing Download <!--more--> time yet again.<br />
<br />
Specifying a class means he needn't worry about needing the span tag for something else. <br />
<br />
And why would my code above need alt text??<br />
<br />
<br />
EDIT: perhaps we should all stop posting at once!! it's getting confusing!!<!--content-->Okay, guys, you've convinced me - I'll have another go at using text for those year links. (The problem that I had when I tried this before, and the reason I resorted to images, was getting all the characters - 1992, 2003, etc - to display elegantly. What looked okay on one browser got 'hunched' on another, even if I employed all sorts of dubious non-accessible methods to 'fix' font sizes.)<br />
<br />
Incidentally, it wasn't just the year images that I was thinking of, though, when I posted. There's also the tiny 'upward arrows' at the end of each annotation. I'm intrigued by the idea of using CSS to make these roll, but I'll wait on Vladdy's reply in the other thread before I attempt that one.<br />
<br />
Finally, no-one has actually thrown any light on my original question. Both the site validators that I use (W3C (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) and Watchfire (<!-- m --><a class="postlink" href="http://webxact.watchfire.com/">http://webxact.watchfire.com/</a><!-- m -->)) flag up missing HEIGHT and WIDTH attributes as errors, but I'm still not quite sure how serious this actually is.<!--content-->