Introduction to HTML Images

The HTML <img> tag is used to embed images in web pages. Images enhance visual appeal, provide information, and improve user engagement when used properly.

Basic Image Syntax

Required Attributes

Code Example:

<!-- Basic image with required attributes -->
<img src="image.jpg" alt="Description of the image">

<!-- Image with full path -->
<img src="https://example.com/images/photo.jpg" alt="Beautiful landscape">

<!-- Image in directory -->
<img src="assets/images/logo.png" alt="Company logo">

Output:

Sample image with alt text

Essential Attributes

src="image.jpg"

alt="Description"

width="300" height="200"

title="Image title"

Responsive Images

1. srcset Attribute

Provides multiple image sources for different screen sizes.

<!-- Basic srcset -->
<img src="image-small.jpg" 
     srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w"
     alt="Responsive image example"
     sizes="(max-width: 600px) 400px, 800px">

<!-- With density descriptors -->
<img src="image@1x.jpg" 
     srcset="image@1x.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x"
     alt="High DPI image">

2. Picture Element

Art direction for different display scenarios.

<!-- Art direction for different screens -->
<picture>
  <!-- WebP format for supported browsers -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- Different sizes for different screen widths -->
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  
  <!-- Fallback for older browsers -->
  <img src="small.jpg" alt="Art directed image">
</picture>

<!-- Format switching -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Modern image formats">
</picture>

Image Formats

Common Web Image Formats

Advanced Image Features

1. Lazy Loading

<!-- Native lazy loading -->
<img src="image.jpg" alt="Lazy loaded image" loading="lazy">

<!-- Above the fold images (eager load) -->
<img src="hero.jpg" alt="Hero image" loading="eager">

<!-- Lazy loading with fallback -->
<img src="image.jpg" alt="Image" loading="lazy" 
     onerror="this.style.display='none'">

2. Performance Optimization

<!-- Async decoding for off-thread processing -->
<img src="image.jpg" alt="Async decoded" decoding="async">

<!-- Sync decoding for critical images -->
<img src="hero.jpg" alt="Sync decoded" decoding="sync">

<!-- Fetch priority for important images -->
<img src="hero.jpg" alt="High priority" fetchpriority="high">

<!-- Low priority for non-critical images -->
<img src="background.jpg" alt="Low priority" fetchpriority="low">

3. Image Maps

<!-- Client-side image map -->
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="100,50,200,150" href="europe.html" alt="Europe">
  <area shape="circle" coords="300,100,50" href="asia.html" alt="Asia">
  <area shape="poly" coords="400,50,450,100,400,150" href="america.html" alt="America">
</map>

Best Practices

• Always include meaningful alt text for accessibility
• Specify width and height to prevent layout shifts
• Use responsive images with srcset and sizes
• Optimize images for web (compress without losing quality)
• Use modern formats like WebP and AVIF when possible
• Implement lazy loading for below-the-fold images
• Provide appropriate image dimensions for different breakpoints
• Use CDN for faster image delivery