Adding more info to the image tag - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

25
Adding more info to the image tag

In the last chapter you learned to write the minimal amount of code for placing an image on the page.

<img src="images/founder.jpg">

This tag gives the browser the name of the image file and the path where it’s stored. That will get the job done. In practice, though, you’ll want to write a more elaborate tag.

<img src="images/founder.jpg" alt="Our founder" width="55" height="85">

The alt specification provides a word or a few words that describe the image. It’s the text alternative to the image, which the browser may display in case the browser fails to display the image for some reason or a person is using a screen reader. The text is up to you, but it should be brief.

The width and height specifications tell the browser how big the image is to be when it’s displayed. The numbers are pixels.

The common practice is to size original images to exactly the dimensions that they’ll display in the browser. So, in the example above, the image founder.jpg would be saved in Photoshop or another image editing program 55 pixels wide and 85 pixels high. Stating the dimensions in the image tag gives the browser a head-start on displaying the image correctly, which speeds up loading.

The dimensions you specify in the image tag don’t have to be the same as the dimensions of the image. For example, if you have an image that’s 200 pixels wide by 300 pixels high, you could ask the browser to scale it to 50% by writing width="100" height="150". You could also ask the browser to scale up an image, but this is rarely done, since it degrades the image.

Asking the browser to rescale an image slows down page loading minutely. If you have many images on your page, there might be a noticeable delay.

Browsers don’t care about the order in which you specify src, alt, width, and height, but the order I’ve given is conventional. I’ll ask you to stick to it in the exercises. A reader and beta-tester, John Koch, remembers the order of the first three specifications by thinking of a SAW.

In your HTML file add an alt specification to both loris image tags. Also add width and height specifications. The image size is 250 x 197. Specify that for the first image. Specify 125 x 99 for the second image. Save the file and display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-25-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/25.html