Images

Difficulty: Beginner

Images are a fundamental part of the web experience. The <img> element is a void (self-closing) element used to embed images into an HTML document. Unlike most HTML elements, <img> does not have a closing tag. It requires at minimum the src attribute, which specifies the path to the image file, and should always include the alt attribute for accessibility.

The alt attribute provides alternative text that describes the image. This text is displayed when the image cannot be loaded, is read aloud by screen readers for visually impaired users, and is used by search engines to understand the image content. Writing good alt text is both an accessibility requirement and an SEO best practice. If an image is purely decorative and adds no informational value, use an empty alt attribute (alt="") to tell assistive technologies to skip it.

Specifying width and height attributes on images is important for performance. When the browser knows the dimensions before the image loads, it can reserve the correct amount of space in the layout, preventing Cumulative Layout Shift (CLS) -- a Core Web Vital metric. Without explicit dimensions, the page content jumps and reflows as images load, creating a poor user experience. You can set these attributes in HTML and still make images responsive with CSS by adding width: 100% and height: auto.

The srcset attribute enables responsive images by providing multiple image sources at different resolutions. The browser chooses the most appropriate image based on the device's screen size, pixel density, and network conditions. This is critical for performance: serving a 4000px-wide hero image to a mobile phone wastes bandwidth and slows page load. The srcset attribute works with the sizes attribute to give the browser enough information to make the optimal choice.

Modern image formats like WebP and AVIF offer significantly better compression than JPEG and PNG. You can use the <picture> element to serve modern formats with fallbacks for older browsers. The browser evaluates each <source> in order and uses the first format it supports, falling back to the <img> element if none of the sources are compatible.

Code examples

Basic Image with Alt Text

<!-- Basic image -->
<img src="/images/sunset.jpg" alt="Orange sunset over the Pacific Ocean">

<!-- Image with explicit dimensions -->
<img src="/images/profile.jpg" 
     alt="Jane Smith, Senior Developer" 
     width="200" 
     height="200">

<!-- Decorative image (skip for screen readers) -->
<img src="/images/divider.png" alt="" role="presentation">

<!-- Image with loading attribute -->
<img src="/images/hero.jpg" 
     alt="Mountain landscape" 
     width="1200" 
     height="600" 
     loading="lazy">

Always provide meaningful alt text that describes the image content and purpose. Use empty alt='' for purely decorative images. Include width and height to prevent layout shifts. The loading='lazy' attribute defers loading off-screen images until the user scrolls near them.

Responsive Images with srcset

<!-- srcset with width descriptors -->
<img src="/images/hero-800.jpg"
     srcset="/images/hero-400.jpg 400w,
            /images/hero-800.jpg 800w,
            /images/hero-1200.jpg 1200w,
            /images/hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="Mountain landscape hero image"
     width="1600" 
     height="900">

<!-- srcset with pixel density descriptors -->
<img src="/images/logo.png"
     srcset="/images/logo.png 1x,
            /images/logo@2x.png 2x,
            /images/logo@3x.png 3x"
     alt="Company Logo"
     width="150" 
     height="50">

Width descriptors (400w, 800w) tell the browser each image's actual width. The sizes attribute tells the browser how wide the image will be displayed at different viewport widths. The browser combines this information to pick the optimal image. Pixel density descriptors (1x, 2x, 3x) are simpler and used for fixed-size images like logos.

Picture Element for Format Fallbacks

<picture>
  <!-- Modern format: AVIF (best compression) -->
  <source srcset="/images/photo.avif" type="image/avif">
  
  <!-- Modern format: WebP (good compression) -->
  <source srcset="/images/photo.webp" type="image/webp">
  
  <!-- Fallback: JPEG (universal support) -->
  <img src="/images/photo.jpg" 
       alt="Team photo at the annual retreat"
       width="800" 
       height="600">
</picture>

The <picture> element lets you serve modern image formats with automatic fallbacks. Browsers evaluate sources top-to-bottom and use the first supported format. The <img> tag is required as the final fallback and is where you put the alt text and dimensions.

Art Direction with Picture

<!-- Different crops for different screen sizes -->
<picture>
  <!-- Mobile: vertical crop -->
  <source media="(max-width: 600px)" 
          srcset="/images/hero-mobile.jpg">
  
  <!-- Tablet: square crop -->
  <source media="(max-width: 1024px)" 
          srcset="/images/hero-tablet.jpg">
  
  <!-- Desktop: wide panoramic -->
  <img src="/images/hero-desktop.jpg" 
       alt="Panoramic city skyline at night"
       width="1600" 
       height="600">
</picture>

Art direction uses the <picture> element with media queries to serve completely different image crops for different screen sizes. This is different from srcset, which serves the same image at different resolutions. Art direction is for when you need a different composition or crop on mobile vs desktop.

Key points

Always include alt text on images. The only exception is purely decorative images, which should have alt='' (empty string, not omitted).
Always set width and height attributes on images to prevent Cumulative Layout Shift (CLS). You can still make them responsive with CSS.
Use loading='lazy' on images below the fold to improve initial page load performance. Do not use it on images visible in the initial viewport.

Concepts covered

img Element, src Attribute, alt Attribute, width and height, Responsive Images, srcset