Experiments

AVIF is the new GIF

DPiCSS is an interesting option when you have small pieces of videos an you don't need audio. Using AVIF image format is a relevant option to get high quality short animated sequences with fewer kilobytes. With this modern format, it becomes possible to display high definition media without losing page performance, bandwidth and user patience. This page uses some examples of still and animated AVIF files in combination with DPiCSS.

The following example uses DPiCSS integrated into Eleventy LibDoc:

<details data-dpicss="play pause box_shadow button_shadow">
    <summary>
        <picture>
            <img src="https://assets.olivewhite.com/dpicss/mmfrteaser-opening_360-thumbnail.avif"
                srcset="https://assets.olivewhite.com/dpicss/mmfrteaser-opening_720-thumbnail.avif 2x"
                alt="The thumbnail"
                width="1728"
                height="720"
                loading="lazy">
        </picture>
    </summary>
    <picture>
        <img src="https://assets.olivewhite.com/dpicss/mmfrteaser-opening_360.avif"
            srcset="https://assets.olivewhite.com/dpicss/mmfrteaser-opening_720.avif 2x"
            alt="Large sized image"
            width="1728"
            height="720"
            loading="lazy">
    </picture>
</details>

• AVIF thumbnail 22KB for pixel density > 1 - 1728x720px definition.
• AVIF thumbnail 7KB for pixel density 1x - 864x360px definition.
• 9s animated AVIF file 1.1MB for pixel density > 1 - 1728x720px.
• 9s animated AVIF file 1.1MB for pixel density x1 - 864x360px.
• ffmpeg command for animated file:

  ffmpeg -i mmfrteaser_nb_opening.mkv -ss 8 -to 17 \
      -vf "fps=24000/1001,scale=-2:720:flags=lanczos,zscale=t=linear:npl=100,format=gbrpf32le,zscale=p=bt709,tonemap=hable:desat=0,zscale=t=bt709:m=bt709:r=tv,format=yuv420p,eq=saturation=1.4:brightness=0.1" \
      -c:v libsvtav1 -crf 50 -preset 6 -g 15 -keyint_min 15 -an \
      mmfrteaser-opening_720.avif
  

  • There are much parameters on -vf because video source is HDR.
  • -g and -keyint_min are set to force key frames, otherwise some browser like Safari may lag.
• ffmpeg command for thumbnail file:

  ffmpeg -i mmfrteaser_nb_opening.mkv -ss 8 \
      -vf "fps=24000/1001,scale=-2:720:flags=lanczos,zscale=t=linear:npl=100,format=gbrpf32le,zscale=p=bt709,tonemap=hable:desat=0,zscale=t=bt709:m=bt709:r=tv,format=yuv420p,eq=saturation=1.4:brightness=0.1" \
      -frames:v 1 -c:v libaom-av1 -crf 40 -cpu-used 8 \
      mmfrteaser-opening_720-thumbnail.avif
  

Play once and still

The following example uses an AVIF encoded with -loop 1 that play only once. A bit of JavaScript is added only to add a class name on the large sized image loaded. This allows to block the natural behavior of the details summary tag when you want to keep the last frame visible. A reload button allows to reset the scene.