Chapter 6, Lesson 8
Chapter 6, Lesson 8![[INDEX]](icon_bki.gif){kind=icon}
Ch
6,
L
8 -
Width, Height, & Loading Images Last
If you already know how to specify the height and width of an inline-image, and why you would want to do so, you can skip this lesson.
You don't have to specify the image size in order for it to be displayed. When it reads the image file, the browser will calculate how much space to set aside for the display of the image. The trouble is, that while it's downloading the image file, the rest of the web page (text) has to wait. (I'm sure you've had the experience, drumming your fingers endlessly while some large, boring image file - usually an advertisement - gets loaded before the text). HTML provides two additional attributes for the 'IMG' tag, 'WIDTH=' and 'HEIGHT=', which tell the browser (before it has loaded the image file) how big the image is going to be. This allows the browser to continue loading the text of the web page, so you can read it while the images/advertisements load last.
Naturally, the width and height of the image is expressed in pixels (screen dots), so to specify the attribute value, you have to know the image's size (in pixels). You can generally get this information from whatever image editor you are using. If you don't know the image size, it's best not to use these attributes, although some browsers will accept your values as a request to "scale" the image to the specified size (but don't count on it!).
You would normally use both 'WIDTH=' and 'HEIGHT=', if you specify them at all. The format is:
<IMG SRC="image-filename" WIDTH=num-pixels HEIGHT=num-pixels>
Follow the usual rules regarding whitespace and embedded attributes. Also notice that no quotation marks are required around the value. Let's look at code:
Here's the image <I>without</I> WIDTH or HEIGHT attributes specified:<BR> <IMG SRC="saturn0.gif"> <P> Here's the image <I>with</I> WIDTH or HEIGHT attributes specified correctly (84 x 49):<BR> <IMG SRC="saturn0.gif" WIDTH=84 HEIGHT=49> <P> Here's the image <I>with</I> WIDTH or HEIGHT attributes specified<I> incorrectly</I> (49 x 49):<BR> <IMG SRC="saturn0.gif" WIDTH=49 HEIGHT=49> <P> Here's the image <I>with only the </I> WIDTH specified<I>, and incorrectly at that</I> (200 x ??):<BR> <IMG SRC="saturn0.gif" WIDTH=200>
Here's the image without WIDTH or HEIGHT attributes specified:
Here's the image with WIDTH or HEIGHT attributes specified correctly (84 x 49):
Here's the image with WIDTH or HEIGHT attributes specified incorrectly (49 x 49):
Here's the image with only the WIDTH specified, and incorrectly at that (200 x ??):
This is pretty darned interesting. As you can see from the first two demonstrated images, there is no difference in the way they are presented on the screen. If you had been watching closely when the web page first loaded, you probably would have seen that the text was loaded first, and the images last (although this is somewhat browser dependent).
In the third image, the width was specified WRONGLY as 49 pixels wide and 49 pixels high, instead of its original 84 x 49. What you see here is browser-dependent, so don't count on it happening the same way with every browser. On advanced browsers, the browser usually "scales" (adjusts) the image to fit the specified WIDTH and HEIGHT. Remember, though, not everyone who looks at your web page will have an advanced browser.
The last (fourth) image is just plain bad practice. What we've done there is specify the WIDTH, but not the HEIGHT. To make matters worse, we've specified the image as 200 pixels wide instead of its original 84. Some browsers (though not all) may scale the fourth image to 200 wide, and automatically scale the HEIGHT to maintain the image's original aspect ratio (proportions). Again, that's a nice feature, but since all browsers do not behave the same way, I highly recommend using the WIDTH and HEIGHT together, and only with the image's original dimensions.
... leave e-mail ...
