HTML Images

Images are an essential part of web pages. HTML images are defined with the <img> tag, which is an empty element (doesn't have a closing tag).

Basic Image Syntax

The <img> tag has two required attributes: src (source) and alt (alternative text).

<img src="image.jpg" alt="Description of the image">

Image Attributes

src Attribute

The src attribute specifies the path to the image:

<!-- Local image -->
<img src="logo.png" alt="Company Logo">

<!-- Image in subfolder -->
<img src="images/banner.jpg" alt="Website Banner">

<!-- External image -->
<img src="https://example.com/image.jpg" alt="External Image">

alt Attribute

The alt attribute provides alternative text for screen readers and displays if the image fails to load:

<img src="photo.jpg" alt="A beautiful sunset over the mountains">

width and height Attributes

The width and height attributes specify the image dimensions:

<img src="photo.jpg" alt="Photo" width="300px" height="200px">

Image Formats

The most common image formats used on the web:

Responsive Images

Using srcset Attribute

Provide different image sizes for different screen sizes:

<img src="photo-medium.jpg" 
     srcset="photo-small.jpg 480w,
             photo-medium.jpg 800w,
             photo-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
     alt="Responsive Photo">

Image as Link

You can make an image clickable by wrapping it in an anchor tag:

<a href="https://www.example.com">
  <img src="logo.png" alt="Company Logo" width="200">
</a>

Image Maps

Create clickable areas on an image using image maps:

<img src="planets.gif" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercury.html" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>

Figure and Figcaption

Use semantic HTML5 elements for images with captions:

<figure>
  <img src="sunset.jpg" alt="Beautiful sunset" width="400">
  <figcaption>A beautiful sunset over the ocean</figcaption>
</figure>

Loading Attribute

Control how images load with the loading attribute:

<!-- Lazy loading (default for modern browsers) -->
<img src="photo.jpg" alt="Photo" loading="lazy">

<!-- Eager loading -->
<img src="hero.jpg" alt="Hero Image" loading="eager">

Best Practices