<img> tag is used to put an image in an HTML document.
<img src="air_ballon.jpg" alt="Air Ballon">
In order to put a simple image on a webpage, we use the
<img> element is an empty element which means that it has no closing tag.
<img src="/images/car.jpg" alt="My Dream Car">
src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL.
If your image is called car.jpg, and it sat in the same directory as your HTML page, you could embed the image like so:
If the image was in an images subdirectory, you must then include the folder name in the
src attribute like this:
You could embed the image using its absolute URL, for example:
Image name is always case sensitive, therefore car.jpg and Car.jpg both are different.
Search engines also read image filenames and count them towards SEO.
Therefore, give your image a descriptive filename; car.jpg is better than img001.jpg
To learn more about file paths, visit: HTML File Path Chapter.
alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The easiest way to test your alt text is to purposely misspell your image name. If for example our image name was spelt carrrrrrr.jpg, the browser wouldn't display the image, and display the alt text instead:
<img src="carrrrr.jpg" alt="Car image">
You should always use
alt attribute with images.
<img src="parrot-icon.png" alt="Parrot Face" width="150" height="150">
However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs.
We have seen how to create hypertext link using
We just need to use an image inside
<a> element at the place of text as shown below:
<a href="https://parrot-tutorial.com/CSS3/" target="_blank">
A responsive images adjust itself to fit the size of the screen.
height:auto to make an image responsive, the image will be scale up and down according to screen size:
Use the CSS float property to let the image float to the right or to the left of a text.
The following example specifies that an image should float to the left side of its container:
The following example specifies that an image should float to the right side of its container:
The CSS background-image property sets one or more background images on an element.
To add a background image on a web page, specify the background-image property on the <body> element:
To add a background image on a paragraph, specify the background-image property on the <p> element:
You can learn more about background images in our CSS Background Chapter.
<map> tag defines an image-map. An image-map is an image with clickable areas.
The following example specifies an image-map with clickable areas:
<img usemap="#infographic" src="trinity.png">
<area shape="poly" coords="276,150,355,305,182,315,178,207" target="_blank" alt="HTML"
<area shape="poly" coords="85,151,5,305,180,318,177,205" target="_blank" alt="CSS"
HTML5 introduced the
<picture> element to add more flexibility when specifying image resources.
<source media="(min-width: 800px)" srcset="parrot-green.png">
<source media="(min-width: 500px)" srcset="parrot-icon.png">
<img src="lizard.png" alt="Green Lizard">
Always specify an
<img> element as the last child element of the
<picture> element. The
<img> element is used by browsers that do not support the
<picture> element, or if none of the
<source> tags matched.
|<img>||Specifies an image|
|<map>||Specifies an image-map|
|<area>||Specifies a clickable area inside an image-map|
|<picture>||Specifies a container for multiple image resources|