How can I display GIF images efficiently in my Gatsby blog website?

Question

A few days ago, I bought a Gatsby blog theme and tried to modify it. The blog site uses Images(PNG, JPEG), not animated GIFs. So I tried to use GIF images for all blog posts but it affected site performance. Also, I notice that Gatsby Image doesn't provide a GIF format. How can I use GIF on my blog with high performance?

Answer 1

You can convert GIFs into MP4 videos with H.264 encoding using ffmpeg. Then use <video src="..." /> in place of your img tag. To make this really easy, I have a React component that I use for this that includes automatic playback when the video is visible:

import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { useInView } from "react-intersection-observer"

const GifVideo = ({ threshold = 0.15, ...playerProps }) => {
  const [ref, inView] = useInView({ threshold })

  useEffect(() => {
    if (inView) {
      ref.current?.play()
    } else {
      ref.current?.pause()
    }
  }, [ref, inView])

  return <video ref={ref} autoPlay playsInline muted loop {...playerProps} />
}

export default GifVideo

GifVideo.propTypes = {
  src: PropTypes.string,
  threshold: PropTypes.number,
  className: PropTypes.string,
}

Then to you use it, it's this easy:

<GifVideo src="/your/video.mp4" width={400} className="some-class" />

For what it's worth, I don't recommend using the sharp-backed GraphQL image transformers in Gatsby (gatsby-transformer-sharp). It's exceedingly slow, couples the presentation to the query, and doesn't provide any way to handle art direction.

Answer 2

I use gatsby-remark-interactive-gifs plugin to show gifs on my gatsby blog.

1. Install gatsby-remark-interactive-gifs

npm install --save gatsby-remark-interactive-gifs

yarn add gatsby-remark-interactive-gifs

2. Add this config to gatsby-config.js:

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-interactive-gifs`,
            options: {
              root: `${__dirname}`,
              src: `${__dirname}/content/gif`,
              dest: `${__dirname}/public/static/gifs`,
              play: `${__dirname}/src/img/play.gif`,
              placeholder: `${__dirname}/src/img/play.gif`,
              loading: `${__dirname}/src/img/play.gif`,
              relativePath: `/static/gifs`,
            },
          },
        ],
      },
    },

From plugin document:
root - The root of your project.
src - Where all the gifs you want processed are stored. Absolute path.
dest - A path in public where your gifs are stored. Absolute path.
play - An image to indicate that the gif can be interacted with. Absolute path.
placeholder - An image to show when the gif is missing in action. Absolute path.
loading - An image which shows when the gif is downloading. Absolute path.
relativePath - The relative path served from public/.

! Make sure you are adding this above the prismjs config.

3. Sample code in MD file to show gifs on your gatsby blog:

<img src="/static/gifs/fileName.gif">