HTML - Images

In HTML, we display images on a webpage using the <img> tag. Images enhance visual appeal, illustrate complex concepts, and significantly boost user engagement. However, modern web standards require developers to balance aesthetics with page load speed, accessibility, and search engine optimization (SEO).

Syntax and Basic Attributes

The <img> tag is an empty (void) element, meaning it does not have a closing tag and cannot contain child elements. At a minimum, every image requires the src and alt attributes.

<img src="path/to/image.jpg" alt="Descriptive text of the image" width="600" height="400">

Original Quick Example

<img src="image/zanzmer.jpg" alt="Veewom Scenic View" width="590" height="400">

---

Core Attributes of the <img> Tag

Attribute	Requirement	Purpose & Best Practice
src	Mandatory	Specifies the path (URL or local relative path) to the graphic file.
alt	Mandatory (WCAG/SEO)	Alternate text rendered if the image fails to load. Used by screen readers for visually impaired users and indexed by search engine crawlers.
width & height	Highly Recommended	Specifies the intrinsic dimensions in pixels (without 'px' unit in HTML5). Enables the browser to reserve space before image download, preventing Cumulative Layout Shift (CLS).
loading	Optional (HTML5)	Native lazy loading: set to loading="lazy" to defer offscreen images until scrolled near viewport, or loading="eager" for above-the-fold hero banners.
title	Optional	Displays a small tooltip when the mouse hovers over the image on desktop browsers.
decoding	Optional	Provides an image decoding hint to the browser: "async", "sync", or "auto".

---

Understanding Image File Paths (Absolute vs. Relative)

A frequent stumbling block for beginner BCA students is referencing files properly. Here is how paths work:

• Same Folder: <img src="photo.jpg" alt="..."> (The image resides in the exact same directory as the HTML document).
• Child Subfolder: <img src="images/vacation/beach.webp" alt="..."> (Moves down into the images subfolder).
• Parent Directory: <img src="../assets/logo.png" alt="..."> (Uses ../ to move up one folder level).
• Absolute Web URL: <img src="https://example.com/photos/profile.jpg" alt="..."> (Loads directly from an external server).

---

Modern Web Image Formats Comparison

Format	File Extension	Compression Type	Transparency / Animation	Ideal Real-World Use Case
JPEG / JPG	.jpg, .jpeg	Lossy	No / No	Complex photographs with subtle color gradients; legacy compatibility.
PNG	.png	Lossless	Yes (Alpha) / No	Logos, diagrams, screenshots, graphics requiring transparent backdrops.
WebP	.webp	Lossy & Lossless	Yes / Yes	Modern Standard: 25-35% smaller file sizes than JPEG/PNG with comparable visual quality.
SVG	.svg	Vector (XML)	Yes / Yes (CSS)	Icons, vector logos, UI symbols. Scales infinitely without pixelation or quality loss.
GIF	.gif	Lossless (256 colors)	Yes (Binary) / Yes	Short looping animations; largely superseded by WebM/MP4 video clips.

---

Responsive Images with <picture> and Modern Formats

In modern web development, serving heavy desktop images to mobile devices hurts PageSpeed and SEO. The HTML5 <picture> element allows art-direction and automatic format negotiation:

<picture>
  <!-- Serve next-gen WebP format if supported by client browser -->
  <source srcset="images/hero.webp" type="image/webp">
  <!-- Fallback to standard JPEG for older browsers -->
  <source srcset="images/hero.jpg" type="image/jpeg">
  <!-- Required img tag providing fallback and layout dimensions -->
  <img src="images/hero.jpg" alt="Modern Web Design Course Banner" width="800" height="450" loading="lazy">
</picture>

---

Semantic Images: The <figure> and <figcaption> Elements

To associate an image with an editorial caption semantically, use HTML5's <figure> container:

<figure>
  <img src="images/network-topology.png" alt="Star Network Topology Diagram" width="550" height="300">
  <figcaption>Figure 1.1: Star network architecture where all nodes connect to a central hub.</figcaption>
</figure>

---

Making Images Clickable (Image Hyperlinks)

To turn an image into a clickable link, wrap the <img> tag inside an anchor <a> tag:

<a href="https://veewom.com/courses" title="Explore Computer Science Courses">
  <img src="images/banner-cta.webp" alt="Explore Computer Science Courses at Veewom" width="400" height="150">
</a>

---

HTML Image Maps (<map> and <area>)

An image map contains clickable regions (hotspots) mapped across a single graphic using coordinates. This is a recurring topic in BCA lab syllabi:

<img src="computer-hardware.jpg" alt="Computer Peripherals" usemap="#hardwaremap" width="500" height="350">

<map name="hardwaremap">
  <!-- Rectangular hotspot for Monitor (x1, y1, x2, y2) -->
  <area shape="rect" coords="34,44,270,350" alt="Computer Monitor" href="monitor.htm">
  <!-- Circular hotspot for Mouse (center_x, center_y, radius) -->
  <area shape="circle" coords="337,300,44" alt="Mouse" href="mouse.htm">
  <!-- Polygonal hotspot for Keyboard (x1,y1, x2,y2, x3,y3...) -->
  <area shape="poly" coords="290,172,333,250,300,315,255,270" alt="Keyboard" href="keyboard.htm">
</map>

---

Hands-on Practice Session: Responsive Article Card with Optimized Media

Assignment Scenario: Build an accessible editorial card component featuring an optimized image with modern WebP format negotiation, native lazy loading, explicit aspect ratio dimensions, and an editorial caption.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible Image Card Practice</title>
  <style>
    .article-card {
      max-width: 480px;
      margin: 20px auto;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      font-family: Arial, sans-serif;
    }
    .article-card picture img {
      width: 100%;
      height: auto;
      display: block;
    }
    .article-card figcaption {
      padding: 12px 16px;
      font-size: 14px;
      color: #555;
      background-color: #fafafa;
      border-top: 1px solid #eee;
    }
    .article-body {
      padding: 16px;
    }
  </style>
</head>
<body>

  <div class="article-card">
    <figure style="margin: 0;">
      <picture>
        <source srcset="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&fm=webp" type="image/webp">
        <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600" 
             alt="Student writing code on laptop in modern library" 
             width="600" 
             height="400" 
             loading="lazy">
      </picture>
      <figcaption>Code optimization tips for modern web applications.</figcaption>
    </figure>
    <div class="article-body">
      <h3 style="margin-top: 0;">Mastering Responsive HTML Images</h3>
      <p>Serving optimized WebP images reduces cellular data consumption by over 30% while improving Google PageSpeed scores.</p>
    </div>
  </div>

</body>
</html>

---

BCA & University Exam Viva Questions

---

Frequently Asked Questions (FAQ)