Images, Media, and Embedded Content

1. Image Elements and Responsive Images

Attribute Purpose Values/Syntax Required
src Image source URL URL or path to image file Yes
alt Alternative text for accessibility Descriptive text (empty for decorative) Yes
width Image width in pixels Number (without unit) Recommended
height Image height in pixels Number (without unit) Recommended
srcset Responsive image sources url 1x, url 2x or url 400w Optional
sizes Image display sizes (with srcset) Media conditions + size With srcset (w)
loading Lazy loading behavior lazy, eager Optional
decoding Image decode timing async, sync, auto Optional
crossorigin CORS settings anonymous, use-credentials For cross-origin images
ismap Server-side image map Boolean Rare use
usemap Client-side image map #mapname With <map>

Srcset Syntax

Type Syntax Use Case
Pixel Density image-2x.jpg 2x Retina displays
Width Descriptor image-800.jpg 800w Responsive layouts

Image Formats

Format Use Case
WebP Modern, best compression
AVIF Next-gen, even better
JPEG Photos, universal support
PNG Transparency, logos
SVG Scalable graphics, icons

Example: Responsive images with srcset and sizes

<!-- Basic image with alt text -->
<img src="photo.jpg" alt="Description of photo" width="800" height="600">

<!-- Responsive with pixel density (Retina) -->
<img src="image.jpg" 
     srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
     alt="Responsive image">

<!-- Responsive with width descriptors -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w,
             photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            800px"
     alt="Adaptive image">

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

<!-- Async decoding for performance -->
<img src="large.jpg" alt="Large image" decoding="async">

<!-- Decorative image (empty alt) -->
<img src="decoration.png" alt="" role="presentation">

<!-- Image map -->
<img src="map.jpg" alt="Interactive map" usemap="#regions">
<map name="regions">
  <area shape="rect" coords="0,0,100,100" href="region1.html" alt="Region 1">
  <area shape="circle" coords="200,200,50" href="region2.html" alt="Region 2">
</map>
Note: Always specify width and height to prevent layout shifts (CLS). Use loading="lazy" for below-fold images. Alt text is required for accessibility.

2. Picture Element and Source Sets

Element Purpose Attributes Use Case
<picture> Container for multiple sources None Art direction, format selection
<source> Define image source options srcset, media, type, sizes Conditional image loading
<img> Fallback image (required) src, alt Default/fallback display

Source Attributes

Attribute Purpose
srcset Image URL(s) with descriptors
media Media query condition
type MIME type (format detection)
sizes Display size hints
width/height Intrinsic dimensions
Use Cases:
  • Art Direction: Different crops for mobile/desktop
  • Format Selection: WebP/AVIF with JPEG fallback
  • Resolution Switching: Different sizes per viewport
  • Dark mode variations
  • Print vs screen images
  • Locale-specific images

Example: Picture element for art direction and formats

<!-- Art direction: different images for different viewports -->
<picture>
  <source media="(min-width: 1200px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="hero-medium.jpg">
  <img src="hero-mobile.jpg" alt="Hero image">
</picture>

<!-- Format selection: modern formats with fallbacks -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Optimized image">
</picture>

<!-- Combined: format + resolution -->
<picture>
  <source srcset="photo-800.webp 800w, photo-1200.webp 1200w" 
          type="image/webp">
  <source srcset="photo-800.jpg 800w, photo-1200.jpg 1200w" 
          type="image/jpeg">
  <img src="photo-800.jpg" alt="Photo" loading="lazy">
</picture>

<!-- Dark mode variation -->
<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
  <img src="logo-light.png" alt="Company logo">
</picture>

<!-- Print-specific image -->
<picture>
  <source srcset="chart-print.png" media="print">
  <img src="chart-screen.png" alt="Sales chart">
</picture>
Warning: Browser selects first matching source. Order matters! Put most specific media queries first. Always include <img> as fallback.

3. SVG Integration and Inline Graphics

Method Syntax Pros Cons
Inline SVG <svg>...</svg> CSS/JS control, no HTTP request Increases HTML size, not cached
IMG tag <img src="image.svg"> Simple, cached, responsive No CSS/JS manipulation
Object <object data="image.svg"> Interactive, scriptable Complex, slower
CSS Background background: url(image.svg) Decorative, cached Not in HTML, no alt text
Data URL <img src="data:image/svg+xml,..."> No HTTP request Not cached, size limit

SVG Viewport Attributes

Attribute Purpose
width SVG width (with unit or viewBox)
height SVG height (with unit or viewBox)
viewBox Coordinate system: min-x min-y width height
preserveAspectRatio Scaling behavior
Common SVG Elements:
  • <circle> - Circle shapes
  • <rect> - Rectangles
  • <path> - Complex paths
  • <line>, <polyline> - Lines
  • <polygon> - Closed shapes
  • <text> - Text content
  • <g> - Group elements

