reactjs - 如何在我的 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" />

就其值(value)而言，我不建议在 Gatsby (gatsby-transformer-sharp) 中使用 sharp-backed GraphQL 图像转换器。它非常慢，将表示与查询结合在一起，并且不提供任何处理艺术指导的方法。