Performance: Media formats overview
HIGH IMPACT
This affects page load speed and rendering performance by determining how quickly media files download and display.
0
0
Media formats overview in HTML - Performance & Optimization
Displaying images on a webpage
HTML
<img src="photo.webp" alt="Photo">
WebP format is smaller and loads faster while maintaining quality.
📈 Performance Gainreduces image size by 30-50%, improves LCP by 200ms
Displaying images on a webpage
HTML
<img src="photo.jpg" alt="Photo">
Using large JPEG or PNG images without optimization causes slow loading and high data usage.
📉 Performance Costblocks rendering for 500ms+ on slow connections, increases LCP
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Large JPEG/PNG images | Minimal | 1 reflow per image load | High paint cost due to large decode | [X] Bad |
| WebP images | Minimal | 1 reflow per image load | Lower paint cost due to smaller size | [OK] Good |
| AVI video | Minimal | 1 reflow on video load | High paint and decode cost | [X] Bad |
| MP4 video | Minimal | 1 reflow on video load | Lower paint and decode cost | [OK] Good |
| WAV audio | Minimal | 1 reflow on audio load | High resource load cost | [X] Bad |
| OGG audio | Minimal | 1 reflow on audio load | Lower resource load cost | [OK] Good |
Rendering Pipeline
Media formats affect the loading and decoding stages of the browser rendering pipeline. Efficient formats reduce download time and decoding effort.
→Resource Loading
→Decode
→Paint
⚠️ BottleneckResource Loading and Decode stages are most expensive for large or inefficient media formats.
Core Web Vital Affected
LCP
This affects page load speed and rendering performance by determining how quickly media files download and display.
Optimization Tips
1Use modern compressed media formats to reduce file size and improve load speed.
2Avoid outdated or uncompressed formats that increase load time and block rendering.
3Check media file sizes in DevTools Network panel to identify performance bottlenecks.
Performance Quiz - 3 Questions
Test your performance knowledge
Which image format generally offers better compression and faster loading for web use?
DevTools: Network
How to check: Open DevTools, go to Network tab, reload page, filter by media type, and check file sizes and load times.
What to look for: Look for large media files that take long to download; smaller sizes and faster load times indicate better performance.