🚀 CloudFront Dynamic Media Demo

Navigation

How It Works

This demo shows how CloudFront Functions dynamically optimize images based on device type and network conditions.

What happens:

CloudFront Function detects browser capabilities (AVIF/WebP support)
Measures network quality via Round Trip Time (RTT)
Adds query parameters: fmt, qlt, wid, dpr
Adobe Dynamic Media serves optimized images

Device Simulations - Side-by-Side Comparison

Click a button to load images from both distributions simultaneously:

🔧 D2 - CloudFront Function

⚡ D3 - Lambda@Edge

Parameter Reference

Device	Format	Quality	Width	DPR
Desktop	avif	85	1920	2
Tablet	webp	75	768	2
Phone	webp	60	375	3