Home1
The HTML Image Tag Tue Dec 28, 2010 4:25 am
des
Achiever
The image tag is used to place an image on the web page. In its most simple form it looks like this:
<img src="image1.jpg">
The Basics - How it Works
It is very important to understand that images are not technically "part" of the web page file, they are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file. The example on the right illustrates this.
In this example the two files are both located in the same folder. The HTML file includes an image tag which refers to image1.jpg.
When the HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
As you can see, the most important attribute of the image tag is src, which means source and tells the browser where the image file is.
Size Attributes
The size attributes define the width and height of the image. They look like this:
<img src="image.jpg" width="200" height="150">
These attributes are optional but strongly recommended as they help the browser arrange the page more quickly.
Resizing the Image
If the size attributes are set to different values than the original image size, the browser will resize the image to the specified size (this doesn't affect the image file itself, just the way it's displayed in the page). This is a bad idea - the browser will not do a very good job of resizing and there are other complications. In general you should always match the size attributes to the actual size of the image file. If you don't know the image file size, try either of these methods:
● Import the image into any graphics program and select "Image Size" from the menu. This will tell you the height and width.
● Open the image file in a browser, right-click the image, then select "Properties". This will tell you the width and height.
If the image file is the wrong size for your needs, you need to resize it properly using a graphics program.
<img src="image1.jpg">
The Basics - How it Works
It is very important to understand that images are not technically "part" of the web page file, they are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file. The example on the right illustrates this.
In this example the two files are both located in the same folder. The HTML file includes an image tag which refers to image1.jpg.
When the HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
As you can see, the most important attribute of the image tag is src, which means source and tells the browser where the image file is.
Size Attributes
The size attributes define the width and height of the image. They look like this:
<img src="image.jpg" width="200" height="150">
These attributes are optional but strongly recommended as they help the browser arrange the page more quickly.
Resizing the Image
If the size attributes are set to different values than the original image size, the browser will resize the image to the specified size (this doesn't affect the image file itself, just the way it's displayed in the page). This is a bad idea - the browser will not do a very good job of resizing and there are other complications. In general you should always match the size attributes to the actual size of the image file. If you don't know the image file size, try either of these methods:
● Import the image into any graphics program and select "Image Size" from the menu. This will tell you the height and width.
● Open the image file in a browser, right-click the image, then select "Properties". This will tell you the width and height.
If the image file is the wrong size for your needs, you need to resize it properly using a graphics program.
