Images

Image Tag

The <img> tag is used to display images on a webpage. It is an empty tag, meaning it does not have a closing tag.

Attributes

• src: Specifies the path to the image file
• alt: Provides alternative text for the image if it cannot be displayed
• width: Specifies the width of the image
• height: Specifies the height of the image

NOTE: If we use the width and height HTML attributes, we omit the 'px' unit. However, in CSS, you must include the 'px' unit.

Image Maps

Image maps allow you to define clickable areas within an image. You can use the <map> and <area> tags to create image maps.

Example

<img src="example.jpg" usemap="#example-map" alt="Example Image" />

<map name="example-map">
  <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Link" />
  <area shape="circle" coords="337,300,44" href="https://another-example.com" alt="Another Example Link" />
</map>

Picture Element

The <picture> element allows you to define multiple sources for an image, enabling responsive images based on different screen sizes or resolutions.

Example

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg" />
  <source media="(min-width: 465px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Example Image" />
</picture>

NOTE: Always specify the img element as the last child element of the picture element.