Adding images with img
Image tag in HTML5 web page is used to insert or embed the desired image, graphic, picture in the web page website. Image in a web page is a graphical background or image object, which indicates the related web page object, generally, image tag in HTML5 is used as an inline tag. Which provides HTML5 developer direct embed and insertion features of image, graphics and any other type of graphical image object in the existing web page.
So, let’s know the process of inserting image in HTML5 web page.
Image insert basic syntax in HTML5.
<img src=”URL” alt=”image text description”>
HTML5 Image Tag Attributes.
- Image src attribute – The URL address of the inserted image in the HTML5 web page is indicated, in the image src attributes you add the website image URL location from where the image will be displayed in the web page.
- Image alt attribute – Image alt attributes allow web developers to display alt text information in the bar of the image in the current web page. It works when the image is not displayed in the web page for some reason. Image alt text is a best practice for SEO. It ranks the web page in search engines according to the image alt.
Attributes for HTML5 <img> tag.
Image src (source).
As mentioned earlier, image src source is the online or offline web page address location where the detailed location or path of the image to be inserted in the web page is indicated. Here image source location can be in absolute or relative order.
Image src attributes example.
<img src=”graphics/logo.jpg” alt=”Company Logo”>
Image alt (alternative text) description.
Displays the alt description information of the image used in the current web page. Image alt description is usually read by screen reader software in the web page. Apart from this, images help in search engine ranking in online SEO.
Image alt description example.
<img src=”map.jpg” alt=”Contact Map”>
Image width and height.
The image inserted in the current web page is embedded in the web page by adjusting the image according to the custom height and width in the default pixel size. Image height and width attributes help the web developer to preview the image in particular desired size from large to small size.
Image height and width attributes example.
<img src=”india.jpg” alt=”india map” width=”400″ height=”270″>
Image title.
Displays image title information about the image to be inserted in the current HTML5 web page, where the image title is displayed as a tooltip in the web page, and it works when the Internet user hovers over the image on the web page with the mouse pointer.
Image title attributes Example.
<img src=”logo.jpg” alt=”Vcanhelpsu logo” title=”Company Logo Image”>
Image loading attributes.
You can control the timing of when and how the embedded image should be loaded when the image is inserted in the current HTML5 web page.
Image loading attributes.
- Image eager (default) attributes – This attribute will load the image immediately in the web page.
- Image lazy attributes – This attribute will load the image immediately in the current web page when the image is in viewport mode.
Image loading tag example.
<img src=”logo.jpg” alt=”Logo Image” loading=”lazy”>
Image srcset and size attributes.
Use to embed responsive images in an existing HTML5 web page. Image srcset attributes provide web developers responsive insert features for different image display conditions like screen sizes laptop, desktop, tablet, mobile.
Image srcset attributes example.
<img src=”small.jpg”
srcset=”large.jpg 980w, medium.jpg 700w, small.jpg 240w”
sizes=”(max-width: 1000px) 120vw, 70vw”
alt=”Responsive Image”>
Know all the above image attributes or properties.
Basic Image Embed Example.
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
Image height and width properties.
<img src=”graphics/city.jpg” alt=”A City Image” width=”800″ height=”700″>
Image tooltip properties.
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
Responsive Image Properties.
<img src=”graphics/html.jpg”
srcset=”graphics/html-large.jpg 1400w, graphics/html-medium.jpg 900w, graphics/html-small.jpg 400w”
sizes=”(max-width: 800px) 200vw, 100vw”
alt=”full responsive image”>
Image lazy-loading properties.
<img src=”graphics/image.jpg” alt=”nice image” loading=”lazy”>
Html5 image attributes example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Image Tag</title>
</head>
<body>
<h1>Let Tray Some Image Attributes</h1>
<img
src=”https://cdn.pixabay.com/photo/2022/10/23/13/43/canoe-7541311_1280.jpg”
alt=”Nice Boat Image”
width=”700″
height=”500″
loading=”lazy”>
<p>Basic Image Embed Example. </p>
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
<p>Image height and width properties. </p>
<img src=”graphics/city.jpg” alt=”A City Image” width=”800″ height=”700″>
<p>Image tooltip properties. </p>
<img src=”graphics/computer.jpg” alt=”desktop image” title=”nice desktop image”>
</body>
</html>
