如何在我的 Gatsby 博客网站上有效地显示 GIF 图像？

Question

前几天买了一个Gatsby博客主题，尝试修改了一下。该博客站点使用图像（PNG、JPEG），而不是动画 GIF。所以我尝试在所有博客文章中使用 GIF 图片，但它影响了网站性能。另外，我注意到 Gatsby Image 不提供 GIF 格式。如何在我的博客上以高性能使用 GIF？

Answer 1

你可以convert GIFs into MP4 videos with H.264 encoding using ffmpeg。然后使用 <video src="..." /> 代替 img 标签。为了使这变得非常简单，我使用了一个 React 组件，它包括在视频可见时自动播放：

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,
}

那你用起来就这么简单:

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

尽管如此，我不建议在 Gatsby (gatsby-transformer-sharp) 中使用 sharp-backed GraphQL 图像转换器。它非常慢，将演示文稿与查询相结合，并且不提供任何处理艺术指导的方法。

Answer 2

我使用 gatsby-remark-interactive-gifs plugin 在我的 gatsby 博客上显示 gif。

安装gatsby-remark-interactive-gifs

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

yarn 添加 gatsby-remark-interactive-gifs

将此配置添加到 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/.

！确保将其添加到 prismjs 配置之上。

MD 文件中的示例代码，用于在您的 gatsby 博客上显示 gif：

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

如何在我的 Gatsby 博客网站上有效地显示 GIF 图像？

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

performance

gif

reactjs

gatsby