aafenguk

程序员,旅游爱好者。 个人网站:https://www.aafeng.uk

Gatsby中的图片优化

發布於

Gatsby是现在比较流行的一个静态网站生成框架。通过它,可以快速的生成React网站,同时又解决了React应用SEO不友好的问题。这里主要说一说Gatsby中的图片优化问题。


Source: Gatsby官网

在默认情况下,可以把图片放于static目录中,然后在页面中直接引用就可以了.

但这种方式的缺点也是非常明显的:

  • 针对不同的设备,通常可以显示更为适合的图片。比如对于高清的大屏幕,可以显示分辨率最高的图片,但对于尺寸较小的手机,只需要显示分辨率较小的图片就可以了。这样就可以大大提高页面加载速度。
  • 懒加载。很多网站都实现了这个功能。在开始装载页面的时候,用户看到的是一个分辨率极低,但加载速度很快的模糊图片,随着页面加载的完成,该图片就会被一个高清图片替代。

通过实现以上的两点,可以大大提高用户体验。

在Gatsby中,可以通过几个插件来实现这样的功能。因此首先需要在Gatsby项目中安装插件:

npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

其中,gatsby-image的作用是支持在gatsby中使用图片

gatsby-transformer-sharp和gatsby-plugin-sharp的作用是处理image并在graphql层中提供相应的额外图片数据。这样就可以在应用中使用由gatsby优化过的图片,而不是固定的静态图片。

接下来创建src/images目录,并将图片,比如banner.jpg复制到该目录中。

更新gatsby-config.js配置文件。首先添加对以上插件的声明,同时添加对src/images目录的监视:

plugins: [
  'gatsby-transformer-sharp',
  'gatsby-plugin-sharp',
          ……
     {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
   }

重新启动gatsby:

gatsby develop

然后进行如下的graphql查询:

query MyQuery {
  file(relativePath: {eq: "banner.png"}) {
    childImageSharp {
      fluid {
        src
        srcSet
        sizes
      }
    }
  }
}

上面fluid中的查询也可以简写作:

fluid {
    ...GatsbyImageSharpFluid
}

其返回值为:

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "src": "/static/fa84b2b0a8b220dca8e981bfb0efac59/de334/banner.png",
          "srcSet": "/static/fa84b2b0a8b220dca8e981bfb0efac59/69585/banner.png 200w,\n/static/fa84b2b0a8b220dca8e981bfb0efac59/497c6/banner.png 400w,\n/static/fa84b2b0a8b220dca8e981bfb0efac59/de334/banner.png 798w",
          "sizes": "(max-width: 798px) 100vw, 798px"
        }
      }
    }
  },
  "extensions": {}
}

可以看到,gatsby的插件已经对banner.png进行了处理,并在static目录中生成了三个不同尺寸的图片:200px, 400px, 798px。

接下来就可以在应用中通过这组图片(srcSet)进行自适应了。比如在首页中使用这个banner,首先导入相应的模块:

import { graphql } from "gatsby"
import Img from 'gatsby-image'

然后在文件底部声明graphql查询:

export const query = graphql`
  query Banner {
    file(relativePath: {eq: "banner.png"}) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

然后就可以在页面组件中使用这个图片了:

export default function Home({data}) {
    // ...


    // ...
}

可以看到在浏览器中,gatsby已经为我们生成了一个picture标签,在加载图片时也会先显示较为模糊的图片,然后再加载清晰图片:


参考:gatsby image插件官网

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區