HTML

HTML

πŸ“Œ HTML Images

1. What Is an Image in HTML ?

Images are an essential part of web pages and are added using the <img> tag.This tag is self-closing, meaning it does not wrap any content and works only with attributes.

Basic Syntax

HTML
<img src="image.jpg" alt="Description">

Explanation :

  • src β†’ Defines the path to the image file
  • alt β†’ Provides alternative text if the image cannot be displayed and improves accessibility

2. Image Path (src)

Images can be loaded from different locations depending on your project structure :

a) Same folder :

HTML
<img src="dog.jpg" alt="Dog image">

b) Subfolder :

HTML
<img src="images/dog.jpg" alt="Dog image">

c) External source :

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

3. Image Size (width & height)

You can control the size of images directly using HTML attributes :

HTML
<img src="dog.jpg" alt="Dog" width="300" height="200">

Or use CSS for better flexibility :

HTML
<img src="dog.jpg" alt="Dog" style="width:300px; height:200px;">

4. Responsive Images

To ensure images adapt to different screen sizes :

HTML
<img src="dog.jpg" alt="Dog" style="max-width:100%; height:auto;">

This keeps the image proportional while preventing it from overflowing its container.

5. Making an Image Clickable

Images can be used as links by wrapping them inside an anchor tag :

Example :

HTML
<a href="https://example.com">
    <img src="logo.png" alt="Logo" width="100">
</a>

6. Placing Text Next to an Image

You can align images and text using CSS :

HTML
<img  src="dog.jpg" alt="Dog" style="float:right; width:200px;">
<p>This text appears beside the image.</p>

7. Background Images (CSS)

Background images are applied using CSS, not HTML :

HTML
<div  style="background-image:url('nature.jpg'); height:200px;">
    <h2>Background Example</h2>
</div>

8. The <picture> Element (Advanced)

The <picture> element allows you to display different images based on screen size or conditions :

HTML
<picture>
    <source media="(min-width:800px)" srcset="large.jpg">
    <media="(min-width:500px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>
  • Large screens β†’ large image
  • Medium screens β†’ medium image
  • Small screens β†’ fallback image

9. Why the alt Attribute Matters

If an image fails to load, the text inside alt is displayed :

HTML
<img src="missing.jpg" alt="Image not available">

It is also used by screen readers, making your website more accessible.

HTML Image Maps

Image maps allow different parts of a single image to act as separate clickable areas.

Key Elements

<map>

Defines the clickable regions.

HTML
<map name="workmap">
    <!-- areas defined here -->
</map>

<area>

Specifies each clickable section.

Attributes :

  • shape β†’ Defines shape (rect, circle, poly)
  • coords β†’ Coordinates of the clickable area
  • href β†’ Link destination
  • alt β†’ Description

Connecting Image with Map

HTML
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Example :

HTML

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
    <shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Shapes and Coordinates

  • Rectangle β†’ coords="x1,y1,x2,y2"
  • Circle β†’ coords="x,y,radius"
  • Polygon β†’ multiple coordinate points
  • Default β†’ entire image

JavaScript Interaction

You can add interactivity :

HTML

<area shape="circle" coords="337,300,44" onclick="myFunction()">
<script>
    function myFunction() {
        alert("You clicked the image!");
    }
</script>

HTML Background Images (CSS)

Background images are handled through CSS :

HTML

body {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

The <picture> Element (Advanced Usage)

HTML

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="fallback.png" alt="Example">
</picture>

This ensures the browser selects the best supported format.

  • Quick Summary

  • <img> is used to display images
  • <src> defines the path, <alt> improves accessibility
  • CSS is used for styling and backgrounds
  • <map> and <area> create interactive image regions
  • <picture> enables responsive and adaptive images

Html Links
Html Favicon