视频优化

GIF

<video autoplay loop muted playsinline>
    <source src="dancing-baby.webm" type="video/webm">
    <source src="dancing-baby.mp4" type="video/mp4">
    <p>Your browser doesn't support this embedded video.</p>
</video>

Using the autoplay, loop, and muted attributes gives us the same behavior that we expect from a GIF. While serving a video is not as straightforward as serving a GIF, the file size savings can be tremendous. The following video is 103 KB in size, compared to 4.1 MB for the GIF that I converted it from. That’s a size reduction of over 97%.

To quickly convert a GIF into a video, there are plenty of websites that let you do a one-off conversion.To convert a GIF into a video file on the command line, I use FFmpeg.

$ ffmpeg -f gif -i dancing-baby.gif dancing-baby.mp4