32 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/media-patterns.json.
A uniform grid of images with consistent cell sizes. Best for collections where images share the same aspect ratio — product catalogs, headshots, portfolio thumbnails. Predictable, easy to scan, and performs reliably. Use CSS Grid with fixed column widths and aspect-ratio or object-fit: cover to handle mixed dimensions gracefully. Clicking a thumbnail opens the image in a lightbox or detail view.
A Pinterest-style staggered grid where images retain their natural aspect ratios with fixed column widths and varying heights. Optimizes space by eliminating gaps between elements. Popularized by Pinterest (2010) and widely used for photography, social media feeds, and mixed-media galleries. More visually engaging than uniform grids but harder to scan in order. Use when image aspect ratios vary significantly.
A full-screen or near-full-screen overlay displaying a single image at maximum resolution with navigation controls. Opened by clicking a gallery thumbnail. Must support: keyboard navigation (arrow keys, Escape to close), swipe gestures on mobile, pinch-to-zoom, image counter ("3 of 24"), preloading adjacent images, and smooth transitions. The lightbox traps focus and prevents background scrolling.
Magnification of image details — essential for e-commerce product images where users inspect textures, labels, and fine details. Three common patterns: (1) Hover zoom — a magnified view appears in a side panel on mouse hover, (2) Click zoom — clicking toggles between fit-to-container and full resolution with pan, (3) Pinch zoom — mobile touch gesture for progressive magnification. Baymard: 56% of users explore product images, and zoom is the #1 requested feature.
An interactive tool for selecting a region of an image — used in profile photo uploads, cover images, thumbnails, and content creation. The crop box is resizable and draggable with optional aspect ratio constraints (1:1 for avatars, 16:9 for covers). Provide preset ratios for common targets (social media sizes, print formats). Show a grid overlay (rule of thirds) for composition guidance. Real-time preview of the cropped result.
A horizontal sequence of images with prev/next navigation, often used for product image galleries, hero banners, and testimonials. NN/G research shows carousels have low engagement past the first slide — use sparingly and never auto-advance without user consent. Show navigation dots or thumbnails to indicate position and total count. Swipe support on mobile is mandatory. Performance warning: never use auto-rotating carousels as the hero/LCP element — when multiple slides compete to be the Largest Contentful Paint candidate, the browser cannot predict which is visible at paint time, severely degrading LCP scores.
Custom video player controls that improve on browser defaults — play/pause, progress scrubber, volume/mute, fullscreen toggle, playback speed, captions toggle, and quality selector. Use progressive disclosure: show minimal controls (play, progress, volume, fullscreen) by default, reveal advanced controls (speed, quality, captions) on interaction. Controls auto-hide during playback and reappear on mouse move or keyboard input. CRITICAL: never autoplay content videos — always require explicit user interaction to start playback (WCAG 1.4.2). Always provide a poster image so users see a meaningful frame before pressing play.
Text overlays synchronized with video content — captions (same language, include sound effects) and subtitles (translations). Required for accessibility (WCAG 1.2.2 Level A for prerecorded, 1.2.4 Level AA for live). Also used in noisy environments, by non-native speakers, and for SEO (searchable transcripts). 85% of Facebook videos are watched without sound — captions dramatically increase engagement.
A preview image that appears when hovering over the video progress bar, showing a frame from the hovered timestamp. YouTube popularized this pattern — it lets users scrub visually to find specific moments without playing. Generate thumbnails as a sprite sheet (grid of frames) at regular intervals (every 5-10 seconds). Display in a tooltip above the scrubber with the corresponding timestamp.
Dynamically adjusting video quality based on network conditions — starts at a safe bitrate and scales up/down as bandwidth changes. HLS (HTTP Live Streaming) and DASH (Dynamic Adaptive Streaming over HTTP) are the two standards. The player fetches small chunks (2-10s segments) at the appropriate quality level. Users can also manually override quality. Essential for consistent playback on variable networks.
A floating, always-on-top mini player that allows users to continue watching video while navigating other content. The native Picture-in-Picture API places the video in an OS-level window. For in-page PiP, a sticky mini player appears in a corner when the original video scrolls out of view. Both patterns let users multitask without losing video context. Common on YouTube, Twitch, and streaming platforms.
Embedding third-party video (YouTube, Vimeo, Wistia) via <iframe> or a facade pattern. The facade pattern loads a static thumbnail with a play button first, then swaps in the iframe on click — saving 500KB+ of initial JS. Essential for performance on pages with multiple embeds. Provide aspect-ratio containers (16:9 default) to prevent layout shift. Include video title and source attribution.
A custom audio player for podcasts, music, voice messages, and sound effects. Core controls: play/pause, progress scrubber, current time / duration, volume/mute, and playback speed (0.5x–2x). For podcasts, add skip forward/backward buttons (15s/30s). Compact variant for inline playback (voice messages in chat). Expanded variant with album art and metadata for dedicated listening views.
A visual representation of an audio track's amplitude over time, replacing the standard progress bar. Popularized by SoundCloud — the waveform shows quiet and loud sections at a glance, enabling users to skip to the "good parts." Played portions are colored differently from unplayed. Clicking anywhere on the waveform seeks to that position. Commonly used for music, podcasts, and voice messages.
An ordered list of audio or video tracks with sequential or shuffle playback. Shows track title, artist/source, duration, and play state (playing, paused, queued). Current track is visually highlighted. Click any track to play it immediately. Drag-to-reorder for user-created playlists. Support repeat (one, all, off) and shuffle modes. Auto-advance to next track on completion. Persist playlist state across sessions.
A drop zone that accepts files dragged from the OS file manager. The zone changes appearance (border color, background, icon) when files hover over it. Always pair with a traditional "Browse files" button for users who prefer clicking or cannot drag. Show accepted file types and size limits upfront. Support both single and multi-file drops. Validate file type and size immediately on drop, before upload begins.
Visual feedback during file uploads — progress bar, percentage, file size, estimated time remaining, and upload speed. Each file in a multi-file upload has its own progress indicator with three states: waiting (queued), in progress (uploading), and complete (success/error). Allow canceling individual uploads. Show a summary bar for overall progress when uploading many files. NN/G: progress indicators reduce perceived wait time by 30%.
Uploading multiple files simultaneously with a queue, individual progress, and batch actions. Show a file list with thumbnails (for images), filenames, sizes, and status. Allow removing files from the queue before upload starts. Support adding more files to an existing queue. Upload in parallel (2-4 concurrent) for speed, with a configurable concurrency limit. Show overall progress alongside individual file progress.
Upload protocol that survives network interruptions, browser crashes, and tab closures. The file is split into chunks (typically 5-10MB), each uploaded independently. The server tracks which chunks are received. On resume, the client queries the server for completed chunks and uploads only the remaining ones. Essential for large files (video, datasets, backups) on unreliable connections.
Client-side validation of selected files before upload — checking MIME type, file extension, file size, image dimensions, and (for images) aspect ratio. Provide immediate feedback on invalid files with specific error messages: "File too large (15MB). Maximum allowed: 10MB" rather than generic "Invalid file." Accept attribute on the file input provides a first filter, but always validate programmatically too (users can bypass accept).
Showing a preview of selected images before uploading — lets users verify they picked the right files, check orientation, and remove unwanted selections. Use URL.createObjectURL() for instant client-side previews without uploading. For existing uploaded images, show the stored URL. Include image metadata (filename, dimensions, file size) below the preview. Support click-to-enlarge in a lightbox.
In-browser rendering of documents — PDF, Word, spreadsheet, and text files — without requiring download. PDFs are the most common; use PDF.js (Mozilla) for reliable rendering with built-in text selection, search, and zoom. For other formats, convert server-side to PDF or use a document viewer service. Toolbar: page navigation, zoom, download, print, search, and fullscreen. Show loading progress for large documents.
A static thumbnail image representing a video before playback — the first frame, a key frame, or a custom-selected poster image. Essential for video lists and galleries where auto-playing all videos would be prohibitive. Show a play button overlay to indicate the item is playable. For longer content, show duration badge (e.g., "12:34") positioned bottom-right. Hover-to-preview (silent autoloop video) for richer browsing.
Displaying appropriate icons for non-previewable file types — documents, spreadsheets, archives, code files — based on MIME type or extension. Each file type gets a recognizable icon (PDF = red document, ZIP = folder with zipper, MP3 = music note). Consistent iconography helps users identify file types at a glance in file lists, upload queues, and attachment displays. Use a finite set of icons covering the most common types with a generic fallback.
Deferring the loading of off-screen images, videos, and iframes until the user scrolls near them. Reduces initial page weight and speeds up Largest Contentful Paint (LCP) — studies show 22% LCP improvement and 26% page weight reduction. Use native loading="lazy" for images and iframes below the fold. CRITICAL: never lazy-load elements visible in the initial viewport — this is a web performance anti-pattern that delays LCP and causes visible pop-in. The hero image, logo, above-the-fold product images, and any media in the first screenful must load eagerly. Combine with a placeholder (blur, dominant color, skeleton) to prevent layout shift.
Serving different image sizes and formats based on the user's device, viewport width, and pixel density. A 4K desktop gets a 2000px image; a mobile phone gets 400px. Prevents wasting bandwidth on oversized images. Use srcset for resolution switching and <picture> with <source> for art direction (different crops for different screens). Modern formats (WebP, AVIF) save 25-50% over JPEG with equal quality. Cap pixel density at 2x DPR — studies show the human eye cannot reliably distinguish 2x from 3x on mobile screens (Twitter/X found capping at 2x saved ~45% image weight with zero perceivable quality loss). Never generate or serve 3x image variants. Every <img> must have explicit width and height attributes (or CSS aspect-ratio) to reserve space and prevent CLS during load.
Choosing and converting to modern image formats — AVIF (best compression, slow encode), WebP (good compression, wide support), JPEG (universal fallback), PNG (lossless, transparency). Serve modern formats with <picture> fallbacks. A single image pipeline: source → AVIF + WebP + JPEG at multiple sizes. AVIF saves ~50% vs JPEG, WebP saves ~30%. SVG for icons and illustrations (infinitely scalable, tiny file size). Use reasonable quality settings: JPEG/WebP at quality 80, AVIF at quality 75 — reducing from 100 to 80 halves file size with no visible difference (confirmed by SSIM perceptual analysis). Never use quality 100 in production. CRITICAL: never use animated GIFs — they are massive (10-20x larger) and lack playback controls. For any animated/looping visual content, use a silent autolooping video instead: <video autoplay muted loop playsinline>. An MP4/WebM video at equivalent quality is 80-90% smaller than the GIF, supports hardware decoding, and allows the browser to pause off-screen loops automatically.
Low-Quality Image Placeholder — a tiny (20-40px wide), heavily blurred version of the image displayed instantly while the full image loads. Creates a smooth transition from blurry to sharp, providing immediate visual context and preventing layout shift. Facebook and Medium popularized this pattern. Alternative approaches: dominant color swatch (single color), BlurHash (compact hash string encoding), and traced SVG outlines.
Serving media from a Content Delivery Network (CDN) for faster global delivery, with appropriate cache headers for performance. Static media assets (images, fonts, CSS) get immutable caching with content-hashed filenames. User-uploaded media gets long Cache-Control with ETag-based revalidation. CDNs like Cloudflare, CloudFront, and Vercel Edge Cache reduce TTFB to <50ms globally. On-the-fly image transformation (resize, format, quality) via CDN URL parameters.
Proactively loading media assets that the user is likely to need next — the LCP image, the next gallery image, or a video poster. Use <link rel="preload"> for critical above-the-fold images. Preload adjacent lightbox images when viewing a gallery. Prefetch video poster images in a video list. Balance: preloading too aggressively wastes bandwidth; preloading strategically eliminates perceived latency.
Respecting the user's preference for reduced data usage via the Save-Data HTTP client hint. When Save-Data: On is sent, the user has explicitly opted into data-saving mode in their browser or OS — typically on metered mobile connections or in regions with expensive bandwidth. The server and client should respond by serving lighter media: smaller images, lower video quality, skipping decorative content, and avoiding non-essential preloads. This is progressive enhancement in reverse — start with the full experience and gracefully reduce for data-constrained users.
Loading custom fonts without causing layout shift (CLS) or invisible text (FOIT). Use font-display: swap (shows fallback immediately, swaps when loaded) or font-display: optional (uses the font only if it arrives within ~100ms, otherwise sticks with the fallback — best for non-critical fonts). Serve WOFF2 exclusively — it offers 30% better compression than WOFF and has universal browser support (97%+). The biggest CLS culprit is metric mismatch between the fallback font and the web font: different ascent, descent, line-gap, and character widths cause text reflow on swap. Use CSS @font-face override descriptors (size-adjust, ascent-override, descent-override, line-gap-override) to match fallback metrics to the web font, eliminating visible reflow.