Testing HTML for Lesson 7a: From Small to Big

This page demonstrates the use of the height and width attributes of the <img.../> tag to resize an image. The original image is only 211bytes in file size. In the HTML example below its dimensions are both increased by a factor of 5. The advantage here is that you can make an image fill a large area of a page without making a large file. GOOGLES image search is great for finding images.

ORIGINAL

This HTML

    <img src="images/new.gif" height="25px" width="49px" /> 
					 

Produces this Image

5times larger

245 pixels wide and 125 pixels high, 211bytes file size

This HTML

<img src="images/new.gif" height="125px" width="245px" />

Produces This Image:

Also take notice that when the image size increased, The image became blocky/pixilated on the edges. This will happen to your images too, and may or may not reduce the quality of your image depending on what it is.

Larger by percentage

70 percent wide and 100 percent high, 211bytes file size

This HTML

<img src="images/new.gif" height="100%" width="70%" />

Produces This Image:

This example demonstrates the use of the height and width attributes of the <img.../> tag to resize an image. The original image is only 211 bytes in file size. In the Above HTML examples, we used specific pixel dimensions. Now, the inline image dimensions of the image are expressed as a percentage of the browser window size rather than in exact pixel dimensions we saw in the Above examples. Meaning if the windows is smaller it only takes up the same amount of room, but on a smaller scale.