The image tag is used to add the image in the web page. A web page may have different types of images used in the image tag. Graphics make websites more attractive and interesting. HTML can be used to add static or animated graphics on websites. The image put into a webpage is called inline images. The most popular types of images used in web pages are .gif, .png and .jpg. <img> tag is used to insert images in web pages. This tag has no ending tag.
Attributes of the Image tag
|Src||The image tag specifies the name and path of the image to be displayed. The only name of the images is specified if the image is stored in the same directory in which the web page is stored. Otherwise, the complete path of the image is specified.|
|Align||the image tag specifies the alignment of the image. Possible alignments are as follows:|
It also specifies the text alignment with respect to the image. Possible alignments are as follows:
The text is written at the top next to the image
The text is written at the bottom next to the image
The text is written in the middle next to the image
|Border||The image specifies the size of the border around the image. The possible values are 1,2,3 and so on. The default value is 0.|
|Width||It specifies the width of the image in pixels or percentages.|
|Height||It specifies the height of the image in pixels or percentage|
|Hspace||It specifies the amount of space to the left and right side of the image in pixels|
|Vspace||It specifies the amount of space to the top and bottom of the image in pixels|
|Alt||It specifies the text to be displayed if the browser cannot display the image|
<html> <head> <title>wuexerice</title> </head> <body> <img src="folder/bike.jpg"> </body> </html>
Read more about image tag:
Different images formats supported by HTML (image tag) are as follows:
Graphic interface format (GIF)
Graphic Interface Format uses a compression technique that preserves all color information for the image. It uses a maximum of 256 colors. The GIF format is best for displaying images like logos, icons, and buttons. A GIF file with few numbers of colors has a smaller file size and allows greater compression. However, the use of the GIF format is limited because of the color depth limitation. It should not be used for photographs and complex graphics.
GIF images are in two different versions. These are GIF 87 and GIF 89a format. GIF 89a in newer and has the following features:
- Interlacing: interlacing is a capability that enables the browser to display the images as it loads. The image gradually gets clearer until it is loaded completely. Interlaced images are slightly larger in size than non-interlaced images.
- Transparency: GIF 89a format can be used to set a single color to be transparent.
- Animated GIFs: GIF 89a images can also be animated. Animated GIF images are actually a number of GIF images saved in a single file.
Joint Photographic Expert Group (JPG, JPEG)
Joint Photographic Expert Group is a good format for images. It can contain millions of colors. It does not provide the option of transparency or interlacing. It allows specifying the degree of compression to create a balance between image quality and file size. It uses a compression technique that discards some colors that may cause a loss of quality of the original image. The higher compression reduces the file size but provides lower image quality.
Limited Support or Non-supported image formats
The following image formats are supported by some computers but not all. These are not recommended to be included in HTML pages. These images can be converted to supported formats by using graphics editors such as Corel Photo-Paint or Adobe Photoshop.
- Portable Network Graphic (PNG)
- BMP (Bitmap picture)
- TIFF (Tagged Image File Format)
If you want to learn more about HTML or image tag then visit the official website: Visit
Visit the HTML tutorial list. And make strong your HTML concept. Click here. wuschools.com is always written about the HTML concept for the HTML lover. Ang writes about how HTML makes your life easy if you are a web site developer. We help you to continue your learning.