Images improve the visual appeal of websites by adding interest and color.
The <img> element is utilized for embedding images in HTML files. This element is void and solely consists of attributes. The format of the <img> element can be illustrated as:
The following example inserts three images on web page:
<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">Every image should contain a minimum of two attributes: the src attribute and an alt attribute.
The src attribute specifies the location of the image file for the browser to retrieve. Meanwhile, the alt attribute offers a descriptive text alternative for the image in case it is not accessible or cannot be shown. It is important to provide a meaningful substitute for the image in the alt attribute.
Note: Similar to the <br> tag, the <img> element is also considered an empty element and does not require a closing tag. However, in XHTML, it closes itself by ending with "/>".
Tip: The alt attribute is essential as it offers an alternative text description for an image in case the user is unable to view it due to various reasons such as a slow internet connection, unavailability of the image at the given URL, or if the user relies on a screen reader or non-graphical browser.
The attributes width and height are utilized to indicate the dimensions of an image.
The default interpretation of these attributes' values is in pixels.
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">The style attribute can be utilized to define the width and height of images. This helps in avoiding unintentional changes in image size by style sheets, as inline style takes precedence.
<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">Note: It is advisable to provide the width and height attributes for an image to ensure that the browser reserves the appropriate space for the image before it is downloaded. Failure to do so may result in image loading issues, such as distortion or flickering, within your website layout.
Occasionally, the process of resizing an image to accommodate various devices or screen sizes may not yield the desired outcome. Similarly, altering the image dimensions using the width and height attribute or property does not diminish the original file size. In order to tackle these issues, HTML5 has introduced the <picture> tag, which enables the definition of multiple image versions to cater to different device types.
The <picture> element consists of multiple <source> elements, each pointing to a different image source, and one <img> element at the end. Additionally, each <source> element includes the media attribute, which defines a media condition (similar to a media query) that the browser utilizes to decide when to use a specific source. Let's explore an example:
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="My logo">
</picture>Note: The <source> elements within the browser will be assessed individually, and the most suitable match will be selected. In the event that no matches are found, the URL specified in the src attribute of the <img> element will be utilized. Additionally, it is necessary for the <img> tag to be positioned as the final child element within the <picture> element.
An image map enables the definition of hotspots on an image that functions similarly to an HTML hyperlink.
The primary concept behind the creation of an image map is to offer a convenient method of linking different sections of an image without the need to separate them into distinct image files. For instance, a world map could have each country linked to additional details about that specific country.
Let's try out a simple example to understand how it actually works:
<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
<area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
<area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
<area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>The name attribute within the <map> tag is utilized to link the map to the <img> tag through its usemap attribute. The <area> tag is placed within the <map> element to specify the clickable regions on an image. It is possible to define multiple clickable areas within an image.
Note: Using an image map for website navigation is not recommended as it is not search engine friendly. However, it can be effectively used for displaying geographical maps.
Tip: There are numerous online tools that you can use to create image maps. Additionally, advanced editors such as Adobe Dreamweaver offer a range of tools that make it easy to create image maps.