---
name: webperf-media
description: Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.
---

# WebPerf: Media Performance

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with `mcp__chrome-devtools__evaluate_script`, capture output with `mcp__chrome-devtools__get_console_message`.

## Available Snippets

| Snippet | Description | File |
|---------|-------------|------|
| Image Element Audit | Audits all <img> elements on the page against image performance best practices — covering loading st | scripts/Image-Element-Audit.js |
| SVG Embedded Bitmap Analysis | Scans all SVG resources on the page — both external files and inline <svg> elements — and flags any  | scripts/SVG-Embedded-Bitmap-Analysis.js |
| Video Element Audit | Audits all <video> elements on the page against video performance best practices — covering preload  | scripts/Video-Element-Audit.js |

## Execution with Chrome DevTools MCP

```
1. mcp__chrome-devtools__navigate_page  → navigate to target URL
2. mcp__chrome-devtools__evaluate_script → run snippet code (read from scripts/ file)
3. mcp__chrome-devtools__get_console_message → capture console output
4. Interpret results using thresholds below, provide recommendations
```

## Common Workflows

### Complete Media Audit

When the user asks for media optimization or "audit images and videos":

1. **Image-Element-Audit.js** - Analyze all images (format, lazy loading, sizing, fetchpriority)
2. **Video-Element-Audit.js** - Analyze all videos (poster, preload, formats, autoplay)
3. **SVG-Embedded-Bitmap-Analysis.js** - Detect inefficient bitmap images embedded in SVGs

### Image Optimization Workflow

When the user asks "optimize images" or "check image performance":

1. **Image-Element-Audit.js** - Full image audit
2. Cross-reference with **webperf-loading** skill:
   - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy-loaded images)
   - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy loading)
   - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
   - Priority-Hints-Audit.js (LCP image should have fetchpriority="high")

### Video Performance Audit

When the user asks "optimize videos" or "check video performance":

1. **Video-Element-Audit.js** - Full video audit
2. Cross-reference with **webperf-core-web-vitals** skill:
   - LCP-Video-Candidate.js (check if video/poster is LCP)
3. Cross-reference with **webperf-loading** skill:
   - Priority-Hints-Audit.js (video poster priority)
   - Resource-Hints-Validation.js (video preload)

### LCP Image Investigation

When LCP is an image and needs optimization:

1. Cross-reference with **webperf-core-web-vitals** skill:
   - LCP.js (measure LCP)
   - LCP-Image-Entropy.js (analyze image complexity)
2. **Image-Element-Audit.js** - Check format, dimensions, lazy loading
3. Cross-reference with **webperf-loading** skill:
   - Find-Above-The-Fold-Lazy-Loaded-Images.js (should NOT be lazy)
   - Priority-Hints-Audit.js (should have fetchpriority="high")
   - Resource-Hints-Validation.js (consider preload)

### Layout Shift from Images

When CLS is caused by images without dimensions:

1. **Image-Element-Audit.js** - Check for missing width/height attributes
2. Cross-reference with **webperf-core-web-vitals** skill:
   - CLS.js (measure total CLS)
3. Cross-reference with **webperf-interaction** skill:
   - Layout-Shift-Loading-and-Interaction.js (when shifts occur)

### SVG Optimization Audit

When the user asks about SVG performance or file sizes are large:

1. **SVG-Embedded-Bitmap-Analysis.js** - Detect raster images embedded in vector SVGs
2. Recommend SVGO optimization for SVGs without embedded bitmaps
3. Recommend extracting bitmaps to separate image files with proper formats

## Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

### After Image-Element-Audit.js

- **If images missing width/height attributes** → Layout shift risk, run:
  1. **webperf-core-web-vitals:CLS.js** (measure CLS impact)
  2. **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** (timing of shifts)
  3. Recommend adding explicit dimensions to all images

- **If images using wrong format (JPEG for graphics, PNG for photos)** → Recommend:
  - Modern formats: WebP, AVIF
  - Appropriate format for content type
  - Format-specific compression settings

