HTML and CSS Reference
In-Depth Information
[*] Another reminder that images are separate files, which are loaded individually and in addition to the
source document.
A more efficient way for authors to specify an image's dimensions is with
the height and width <img> attributes. That way, the browser can reserve
space before actually downloading an image, speeding document ren-
dering and eliminating the content shifting. Both attributes require an
integer value that indicates the image size in pixels; the order in which
they appear in the <img> tag is not important.
5.2.6.11. Resizing and flood-filling images
A hidden feature of the height and width attributes is that you don't
need to specify the actual image dimensions; the attribute values can
be larger or smaller than the actual size of the image. The browser auto-
matically scales the image to fit the predefined space. This gives you a
down-and-dirty way of creating thumbnail versions of large images and
a way to enlarge very small pictures. Be careful, though: the browser
still must download the entire file, no matter what its final rendered size
is, and you will distort an image if you don't retain its original height
versus width proportions.
Another trick with height and width provides an easy way to flood-fill
areas of your page and can also improve document performance. Sup-
pose you want to insert a colored bar across your document. [ ] Instead
of creating an image to fill the full dimensions, create one that is just 1
pixel high and wide and set it to the desired color. Then use the height
and width attributes to scale it to the larger size:
[ ] This is one way to create colored horizontal rules, since Netscape doesn't support the color at-
tribute for the <hr> tag.
<img src="pics/one-pixel.gif" width=640 height=20>
 
 
Search WWH ::




Custom Search