What is an HTML Image? #

An HTML Image is shown on a web page using the tag. The image file is not stored inside the HTML; the browser loads it from a path or URL and displays it.

Basic Syntax of HTML Image #

The <img> element is empty (no closing tag). It needs attributes to work:

• src: where the image file is located
• alt: text that describes the image

Example:

<img src="images/cat.jpg" alt="Brown cat sitting on a chair">

Required Attributes: src and alt #

• src (source): Points to the image path or URL. Without it, the image can’t load.
• alt (alternative text): Describes the image for screen readers and shows when the image fails to load. Keep it clear and meaningful.

Good alt:

<img src="team.jpg" alt="Marketing team of six smiling in the office">

When to use empty alt:

For decorative images that add no meaning:

<img src="divider.png" alt="">

Absolute vs Relative Paths #

Absolute URL (full web address): #

• src=”https://widelamp.com/assets/logo.png“
• Use for images hosted on CDNs or other domains.

Relative path (within project): #

• src=”images/logo.png” (relative to current file)
• src=”/images/logo.png” (relative to site root)
  Tip: Prefer relative paths for your own assets to keep links stable during domain or environment changes.

Setting Image Size (width and height) #

Reserve space to avoid layout shift:

<img src="hero.jpg" alt="Mountain landscape" width="1200" height="600">

• Use actual pixel dimensions of the image when possible.
• Combine width/height attributes with CSS for responsive scaling.

Make Images Responsive #

Ensure images adjust to different screen sizes with simple CSS:

<style> .responsive-img { max-width: 100%; height: auto; display: block; } </style> <img class="responsive-img" src="banner.jpg" alt="Festival banner">

This lets the image shrink on small screens without stretching beyond its natural size.

Images as Links #

Wrap the image inside an anchor:

<a href="/about">
<img src="avatar.jpg" alt="Go to About Aisha Khan" width="120" height="120">
</a>

Tip: If the image is the only thing inside the link, make the alt describe the link’s purpose.

Figure and Figcaption (with captions) #

Use semantic markup to group images with captions:

<figure> <img src="bridge.jpg" alt="Golden suspension bridge at sunset" width="900" height="600"> <figcaption>Golden Gate Bridge during sunset</figcaption> </figure>

Lazy Loading for Performance #

Delay loading off-screen images:

<img src="gallery/photo-1.jpg" alt="Blue butterfly on leaf" loading="lazy">

This improves performance on pages with many images.

Responsive Images with srcset and picture #

Serve the right image for different devices and sizes.

Multiple resolutions with srcset: #

<img src="photos/dog-800.jpg" srcset="photos/dog-400.jpg 400w, photos/dog-800.jpg 800w, photos/dog-1200.jpg 1200w" sizes="(max-width: 600px) 90vw, 600px" alt="Golden retriever running on grass">

• srcset lists images with width descriptors (w).
• sizes tells the browser how wide the image will likely display.
• The browser chooses the best file for the device.

Art direction with picture: #

    <picture>

<source media="(max-width: 600px)" srcset="art/dish-portrait.jpg"> <source media="(min-width: 601px)" srcset="art/dish-landscape.jpg"> <img src="art/dish-landscape.jpg" alt="Gourmet pasta dish with basil and cherry tomatoes"> </picture>

Accessibility Best Practices #

• Always include meaningful alt text for informative images.
• Use alt=”” for decorative images.
• Avoid text in images; if text is necessary, include the same text in alt or nearby content.
• Ensure sufficient contrast if the image conveys important information.
• Keep captions close to the image using figure and figcaption.

Common Mistakes and Fixes #

• Missing alt: Add clear, concise alt text.
• Wrong path: Check folders and file extensions (case-sensitive on many servers).
• Large files: Compress and use modern formats (WebP/AVIF) where supported.
• Distorted images: Keep aspect ratio with height: auto and correct width/height.
• No width/height: Add attributes to reduce layout shift on load.
• Blocking scripts/extensions: If previews break, test in a clean browser session.

Problems & Solutions: #

Basic image #

<img src="images/html-image-basics.jpg" alt="HTML image basic example with cat photo" width="800" height="500">

Responsive image with CSS #

<style> .post-image { display:block; max-width:100%; height:auto; border-radius:8px; } </style> <img class="post-image" src="images/travel-lake.jpg" alt="Crystal clear lake surrounded by pine trees" width="1200" height="800">

Image as a link #

    <a href="/contact">

<img src="images/contact-card.png" alt="Contact us" width="400" height="240"> </a>

Lazy loading gallery #

<div class="gallery"> <img src="images/thumb-1.jpg" alt="Sunrise over beach" width="400" height="300" loading="lazy"> <img src="images/thumb-2.jpg" alt="City skyline at night" width="400" height="300" loading="lazy"> <img src="images/thumb-3.jpg" alt="Forest pathway with fog" width="400" height="300" loading="lazy"> </div>

Picture for art direction #

    <picture>

<source media="(max-width: 600px)" srcset="images/chef-portrait.jpg"> <source media="(min-width: 601px)" srcset="images/chef-wide.jpg"> <img src="images/chef-wide.jpg" alt="Chef plating pasta in a modern kitchen" width="1200" height="700"> </picture>