HTML <img> Tag
HTML Tag Img examples are the topic of today’s post. With reasonable faith, it will satisfy the educational demands.
The HTML <img> tag is used to insert an image into a web page.
Can insert images in the following ways:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/79f12b03b5c281678959d0019cc90405.jpg" alt="boy enjoying with friends" width="400" height="450">
</body>
</html>
Image alignment using CSS:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:bottom">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:middle">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="vertical-align:top">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="float:right">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="cheers Together" width="58" height="58" style="float:left">
</body>
</html>
Using CSS, set a border to the image:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="border:4px solid blue">
</body>
</html>
To set the top-bottom margin to an image (via CSS), follow these steps:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle; margin:25px 0px">
</body>
</html>
Margin the top and bottom of the image (with CSS):
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/png-transparent-cheers-of-beer-draught-beer-keg-homebrewing-gesture-food-hand-beer-bottle.png" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle;margin:44px 0px">
</body>
</html>
You can insert images from a different folder or website by following these steps:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="Dancing Banana" width="300" height="140">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="Dancing Banana" width="350" height="230">
</body>
</html>
An image can be hyperlinked by following these steps:
Example:
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/dancing-banana.gif" alt="mrexamples.com" width="80" height="120">
</a>
</body>
</html>
Here’s how you can create a clickable area in an image map. There is a hyperlink for each region:
Example:
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/download.png" alt="Home" usemap="#homemap" width="350" height="310">
<map name="homemap">
<area shape="rect" coords="34,44,270,350" alt="Laptop" href="laptop.htm">
<area shape="rect" coords="290,172,333,250" alt="Tablet" href="tablet.htm">
<area shape="circle" coords="337,300,44" alt="Soda Can" href="soda.htm">
</map>
</body>
</html>
Here’s how you can use max-with with CSS to an <img> tag:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/Elon_Musk_Royal_Society_crop2.jpg" alt="Elon mUsk">
</body>
</html>
Table Of Content-
Tag Img Usage
The Tag Img <img> is utilized to insert an image into an HTML page.
Generally, images are not embedded in web pages; they are linked to them. The <img> tag provides storage space for the referenced image.
To utilize Img tag <img>, the following two attributes must be present:
- src – Points to the image’s source.
- alt – Provides an alternative text for an image if, for any reason, the image isn’t shown
IMPORTANT: Make sure you also indicate the width and height of your images. The page may flicker when an image has a width and height defined.
Advice: Linking an image to a different document is as easy as nesting the Tag Img <img> within an <a> tag.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| src | URL | Provides the image path |
| usemap | #mapname | Assigns an image to a client-side map. |
| width | pixels | Indicates the image’s width. |
| srcset | URL-list | Contains a list of images suitable for various scenarios. |
| ismap | ismap | Provides a server-side image map for an image. |
| loading | eager lazy | Indicates whether a browser should load an image right away or delay it until specific requirements are met. |
| longdesc | URL | Provides a URL to an image’s complete information. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Determine which referrer data should be used when retrieving an image. |
| alt | text | Indicates an alternate text for an image. |
| crossorigin | anonymous use-credentials | Make it possible for Canvas to use images from third-party websites that support cross-origin access. |
| height | pixels | Sets the image’s height. |
| sizes | sizes | Sets image sizes based on page layouts. |
Attributes
Global
Global Attributes can also be accepted in HTML with the <img> tag.
Event
Event Attributes can also be specified in HTML with the <img> tag.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <img> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
By default, many browsers will render the following image element values:
img {
display: inline-block;
}HTML <img> Tag Benefits
Some of the benefits of using this tag include:
- Images can make web pages more engaging and visually appealing, improving the overall user experience.
- Since images can be quite large, using the <img> tag with the appropriate attributes can help to reduce file size and optimize loading times, improving website performance.
- Including alternative text (alt attribute) with the <img> tag helps to make images accessible to users who rely on screen readers or have visual impairments.
- Adding descriptive alt text and using relevant filenames can help search engines better understand the content of your web page, potentially improving your search engine rankings.
- The <img> tag can be used to display a wide range of image formats, including JPEG, PNG, GIF, and SVG.
If you found this article knowledge worthy, then do leave your reaction below in order to appreciate our efforts or to provide us a feedback to make improvements on this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
My brother recommended I may like this web site.
He was entirely right. This submit actually made my day.
You can not imagine simply how so much time I had spent for
this info! Thanks!