Struct Img 

pub struct Img;

The <img> element - embeds an image into the document.

Purpose

The <img> element represents an image and its fallback text. It is used to embed graphics, photographs, illustrations, diagrams, and other visual content into web pages. Images are loaded asynchronously and become part of the document flow.

Content Categories

• Flow Content
• Phrasing Content
• Embedded Content
• Palpable Content
• If with usemap attribute: Interactive Content

Permitted Content Model

• None (void element)

Common Use Cases

• Displaying photographs and illustrations
• Showing logos and branding elements
• Embedding diagrams and infographics
• Creating image-based navigation elements
• Displaying user avatars and profile pictures

Key Attributes

• src: URL of the image (required)
• alt: Alternative text description (required for accessibility)
• width: Intrinsic width in pixels
• height: Intrinsic height in pixels
• loading: Lazy loading behavior (“lazy” or “eager”)
• decoding: Image decoding hint (“sync”, “async”, or “auto”)
• srcset: Responsive image sources for different resolutions
• sizes: Media conditions for responsive images
• crossorigin: CORS settings for image fetching
• usemap: Associates image with a <map> element
• ismap: Indicates server-side image map
• referrerpolicy: Referrer policy for image requests
• fetchpriority: Hint for relative fetch priority

Example

<!-- Basic image -->
<img src="/images/logo.png" alt="Company Logo" width="200" height="100">

<!-- Responsive image with srcset -->
<img src="/images/photo.jpg"
     srcset="/images/photo-320w.jpg 320w,
             /images/photo-640w.jpg 640w,
             /images/photo-1024w.jpg 1024w"
     sizes="(max-width: 320px) 280px,
            (max-width: 640px) 600px,
            1000px"
     alt="Scenic landscape photograph">

<!-- Lazy-loaded image -->
<img src="/images/hero.jpg" alt="Hero banner" loading="lazy">

<!-- Image with decorative purpose -->
<img src="/images/decorative-divider.png" alt="" role="presentation">

Accessibility

• Always provide meaningful alt text describing the image content
• Use empty alt="" for decorative images
• Ensure alt text is concise yet descriptive (typically under 150 characters)
• Don’t use phrases like “image of” or “picture of” in alt text
• For complex images (charts, diagrams), consider using <figure> with <figcaption>
• Ensure sufficient color contrast for images containing text
• Provide text alternatives for informational images

WHATWG Specification

• 4.8.3 The img element

Trait Implementations

impl HtmlElement for Img

const TAG: &'static str = "img"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = true

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Img> for Picture

impl EmbeddedContent for Img

impl FlowContent for Img

impl PalpableContent for Img

impl PhrasingContent for Img