Example: SVG integration methods

<!-- 1. Inline SVG (full control) -->
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#007acc" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="20">SVG</text>
</svg>

<!-- 2. IMG tag (simple, cached) -->
<img src="icon.svg" alt="Icon" width="32" height="32">

<!-- 3. Object element (interactive) -->
<object data="diagram.svg" type="image/svg+xml" width="400" height="300">
  <img src="diagram-fallback.png" alt="Diagram">
</object>

<!-- 4. Responsive inline SVG -->
<svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet">
  <rect x="10" y="10" width="180" height="80" fill="none" stroke="#333" stroke-width="2"/>
  <circle cx="100" cy="50" r="30" fill="#ff6b6b"/>
</svg>

<!-- 5. SVG with ARIA -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings Icon</title>
  <path d="M10 10 H 90 V 90 H 10 Z" fill="#666"/>
</svg>

<!-- 6. SVG sprite (reusable icons) -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
</svg>
<svg width="24" height="24">
  <use href="#icon-home"/>
</svg>
Note: Use inline SVG for icons you want to style with CSS. Use <img> for simple, static SVGs. Add role="img" and <title> for accessibility.

4. Audio Elements and Media Controls

Attribute Purpose Values Default
src Audio file URL URL to audio file None
controls Show playback controls Boolean false
autoplay Auto-start playback Boolean false (blocked by browsers)
loop Repeat playback Boolean false
muted Start muted Boolean false
preload Preload strategy none, metadata, auto auto
crossorigin CORS mode anonymous, use-credentials None

Audio Formats

Format MIME Type Support
MP3 audio/mpeg Universal
WAV audio/wav Universal
OGG audio/ogg Most browsers
AAC audio/aac Most browsers
FLAC audio/flac Modern browsers

Preload Values

Value Behavior
none Don't preload anything
metadata Preload duration, dimensions
auto Browser decides (usually preloads)

Example: Audio elements with multiple sources

<!-- Simple audio with controls -->
<audio src="audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

<!-- Multiple formats for compatibility -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  <p>Your browser doesn't support HTML5 audio. 
     <a href="audio.mp3">Download the audio</a>.</p>
</audio>

<!-- Looping background music (muted by default) -->
<audio loop muted autoplay>
  <source src="background.mp3" type="audio/mpeg">
</audio>

<!-- Preload metadata only -->
<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<!-- With custom controls via JavaScript -->
<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').volume += 0.1">Volume Up</button>
Warning: Autoplay is blocked by most browsers unless video is muted or user has interacted with the page. Use autoplay muted together if autoplay is essential.

5. Video Elements and Streaming Support

Attribute Purpose Values Notes
src Video file URL URL to video file Use <source> for multiple formats
poster Thumbnail before playback Image URL Shows until play clicked
controls Show playback controls Boolean Recommended for usability
width/height Video dimensions Pixels (number only) Maintains aspect ratio
autoplay Auto-start playback Boolean Requires muted in most browsers
loop Repeat playback Boolean Useful for background videos
muted Start muted Boolean Required for autoplay
preload Preload strategy none, metadata, auto Affects bandwidth usage
playsinline Inline playback (mobile) Boolean iOS: prevents fullscreen
disablepictureinpicture Disable PiP mode Boolean Optional

Video Formats

Format MIME Type Codec
MP4 video/mp4 H.264, H.265
WebM video/webm VP8, VP9, AV1
OGG video/ogg Theora

Track Element (Subtitles)

Attribute Values
kind subtitles, captions, descriptions, chapters
src WebVTT file URL
srclang Language code (en, es, etc.)
label User-visible label
default Boolean (default track)

Example: Video elements with advanced features

<!-- Basic video with controls -->
<video src="video.mp4" controls width="640" height="360">
  Your browser doesn't support HTML5 video.
</video>

<!-- Multiple formats + poster -->
<video controls width="800" height="450" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. 
     <a href="video.mp4">Download the video</a>.</p>
</video>

<!-- With subtitles/captions -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subs-es.vtt" srclang="es" label="Español">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English Captions">
</video>

<!-- Autoplay background video (muted) -->
<video autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
  <source src="background.webm" type="video/webm">
</video>

<!-- Responsive video (CSS controlled) -->
<video controls style="max-width: 100%; height: auto;">
  <source src="responsive.mp4" type="video/mp4">
</video>

<!-- Preload metadata only -->
<video controls preload="metadata" poster="poster.jpg">
  <source src="large-video.mp4" type="video/mp4">
</video>
Note: For autoplay to work, video must be muted. Use playsinline on iOS to prevent fullscreen. Always provide poster image for better UX.

