You can insert any image in your web page by using <img> tag. The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
HTML Images Syntax
- In HTML, images are defined with the <img> tag.
- The <img> tag is empty, it contains attributes only, and does not have a closing tag.
- The src attribute specifies the URL (web address) of the image
- The src attribute tells the browser where to find the image you want to display.
- The URL of the image provided as the value of src attribute points to the location where the image is stored.
- In XHTML it closes itself ending with "/>"
- The alt attribute provides an alternate text for an image
Set Image Width/Height
Set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.
You can use the style attribute to specify the width and height of an image.
<img> Tag alt Property
Suppose due to some reason if image in not loading from server, it may possible for wrong path or some removed that image from location so on web page it will be difficult to know what about that image was. To protect such kind of inconvenience we use alt attribute, if image is not there then a text will appear at the place of image and it will tell, what about image was.
Syntax Example with alt
<!DOCTYPE html>
<html>
<body>
<img src="image_path" alt="alt taxt";/>
</body>
</html>
Result
Example with Attribute
<!DOCTYPE html>
<html>
<body>
<img src="HTML-image-link.jpg" width="500px" height="300px"/>
</body>
</html>
Result
External Image Path
Till now we have used image which is lies in our own server, but if we want to use image which is on another server, then also we can use that image without uploading in our server.
To use other server image just we have to pass full path of that image for example suppose in there is abc site, and there is img folder in that site and in img folder there is an image named xyz.png then the full path of that image will be https://www.abc.com/img/xyz.png, this path we can pass in src attribute of img tag.
External Path Example
<img src="http://www.gdatamart.com/html/img/html-image-exp.jpg"/>
Image in Background
Here we have understood to attach image in web-page. Here we are attaching image in fore-ground of HTML page, but if we want to attach image in background of any HTML Element or body then we can use style attribute, this is part of CSS Tutorial, Just follow the link given below to know how to implement image in background
Link : link of background page of css
Background Image Example
<divstyle="width:255px;height:188px;background:url('img/html-image-1.jpg')"> Hello, this is iamge in background </div>
Output
Hello, this is iamge in background
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img> usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> tags, that define the clickable areas in the image-map.
Image Maps Example
<img src="img/html-image-1.jpg" style="width:287px; height:225px" usemap="#myimgMap" />
<map name="myimgMap" >
<area shape="rect" coords="120,20,180,200" target="_blank" href="http://www.gdatamart.com" >
</map>
Hover your mouse on tree to see effect
Output
Explanation
In above example - shape, is used to define which kind of shape we are going to mark as map., coords- is used to define area co-ordinate in direction of left, top, right, bottom.
Note - within map tag we can take more tan one area tag, to make more area in image
The Picture Element
HTML5 introduced the <picture> element to add more flexibility when specifying image resources. The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device. Each <source> element have attributes describing when their image is the most suitable.
<!DOCTYPE html>
<html>
<picture>
<source media="(min-width: 600px)" srcset="HTML-image-link.jpg"/>
<source media="(min-width: 700px)" srcset="CSS-image-link.jpg"/>
<img src="jS-image-link.jpg" style="width:auto"/>
</picture>
</html>
HTML Image Tags
| Tag |
Description |
| <img> |
Defines a Image |
| <map> |
Defines an image-map |
| <area> |
Defines a clickable area inside an image-map |
| <picture> |
Container for multiple image resources |