- **If images much larger than display size** → Recommend:
  - Responsive images with srcset
  - Appropriate image CDN sizing
  - srcset with multiple sizes for different viewports

- **If above-the-fold images are lazy-loaded** → Run:
  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (confirm)
  2. **webperf-core-web-vitals:LCP.js** (measure LCP impact)
  3. Recommend removing loading="lazy" from above-fold images

- **If LCP image lacks fetchpriority="high"** → Run:
  1. **webperf-core-web-vitals:LCP.js** (measure current LCP)
  2. **webperf-loading:Priority-Hints-Audit.js** (full priority audit)
  3. Recommend adding fetchpriority="high" to LCP image

- **If below-the-fold images are NOT lazy-loaded** → Run:
  1. **webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js** (confirm)
  2. Recommend adding loading="lazy" to offscreen images

- **If images have both loading="lazy" AND fetchpriority="high"** → Run:
  1. **webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js** (confirm contradiction)
  2. Recommend removing one of the conflicting attributes

- **If images missing alt text** → Accessibility issue, recommend adding descriptive alt text

### After Video-Element-Audit.js

- **If video is LCP candidate** → Run:
  1. **webperf-core-web-vitals:LCP-Video-Candidate.js** (confirm)
  2. **webperf-core-web-vitals:LCP.js** (measure LCP)
  3. **webperf-core-web-vitals:LCP-Sub-Parts.js** (break down timing)
  4. Optimize video poster image or consider image alternative

- **If video missing poster** → Recommend:
  - Adding poster image for better perceived performance
  - Using first frame or custom thumbnail
  - Optimizing poster as you would an image

- **If video uses preload="auto"** → Bandwidth concern, evaluate:
  - Is video above-the-fold? Keep preload="auto"
  - Is video below-the-fold? Change to preload="metadata" or "none"
  - Is autoplay intended? Verify preload matches intent

- **If autoplay video without muted** → Browser will block, recommend:
  - Adding muted attribute
  - Or removing autoplay

- **If video missing multiple formats** → Recommend:
  - WebM for Chrome/Firefox
  - MP4 as fallback for Safari
  - Order sources by efficiency (WebM first)

- **If large video files (>5MB)** → Recommend:
  - Compression/transcoding
  - Adaptive bitrate streaming (HLS, DASH)
  - Loading strategy optimization

### After SVG-Embedded-Bitmap-Analysis.js

- **If bitmap images found in SVGs** → Recommend:
  1. Extract bitmaps to separate files
  2. Use WebP/AVIF format for extracted images
  3. Reference images from SVG with <image> element
  4. Or convert to pure vector if possible

- **If large embedded bitmaps (>100KB)** → Critical inefficiency:
  - SVG parsing overhead + large bitmap = worst of both worlds
  - Urgently recommend extraction

- **If multiple small bitmaps in SVG** → Consider:
  - CSS sprites for small icons
  - SVG symbols for reusable graphics
  - Extracting to individual optimized images

### Cross-Skill Triggers

These triggers recommend using snippets from other skills:

#### From Media to Core Web Vitals Skill

- **If LCP image detected** → Use **webperf-core-web-vitals** skill:
  - LCP.js (measure LCP)
  - LCP-Sub-Parts.js (break down timing phases)
  - LCP-Image-Entropy.js (analyze image complexity)

- **If video is LCP candidate** → Use **webperf-core-web-vitals** skill:
  - LCP-Video-Candidate.js (confirm and analyze)
  - LCP.js (measure impact)

- **If images causing layout shifts** → Use **webperf-core-web-vitals** skill:
  - CLS.js (measure cumulative shift)

#### From Media to Loading Skill

- **If lazy loading issues detected** → Use **webperf-loading** skill:
  - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy)
  - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy)
  - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)

- **If LCP image needs priority optimization** → Use **webperf-loading** skill:
  - Priority-Hints-Audit.js (fetchpriority analysis)
  - Resource-Hints-Validation.js (preload validation)

