AVIF, WebP, JPG embed with browser fallback
<picture>
<source srcset="images/hero-test/photo.avif" type="image/avif">
<source srcset="images/hero-test/photo.webp" type="image/webp">
<img src="images/hero-test/photo.jpg" alt="Description of Photo">
</picture>
Video Comparison: MP4 v AVIF
MP4 | 1280px wide | 30fps | 385kb
<video controls loop autoplay style="width:100%;" >
<source src="video/video-placeholder.mp4"
title="something descriptive"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/ >
</video>
AVIF | 1280px wide | 20fps | 25kb
<img src="video/video-placeholder.avifs" alt="Description of Photo">