6. Canvas and Graphics API Integration

Attribute Purpose Values Required
width Canvas width in pixels Number (default: 300) Recommended
height Canvas height in pixels Number (default: 150) Recommended

Canvas Context Types

Context Purpose
2d 2D drawing (shapes, text, images)
webgl 3D graphics (OpenGL ES)
webgl2 Enhanced 3D (OpenGL ES 3.0)
bitmaprenderer ImageBitmap rendering
Common 2D Methods:
  • fillRect() - Draw filled rectangle
  • strokeRect() - Draw rectangle outline
  • fillText() - Draw filled text
  • drawImage() - Draw image
  • beginPath() - Start path
  • arc() - Draw circle/arc
  • lineTo() - Draw line

Example: Canvas element with 2D drawing

<!-- Basic canvas element -->
<canvas id="myCanvas" width="400" height="300">
  Your browser doesn't support canvas.
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Draw rectangle
  ctx.fillStyle = '#007acc';
  ctx.fillRect(50, 50, 100, 80);
  
  // Draw circle
  ctx.beginPath();
  ctx.arc(250, 90, 40, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6b6b';
  ctx.fill();
  
  // Draw text
  ctx.font = '20px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('Canvas Drawing', 100, 200);
  
  // Draw line
  ctx.beginPath();
  ctx.moveTo(50, 250);
  ctx.lineTo(350, 250);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

<!-- Responsive canvas -->
<canvas id="responsive" style="width: 100%; height: auto;"></canvas>
<script>
  const canvas = document.getElementById('responsive');
  // Set actual size in pixels
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
</script>

<!-- Export canvas as image -->
<canvas id="exportable" width="200" height="200"></canvas>
<button onclick="exportCanvas()">Download as PNG</button>
<script>
  function exportCanvas() {
    const canvas = document.getElementById('exportable');
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'canvas-image.png';
    link.href = dataURL;
    link.click();
  }
</script>
Warning: Set canvas dimensions via width/height attributes, not CSS. CSS scales the canvas bitmap, causing blur. Canvas content is not accessible to screen readers.

7. Object and Embed Elements

Element Purpose Use Cases Support
<object> Embed external resources PDFs, SVGs, Flash (legacy), plugins Universal
<embed> Embed plugins/external content PDFs, multimedia (legacy) Universal
<iframe> Embed another HTML page External sites, widgets, ads Universal

Object Attributes

Attribute Purpose
data Resource URL
type MIME type
width/height Dimensions
name Element name

Iframe Attributes

Attribute Purpose
src Page URL
sandbox Security restrictions
loading lazy, eager
allow Feature policy

Example: Object, embed, and iframe usage

<!-- Object: PDF embed -->
<object data="document.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF cannot be displayed. <a href="document.pdf">Download PDF</a></p>
</object>

<!-- Object: SVG with fallback -->
<object data="diagram.svg" type="image/svg+xml" width="400" height="300">
  <img src="diagram-fallback.png" alt="Diagram">
</object>

<!-- Embed: PDF (legacy) -->
<embed src="document.pdf" type="application/pdf" width="100%" height="600">

<!-- Iframe: External website -->
<iframe src="https://example.com" width="800" height="600" 
        title="External content">
</iframe>

<!-- Iframe: YouTube embed -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player"
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Iframe: Sandboxed for security -->
<iframe src="untrusted.html" 
        sandbox="allow-scripts allow-same-origin"
        width="600" height="400">
</iframe>

<!-- Iframe: Lazy loading -->
<iframe src="content.html" loading="lazy" width="100%" height="400">
</iframe>

<!-- Responsive iframe (16:9 aspect ratio) -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe src="video.html" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          frameborder="0">
  </iframe>
</div>
Warning: Iframes can pose security risks. Use sandbox attribute to restrict capabilities. For untrusted content, use sandbox="" (maximum restrictions) and selectively enable features.

Section 6 Key Takeaways

  • Always include alt text for images; specify width and height to prevent CLS
  • Use srcset and sizes for responsive images based on viewport/density
  • <picture> for art direction (different crops) and format selection (WebP/AVIF fallback)
  • Inline SVG for CSS/JS control; <img> for simple static SVGs
  • Autoplay requires muted attribute; most browsers block unmuted autoplay
  • Use <track> for video subtitles/captions; WebVTT format
  • Canvas dimensions set via attributes, not CSS; content not accessible
  • Use iframe sandbox for security; loading="lazy" for performance

Related Cheatsheets

Frontend

CSS Syntax and Selectors Quick Reference

Frontend

Values, Units, and Modern CSS Data Types

Frontend

Box Model and Layout Fundamentals

Frontend

Flexbox Layout Complete Guide

Frontend

CSS Grid Layout Mastery