Codectionary / Developer documentation / HTML

<img>

The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.

Syntax

<img src="path/to/image.jpg" alt="description">

Examples

Basic Image

A simple image with source and alternative text for accessibility.

<img src="https://via.placeholder.com/400x300" alt="Placeholder image" style="max-width: 100%; height: auto;">

Responsive Image

Creating responsive images that scale properly on different screen sizes.

<img src="https://via.placeholder.com/800x600" 
     alt="Responsive landscape" 
     style="width: 100%; max-width: 600px; height: auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">

Image with Caption

Combining image with figure and figcaption elements for proper semantic markup.

<figure style="margin: 0; text-align: center;">
  <img src="https://via.placeholder.com/500x300" 
       alt="Sample image with caption" 
       style="width: 100%; max-width: 500px; border-radius: 8px;">
  <figcaption style="margin-top: 10px; color: #666; font-style: italic;">This is a descriptive caption for the image above</figcaption>
</figure>

Image Gallery

Creating a simple image gallery using multiple images with consistent styling.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
  <img src="https://via.placeholder.com/200" alt="Gallery image 1" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
  <img src="https://via.placeholder.com/200/FF6B6B" alt="Gallery image 2" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
  <img src="https://via.placeholder.com/200/4ECDC4" alt="Gallery image 3" style="width: 100%; border-radius: 8px; transition: transform 0.3s; cursor: pointer;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
</div>

Attributes

  • src (URL): Path to the image file (required)
  • alt (string): Alternative text description (required for accessibility)
  • width (number): Image width in pixels
  • height (number): Image height in pixels
  • loading (lazy | eager): Controls image loading behavior
  • srcset (string): Multiple image sources for responsive images

Best practices

  • Always include descriptive alt text that explains the image content and purpose
  • Use appropriate image formats: JPEG for photos, PNG for graphics with transparency, SVG for icons
  • Optimize images for web - compress large files without sacrificing quality
  • Set width and height to prevent layout shift during page load
  • Use lazy loading (loading="lazy") for images below the fold to improve performance
  • Consider using srcset for responsive images that adapt to different screen sizes

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.