- **If images competing with critical resources** → Use **webperf-loading** skill:
  - Find-render-blocking-resources.js (resource priority conflicts)
  - TTFB-Resources.js (identify slow image CDN)

#### From Media to Interaction Skill

- **If images causing layout shifts during interaction** → Use **webperf-interaction** skill:
  - Layout-Shift-Loading-and-Interaction.js (shift timing analysis)

### Performance Budget Thresholds

Use these thresholds to trigger recommendations:

**Image File Sizes:**
- **Warning**: Individual image > 500KB → Check format and compression
- **Critical**: Individual image > 1MB → Urgent optimization needed
- **Total images**: > 5MB on initial load → Implement lazy loading

**Image Formats:**
- **JPEG for graphics/icons** → Recommend PNG or SVG
- **PNG for photos** → Recommend JPEG, WebP, or AVIF
- **GIF for animations** → Recommend video (MP4/WebM) or animated WebP
- **No modern formats (WebP/AVIF)** → Recommend upgrading

**Image Dimensions:**
- **Intrinsic size > 2x display size** → Recommend responsive images
- **Intrinsic size < display size** → Upscaling = blurry, provide larger source

**Video File Sizes:**
- **Warning**: Video > 10MB → Consider compression or streaming
- **Critical**: Video > 50MB → Urgent optimization or streaming needed

**Lazy Loading:**
- **Above-fold images lazy-loaded** → Critical LCP impact, fix immediately
- **Below-fold images NOT lazy-loaded** → Wasted bandwidth, implement lazy loading
- **>10 images eager-loaded** → Excessive, implement lazy loading

**Priority Hints:**
- **LCP image without fetchpriority="high"** → Add for 10-30% LCP improvement
- **Non-LCP images with fetchpriority="high"** → Remove, wasting browser hints
- **Lazy + fetchpriority="high" conflict** → Fix contradiction

### Common Issues and Resolutions

**Issue: LCP is slow and LCP element is an image**
1. Run Image-Element-Audit.js
2. Run webperf-core-web-vitals:LCP-Image-Entropy.js
3. Check: format, lazy loading, fetchpriority, preload
4. Fix in order: remove lazy, add fetchpriority="high", optimize format, add preload

**Issue: CLS from images**
1. Run Image-Element-Audit.js
2. Check for missing width/height
3. Add explicit dimensions or aspect-ratio CSS
4. Verify with webperf-core-web-vitals:CLS.js

**Issue: Page loads too many images**
1. Run Image-Element-Audit.js
2. Run webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
3. Implement lazy loading on below-fold images
4. Consider pagination or infinite scroll

**Issue: Images are the wrong format**
1. Run Image-Element-Audit.js
2. Check format vs content type
3. Recommend WebP with JPEG/PNG fallback
4. Consider AVIF for even better compression

**Issue: Video is LCP**
1. Run Video-Element-Audit.js
2. Run webperf-core-web-vitals:LCP-Video-Candidate.js
3. Optimize poster image or consider static image alternative
4. Add fetchpriority="high" to poster if keeping video

**Issue: SVG files are huge**
1. Run SVG-Embedded-Bitmap-Analysis.js
2. Extract embedded bitmaps
3. Run SVGO on pure SVG
4. Re-measure file sizes

---

---

## Image Element Audit

Audits all <img> elements on the page against image performance best practices — covering loading strategy, fetch priority, format modernisation, responsive markup, and CLS prevention.

**Script:** `scripts/Image-Element-Audit.js`

---

## SVG Embedded Bitmap Analysis

Scans all SVG resources on the page — both external files and inline <svg> elements — and flags any that contain embedded bitmap images, reporting name, transfer size, compression encoding, and embedded bitmap details.

**Script:** `scripts/SVG-Embedded-Bitmap-Analysis.js`

---

## Video Element Audit

Audits all <video> elements on the page against video performance best practices — covering preload strategy, autoplay configuration, format modernisation, CLS prevention, and playback accessibility.

**Script:** `scripts/Video-Element-Audit.js`