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

【问题标题】：How can I display GIF images efficiently in my Gatsby blog website?如何在我的 Gatsby 博客网站中有效地显示 GIF 图像？
【发布时间】：2021-02-25 01:14:10
【问题描述】：

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

【问题讨论】：

不要使用 gif。改用视频
当然，我知道使用视频比使用 gif 要好得多，但如果我必须使用 gif，那该怎么办？

标签： reactjs performance gatsby gif

【解决方案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) 中使用 GraphQL 图像转换器。它非常慢，将演示文稿与查询结合在一起，并且不提供任何处理艺术指导的方法。

【讨论】：

【解决方案2】：

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

安装gatsby-remark-interactive-gifs

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

添加 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">

【讨论】：