img html tag
If you want to insert images or graphics in your existing HTML web page. Then you can manually insert or embed images, graphics, pictures, etc. in HTML webpage using <img> tag. img tag is an automatic closing tag in HTML web page, it means you don’t need to manually close it after starting the image tag.
So, let’s understand the usage of <img> tag in HTML web page in a better way.
- HTML <img> Basic Syntax.
<img src=”URL” alt=”Description” width=”Width” height=”Height”>
<img> Tag Attributes.
src (source) Image source.
Image src is the manually added image source location to be inserted in the existing web page. Here this address can be an online URL or offline local ssd hard drive address of your computer.
- <img> Tag src Example.
<img src=”images/nature.jpg” alt=”A nature image”>
<img> Tag alt (alternative text) attributes.
Alternative text information about the image to be inserted in the existing web page is added or displayed to the Internet user. Sometimes if the added webpage image is removed. Then this alternative text displays information about the image to the Internet user.
- <img> Tag alt text Example.
<img src=”images/logo.jpg” alt=”Company logo”>
Image width and height.
The default height and width dimension height and width of the image in pixels is added to the image to be inserted or embedded in the existing HTML web page. The web developer can adjust the image height and width as per the requirement of the website or create a responsive web page using CSS.
- <img> Tag width and height Example.
<img src=”images/map.jpg” alt=”Country Map” width=”500″ height=”500″>
Image title.
Displays an additional tooltip information about the image inserted in the current web page. These image properties are displayed when the website user hovers the mouse over the image and this information is displayed as a tooltip.
- Image title Example.
<img src=”images/animal.jpg” alt=”A animal image” title=”group of animal image”>
Image loading attributes.
You can customize the properties of the image you insert or embed in the current HTML web page. The default image loads with automatic behaviour, you can set the image loading properties to lazy or automatic as per your requirement.
Image loading values.
- Automatic – In this attribute, the image loads automatically with default behaviour.
- Lazy – This property takes time to load images in an existing HTML page until the embedded image loads properly, thus improving the image web page loading time.
Image loading example.
<img src=”images/computer.jpg” alt=” desktop computer image” loading=”lazy”>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Image Tag Example</title>
<style>
.responsive-img {
max-width: 170%;
height: auto;
}
</style>
</head>
<body>
<h2>Let Try Multiple Image Tag Attributes</h2>
<img
src=”https://cdn.pixabay.com/photo/2022/10/11/12/38/dog-7514202_960_720.jpg”
alt=”Nice Black Dog Image”
width=”500″
height=”500″
title=”Black Dog Picture With Background”
loading=”lazy”
class=”responsive-img”
>
<h3>Nice Black Dog With Stunning Background</h3>
</body>
</html>
Use of <img> tag in HTML web page.
- Use descriptive alternative image text – Alt text is an important feature for user access to embedded images in HTML web page. Sometimes, when the image is not displayed in the web page, it displays alternative text information about the existing image to the web user.
- Optimize images in seo – It optimizes images in search engine optimization by speeding up the loading time of inserted or embedded web page images.
- Responsive web page images – Inserted or embedded HTML web page image sizes are made responsive and adjusted to different screen sizes.
Image responsive example.
css
.responsive-img {
max-width: 100%;
height: auto;
}
- HTML Image Formats – You can manually select bmp, jpeg, gif, png, and svg image formats from vector images when inserting or embedding multiple image formats into your existing web page.
