Delivering Fast and Beautiful Images and Video

Explore strategies for delivering optimized images and videos to diverse devices in this 49-minute Devoxx conference talk. Learn how to enhance website performance by efficiently managing media content, which typically comprises 75% of page weight. Discover techniques for responsive images, progressive loading, and content optimization to ensure fast rendering across various screen resolutions and CPU capabilities. Gain insights into testing methods, implementing lazy loading, and leveraging new technologies like WebP and vector graphics. Dive into video optimization techniques, including preloading strategies, background video considerations, and adaptive streaming. Understand the impact of network conditions on media delivery and explore solutions such as the Save Data Header and Network Info API. Walk away with practical knowledge to significantly improve the speed and visual quality of your web content across all devices.

Intro
Mobile Experience
Image Optimization
Vector Graphics
WebP
Device Size
Responsive breakpoints
Lazy loading
Lazy loading in Chrome
Optimizing Video
Preload Auto
Preload Metadata
Background Videos
Mobile Waterfall
Background Video
Video Size
Cloud NIC
Video isnt cheap
Garth Brooks
Video Files
Amazon
Chrome
Video Streaming
Audio Streaming
Save Data Header
Remove Videos
Remove Images
Compress Images
Network Info API
Network Speed
Base64 Encoding
Conclusion
Image Quality Format
Media Developer Expert
JPEG as fallback
Picture tag