Chapter 29. Transforming Images with HTML Attributes
| Browsers that support images can do more than display graphics. They can also resize their physical dimensions. When you add an image to your page, you generally specify the exact dimensions of the graphic with the width and height attributes of the img tag, as in Figure 29.1. Listing 29.1. View Source for Figure 29.1.<img src="/books/2/30/1/html/2/logo.jpg" width="150" height="75"> Figure 29.1. Give the exact dimensions of the image in its image tag, and the image appears on the page exactly as you designed it in your graphics software. But who says you have to give the image's actual dimensions? You can transform the image by stretching its width or height, as in Figure 29.2. Listing 29.2. View Source for Figure 29.2.<img src="/books/2/30/1/html/2/logo.jpg" width="300" height="35"> Figure 29.2. By changing the values of the width and height attributes, you transform the image in HTML. And by increasing or decreasing the width and height values proportionately, you can resize the image, as in Figure 29.3. Listing 29.3. View Source for Figure 29.3.<img src="/books/2/30/1/html/2/logo.jpg" width="300" height="150"> Figure 29.3. By increasing or decreasing the width and height proportionately, you resize the image in HTML. Use these tricks judiciously, though. HTML is the poor person's Photoshop, and you definitely get what you pay for. Transforming an image in dedicated graphics software gives you better-looking results as a rule. And making an image smaller in HTML doesn't change its download time, just as making an image larger doesn't increase download time. The browser always downloads the source file at its normal dimensions, no matter how you transform the image in the HTML.
|
