It is an essential task to make the HTML document attractive and engaging to the users. This cannot be achieved solely with text; thus, HTML comes with the feature of inserting images onto the HTML document. The image can be styled and manipulated using CSS properties, as per the developer’s necessity.
HTML Images
As discussed before, the image is inserted using the <img> element.
Syntax: <img src=”url” alt=”Alternate name to be displayed”>
For example,
HTML Image Maps
Image maps are used to create clickable regions within an image. The <map> element is used to define an image-map. Basically, for an image-map, the requirements are an image and a map that contains the information or rules related to the image’s clickable regions. The image is inserted using the HTML <img> tag, in addition to this, an attribute ‘usemap’ is specified, which acts as the link between the image and the map. The value of usemap begins with a hash ‘#’ followed by the name of the image map.
For example,
<img src=”landscape.jpg” alt=”Landscape” usemap=”#landscape”>
After this, a <map> element is defined which is used to create an image map. This image map is linked to the image using the name attribute.
<map name=”landscape”>
After this, clickable areas are created using the <area> element.The shape of the area can be rect(rectangle),circle,poly,default(defines the entire region).
After the specification of the area, the coordinates of the clickable region are defined. These coordinates are specified as x and y coordinates.
For example, 34,44 will be the region 34 pixels from the left-margin and 44 pixels from the top. Consecutively, 270,350 will be the region 270 pixels from the left margin and 350 pixels from the top. Hence, 34,44,270,350, will be the entire region spanned between these coordinates.
<area shape=”rect” coords=”34,44,270,350″ alt=”river” href=”river.html”>
For a circular region, first the origin of the circle is specified,followed by its radius.
<area shape=”circle” coords=”337,300,44″ alt=”tree” href=”tree.html”>
Here, the circle’s center is 337,300(x,y) and radius is 44. The href attribute specifies the destination once the region is clicked. It is also possible to perform some function once the area is clicked, using JavaScript.
For example,
<area shape=”circle” coords=”337,300,44″ alt=”tree” onclick=”myFunction()”>
HTML Picture Element
The picture element is used for displaying different images for different devices(of different sizes).The picture element contains <source> elements that have the attributes related to the most suitable image. The <source> element contains different sources of images, each for a particular fit of the current device. For example,
Code:
The <img> element is the last child of the <picture> element. This is used for the browsers that do not support the <picture> element or if the <source> element’s definition does not meet any of the device’s specifications (serves as default).
Uses of <picture> element in HTML
1. It is not necessary for small-screen devices to load large images. For this, the <picture> element can be used, and the first <source> element matching the device’s specification is rendered, rest ignored. This saves the bandwidth.
2. Some browsers do not support all the image formats. For this, multiple sources can be defined within the <picture> tag, and the first format that matches the browser’s compatibility is rendered.
In this article, we will know the HTML Image, how to add the image in HTML, along with knowing its implementation & usage through the examples. In earlier times, the web pages only contains textual contents, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. In this article, we will know how to add images to the web page that will make the website attractive & various methods to insert the images.
There are 2 ways to insert the images into a webpage:
- By providing a full path or address (URL) to access an internet file.
- By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image to the webpage & simultaneously, we will understand both the above approaches.
Adding images on a webpage: The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag. The addition of the images improves the quality along with enhancing the design structure, appearance of the webpage. Nowadays, a website does not directly add images to a web page, as the images are linked to web pages by using the <img> tag which holds space for the image.
HTML Screen Reader
Screen reader is a software that reads the HTML content, converts it, and allows the visually impaired to listen to it.
Summary
In this article, we’ve looked at HTML images. We’ve discussed inserting images in an HTML document along with its styling. Images can also be used as a background to provide an aesthetic look to the web-page, properties of background-images have been thoroughly discussed along with the rendering of animated images in an HTML document. We’ve also looked at the creation of an image-map for clickable regions within an image and the <picture> element.