HTML
HTML Images
Images enhance the website’s visual appeal and user experience. HTML provides straightforward yet powerful methods for embedding and displaying images on a web page.
We use the <img> tag with src and alt attributes to insert the image in an HTML document. The src attribute defines the image’s location, and we can add alternative text with the help of the alt attribute for accessibility.
<img src="/wp-content/uploads/2024/04/HTML.webp" alt="Description">
In the above example, wp-content/uploads/2024/04/HTML.webp is the file path, and “Description” is the alternative text.
Image Dimensions
The width and height are the attributes we use to set the width and height of an image.
<img src="#" alt="Description" width="300" height="200">
Here, the image is resized to 300 pixels wide and 200 pixels high.
Responsive Images
To create responsive images that adjust to the size of the screen, we use CSS or the max-width property.
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="#" alt="Alternative text">
</body>
</html>
The above example shows the image scales according to the width of the containing element, maintaining its aspect ratio.
Image as a Link
Images can also function as hyperlinks. Wrap the <img> tag with an <a> tag.
<a href="https://learning-axis.com">
<img src="#" alt="Alt text">
</a>In the above code, clicking the image redirects the user to https://learning-axis.com.
Image Maps
Image maps allow you to define clickable areas within an image using the <map> and <area> tags.
<img src="#" alt="Alt text" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350"
href="https://learning-axis.com/html/" alt="page 1">
<area shape="circle" coords="477,300,44"
href="https://learning-axis.com/html/html-page/" alt="page 2">
</map>
In this example, specific regions of the image link to different URLs.
Image Formats
The most commonly used image formats on websites are JPEG, PNG, GIF, WebP, and SVG.
JPEG is ideal for photographs due to its compression capabilities, e.g., image.jpg.
PNG supports transparency and is used for graphics, e.g., image.png.
GIF is used for simple animations, e.g., image.gif.
WebP provides superior compression for both photos and graphics, e.g., image.webp.
SVG is used for scalable vector graphics, maintaining quality at any size, e.g., image.svg.
The Picture Element
The <picture> element allows to define multiple sources for an image, enabling the browser to select the most appropriate one based on criteria such as screen size or resolution. We can use it for implementing responsive images.
<picture>
<source srcset="/wp-content/uploads/2024/04/HTML.webp"
media="(min-width: 800px)">
<source srcset="/wp-content/uploads/2024/04/CSS.webp"
media="(min-width: 400px)">
<img src="/wp-content/uploads/2024/04/Php.webp"
alt="Description of the image">
</picture>In the above example, the browser will display HTML.webp if the viewport is at least 800 pixels wide, CSS.webp if the viewport is at least 400 pixels wide, and Php.webp otherwise.
Using images in HTML documents enhances both aesthetics and functionality. Anyone can create visually engaging and user-friendly web pages by mastering basic and advanced features of HTML images, including the <picture> element.