The hugo-video component has a gif shortcode that helps supporting modern web formats to play animated images.

# The Hugo Video component

You can use this guide and simply putting my repo https://github.com/icpmoles/hugo-video.

To summarize

1. Add the hugo-video as a submodule to be able to get upstream changes later

    git submodule add https://github.com/icpmoles/hugo-video.git themes/hugo-video

2. Add hugo-video as the left-most element of the theme list variable in your site’s or theme’s configuration file config.yaml or config.toml. Example, with config.yaml:

    theme: ["hugo-video", "my-theme"] 

   or, with config.toml,

    theme = ["hugo-video", "my-theme"] 

3. Place your video file(s) in the page bundle of your post.
4. In your site, use the shortcode, this way, indicating the video filename without its extension. If your video file is my-beautiful-loop.gif, type this:

    {{<  gif "my-beautiful-loop" >}} 
   

# Multiple Animated Picture Types

The component will include various video sources to improve browser compatibility. You just need to provide the gif with different extensions and keeping the same filename.

To summarize your folder should look like this:

$ tree post-folder
post-folder
├── index.md
└── my-beautiful-loop.gif 

But if you want to add poster and multiple video types you just need to:

$ tree post-folder
post-folder
├── index.md
├── my-beautiful-loop.gif
├── my-beautiful-loop.hevc.mp4
├── my-beautiful-loop.mp4
├── my-beautiful-loop.av1.webm
└── my-beautiful-loop.webm 

Once you prepared the file(s) you can simply use the gif shortcode.

 {{<  gif "my-beautiful-loop"  >}} 

# Gotchas

Unfortunately hugo doesn’t have ways to convert gifs to the various other formats and viceversa so you need to provide the files by yourself.

For now the only alternative format supported are the video formats from the video shortcode. No webp, APNG or JPEG-XL are supported for now.

To reduce the video file size remenber to remove the audio track.

Since converting for every format can be cumbersome I recommend to only convert the gifs to webm since it’s a good compromise between size and device support. A good collection of quality sizes for the variuos resolutions can be found on the Google VP9 Guide. Remenber to add -an to the command when coming from a video and to skip the -vf parameter