Page Content - HTML QuickStart Guide: The Simplified Beginner's Guide to HTML - page 57

Note: While alternate text can theoretically be as long as we like, most browsers
don't automatically wrap long lines. Therefore, it's a good idea to keep it under 50
characters.
When working with web images, we have to consider two variables: image dimensions and
image file size. Image dimensions determine how much screen real estate an image occu-
pies in pixels. The image file size will determine the time it will take for that image to be
transferred over the Internet from a web server to a browser client. While parsing the code,
when a browser reaches the img tag, it must first load the image to see how big it is and
how much space it will consume on the screen. If we specify the image's dimensions, the
browser can reserve some screen space and load the rest of the page content as the image
loads.
The <img> element lets us specify the image dimensions through its optional height and
width attributes. If we want to use the original dimensions of the image, we need to take
the following steps:
1) In Windows Explorer right-click the image.
2) Choose Properties from the contextual pop-up menu. A box will appear showing
the dimensions of our image in pixels.
Once we figure out the size of our image, we can use the width and height attributes to
specify the width and height of our image in pixels. The width and height attributes don't
necessarily have to reflect the actual size of the image, as we can insert any value we want.
<img src="images\cv_picture.jpg" alt="Scott Johnson profile picture" width="100" height ="150">
In the above example, we tell the browser to reserve 100x150 pixels of screen estate in
which to load the cv_picture.jpg image from the images folder.
Note: Some HTML editors, like Dreamweaver and Expression Web, will automat-
ically add the height and width attributes when you insert an image.