HTML Image Tag

Introduction to the Image Tag

The HTML <img> tag is used to embed images in web pages. It is an empty element (does not have a closing tag) that requires at least two attributes: src to specify the image source and alt to provide alternative text for accessibility.

Basic Syntax and Attributes

The image tag has several important attributes that control how images are displayed and accessed.

html
1<!-- Basic image syntax -->
2<img src="images/photo.jpg" alt="A description of the image">
3
4<!-- Image with additional attributes -->
5<img src="images/logo.png" alt="Company Logo" width="200" height="100" loading="lazy" class="logo-image" id="main-logo">
6
7<!-- Image with srcset for responsive images -->
8<img src="images/hero-small.jpg" 
9     srcset="images/hero-small.jpg 400w, images/hero-medium.jpg 800w, images/hero-large.jpg 1200w"
10     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
11     alt="Responsive hero image">

Key Image Attributes

  • src - Specifies the path to the image file (required)
  • alt - Provides alternative text for screen readers and when images can't load (required for accessibility)
  • width - Sets the width of the image in pixels
  • height - Sets the height of the image in pixels
  • loading - Controls lazy loading behavior (eager/lazy)
  • srcset - Specifies multiple image resources for different screen sizes

Image Paths: Absolute vs Relative

Understanding how to correctly reference image files is crucial for proper display on your website.

html
1<!-- Absolute URL (external image) -->
2<img src="https://example.com/images/picture.jpg" alt="External image">
3
4<!-- Root-relative path (from site root) -->
5<img src="/images/logo.png" alt="Site logo">
6
7<!-- Document-relative path (same folder) -->
8<img src="photo.jpg" alt="Local photo">
9
10<!-- Document-relative path (subfolder) -->
11<img src="assets/images/background.jpg" alt="Background image">
12
13<!-- Parent directory path -->
14<img src="../images/icon.png" alt="Icon from parent folder">

Path Types Explained

  • Absolute URLs - Complete web address including protocol and domain. Use for external images.
  • Root-relative Paths - Start with a slash (/). Path is relative to the site's root directory.
  • Document-relative Paths - Relative to the current HTML document. Use ./ for current directory or ../ to go up one level.

Responsive Images

Modern websites need to serve appropriately sized images based on the user's device and screen size.

html
1<!-- Responsive images with srcset and sizes -->
2<img src="images/fallback.jpg"
3     srcset="images/small.jpg 400w,
4             images/medium.jpg 800w,
5             images/large.jpg 1200w,
6             images/xlarge.jpg 2000w"
7     sizes="(max-width: 600px) 400px,
8            (max-width: 1000px) 800px,
9            (max-width: 1400px) 1200px,
10            2000px"
11     alt="Responsive image example"
12     class="responsive-image">
13
14<!-- Using picture element for art direction -->
15<picture>
16  <source media="(min-width: 1000px)" srcset="images/wide.jpg">
17  <source media="(min-width: 600px)" srcset="images/medium.jpg">
18  <img src="images/narrow.jpg" alt="Art directed image">
19</picture>

Best Practices for Using Images

Follow these guidelines to ensure your images are optimized, accessible, and perform well.

  • Always include descriptive alt text for accessibility and SEO
  • Optimize images for web (appropriate format, compression, dimensions)
  • Specify width and height attributes to prevent layout shifts
  • Use modern formats like WebP when possible for better compression
  • Implement lazy loading for images below the fold
  • Provide multiple sizes for responsive images
  • Use appropriate image formats (JPEG for photos, PNG for graphics, SVG for logos/icons)

Accessibility Considerations

Making images accessible is crucial for users with visual impairments and for overall website usability.

html
1<!-- Good alt text examples -->
2<img src="chart.jpg" alt="Bar chart showing sales growth from 2018 to 2023">
3
4<img src="profile.jpg" alt="Portrait of Maria Rodriguez, senior developer">
5
6<!-- Decorative image (empty alt) -->
7<img src="divider.png" alt="" role="presentation">
8
9<!-- Complex image with longer description -->
10<img src="infographic.jpg" alt="Climate change infographic" longdesc="#climate-desc">
11<div id="climate-desc" class="visually-hidden">
12  Detailed description of climate change infographic with data points...
13</div>

Accessibility Guidelines

  • Alt Text - Should be concise but descriptive. Convey the purpose and content of the image.
  • Decorative Images - Use empty alt attribute (alt="") and role="presentation" for purely decorative images.
  • Complex Images - For charts, graphs, or infographics, provide a longer description elsewhere and link with longdesc.
  • Functional Images - If image serves as a link or button, alt text should describe the function, not the image.

Frequently Asked Questions

What happens if I don't include an alt attribute?

Without alt text, screen readers will often read the image filename instead, which provides a poor user experience. It also hurts accessibility and SEO. While not technically invalid HTML, omitting alt attributes is considered bad practice.

Should I use width and height attributes or CSS for image sizing?

Use both. The width and height attributes should reflect the intrinsic size of the image to prevent layout shifts during loading. Use CSS for responsive sizing and styling. Modern browsers use the aspect ratio from these attributes to reserve space even before the image loads.

What's the difference between JPEG, PNG, and WebP formats?

JPEG is best for photographs with many colors. PNG supports transparency and is better for graphics with text or sharp edges. WebP is a modern format that offers superior compression and quality but isn't supported in all browsers. Consider using the picture element to provide fallbacks for WebP.

When should I use the picture element instead of img with srcset?

Use the picture element when you need art direction (different crops or compositions at different breakpoints) or when you want to serve different image formats based on browser support. Use img with srcset for resolution switching (same image at different resolutions).

How does the loading="lazy" attribute work?

Lazy loading defers loading of images until they are about to enter the viewport. This can significantly improve page load performance, especially for pages with many images. Native lazy loading is supported in most modern browsers.