See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub

gatsby-remark-gifs-to-videos

Npm version Npm downloads MIT license PRs welcome

gatsby-remark-gifs-to-videos is a Gatsby remark plugin to transform animated GIF to autoplay videos.

The main purpose is to improve performances.

Usage

  1. Download gatsby-remark-gifs-to-videos from the NPM registry:
yarn add gatsby-remark-gifs-to-videos
  1. Add the plugin in your gatsby-config.js file
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-gifs-to-videos",
          //
          // --- Optional ---
          // "gatsby-remark-copy-linked-files",
        ],
      },
    },
  ],
}
Option Required Type Default
maxHeight false Number 480
maxWidth false Number 680
autoplay false Boolean true
loop false Boolean true
muted false Boolean true
playsinline false Boolean true
controls false Boolean false
preload false String “auto”

Improve Animated GIF Performance With HTML5 Video

© 2022 Gatsby, Inc.