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

Posted 2023-03-22

【中文标题】如何在我的 Gatsby 博客网站中有效地显示 GIF 图像？

【英文标题】：How can I display GIF images efficiently in my Gatsby blog website?

【发布时间】：2021-02-25 01:14:10

【问题描述】：

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

【问题讨论】：

不要使用 gif。改用视频

当然，我知道使用视频比使用 gif 要好得多，但如果我必须使用 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">