AVIF Image and Video Test

AVIF, WebP, JPG embed with browser fallback

Description of Photo 

<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">