In the HTML a built-in way to include the image on a web page using the ‘<img>’ tag. The basic syntax using image tag:
<img src="image_path" alt="image_description">In the above ‘src’ attribute specifies the path to the image file, and the ‘alt’ attribute provides the alternative text of the image, which is used by screen readers for accessibility purpose.
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="A beautiful landscape">
In the above example we provide the absolute URL of the image in ‘src’ attribute.
When you have an image that has multiple regions you want to make interactive, you can divide it into clickable area with different URLs. To create an image map, you can use the ‘<map>’ and ‘<area>’ tags.
<img src="image.jpg" alt="A map with clickable regions" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Clickable region 1">
<area shape="circle" coords="150,150,50" href="page2.html" alt="Clickable region 2">
</map>
Here is an example of a clickable image map with two clickable area. The first area is a rectangle with coordinates (0,0) to (100,100), which is the linked to page1.html. The second area is a circle with center (150, 150) and radius 50, which is linked to page2.html.
A background-image property in CSS can also be used to set an image as the background of an HTML element in addition to the img tag.
<div style="background-image: url('image.jpg')">
<h1>Welcome to my website</h1>
<p>This is some text on the page.</p>
</div>In the above example, we have set the background image of a ‘<div>’ element to ‘image.jpg’. The text on the page will be displayed on top of the background image.
The ‘<picture>’ element is a newer HTML5 element that allows you to provide different versions of an image to different devices or screen sizes. This is useful for optimizing images for different devices, such as mobile phones, desktop, tablets or high-resolution displays.
<picture>
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="A small image">
</picture>This example demonstrates three versions of the same image using the '<picture>' element. The first image source is used for devices with a minimum width of 1200px, the second source element is used for devices with a minimum with of 768px, and final ‘<img>’ tag will be used as fallback for devices that do not support the ‘<picture>’ element or for media queries that do not match any of the source elements.
To float an image in HTML, you can use the CSS float property. This property allows you to specify whether an element should float to the left or right of its container.
<!DOCTYPE html>
<html>
<head>
<title>Image Floating Example</title>
<style>
.image-container {
width: 50%;
float: left;
margin-right: 20px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/300x200.png" alt="Placeholder Image">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac interdum nisi, eget venenatis arcu. Donec vestibulum quam augue, eget varius libero eleifend at. Integer sed mauris eget justo malesuada vestibulum in eu nulla. Morbi vehicula nisi a enim porttitor sollicitudin. Sed lobortis, dui eu euismod ultricies, ipsum magna lacinia velit, vel eleifend tellus nunc ac ipsum. Nulla id ante erat. Nunc euismod, arcu a laoreet venenatis, quam nulla tempor quam, vitae pulvinar magna lorem at ipsum.</p>
</body>
</html>In this example, we have a container with a class of ‘image-container’ that wraps around an ‘<img>’ tag. The container has a width of 50% and is floated to the left with a margin-right of 20px. This creates space between the image and the surrounding text. The ‘<img>’ tag has a width of 100% to ensure that it fills the container and a height of auto to maintain the aspect ratio.
You can adjust the CSS properties of the container and the image to achieve the desired effect. For example, you can float the container to the right instead of the left, or you can adjust the margin to change the spacing between the image and the text.
| Attribute | Description |
|---|---|
| ‘alt' | Specifies an alternative text for an image, to be displayed if the image cannot be loaded or read by a screen reader. |
| ‘src’ | Specifies the URL of the image file to be displayed. |
| ‘width’ | Specifies the width of the image. |
| ‘height’ | Specifies the height of the image in pixels. |
| ‘usemap’ | Specifies the name or URL of a client-side image map to be used with the image. |
| ‘ismap’ | Specifies that the image is part of a server-side image map. |
| ‘shape’ | Specifies the shape of a clickable area in an image map (e.g. ‘rect’ for rectangle, ‘circle’ for circle, ‘poly’ for polygon). |
| ‘coords’ | Specifies the coordinates of a clickable area in an image map, depending on the shape. |
| ‘href’ | Specifies the URL of the page or resource to be linked to by a clickable area in an image map. |
| ‘alt’ | Specifies alternative text for the ‘<picture>’ element, to be used if none of the source elements are supported or match the device. |
| ‘srcset’ | Specifies one or more image sources for the ‘<picture>’ element, with different resolutions or sizes. |
| ‘sizes’ | Specifies the sizes of the image sources, to help the browser determine which one to use based on the device's screen size. |
Note that the ‘usemap’ attribute is used with the ‘<img>’ tag, while the ‘shape’, ‘coords’ and ‘href’ attributes are used with the ‘<area>’ tag within a ‘<map>’ tag.
Comments
Oops!