Gatsby: [gatsby-remark-images]调整图像质量？

创建于 2017-10-28 · 3评论 · 资料来源: gatsbyjs/gatsby

是否可以在gatsby-remark-images内配置图像质量？我在Markdown中使用UI屏幕截图，并且压缩过于繁琐，以至于存在大量伪像。

从源头来看，我认为可以通过gatsby-plugin-sharp ？来控制它。 README提到：

对于JPEG，它会生成渐进图像，其默认质量等级为50。

如果实际上这是设置质量的原因，那么这似乎是明智的默认设置，但对于我的目的而言太低了。

此外，自述文件未公开这些选项是否有原因？将PR添加到各种自述文件中的PR是否会引起关注？

documentation question or discussion

资料来源

dustinhorton

最有用的评论

这也对我在graphql中起作用：

graphql`
{
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid(quality: 100, maxWidth: 1600) {
              src
              srcSet
              originalImg
              originalName
              aspectRatio
              sizes
            }
          }
        }
      }
    }
}
`

来自https://github.com/gatsbyjs/gatsby/issues/3984#issuecomment -364799710

taktran 于 2018-11-09

👍6

所有3条评论

是的，您可以传入quality密钥并输入一个0-100之间的数字，以覆盖默认质量50。我的希望是，我们选择一种标准的方式来记录/验证插件选项，以便可以由此自动生成文档。如果这听起来有点艰巨，而您想要解决的调查工作对生态系统来说将是巨大的好处。

KyleAMathews 于 2017-10-28

👍1

谢谢！效果很好。不确定如何启动更大的任务（会有所思考），但是肯定会通过一些文档更新。

对于后续的人，这里是您需要定义该键的地方：

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              quality: 80,
            },
          },
        ],
      },
    },
  ],
}

dustinhorton 于 2017-10-28

❤3 👍3

这也对我在graphql中起作用：

graphql`
{
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid(quality: 100, maxWidth: 1600) {
              src
              srcSet
              originalImg
              originalName
              aspectRatio
              sizes
            }
          }
        }
      }
    }
}
`

来自https://github.com/gatsbyjs/gatsby/issues/3984#issuecomment -364799710

taktran 于 2018-11-09

👍6

此页面是否有帮助？

0 / 5 - 0 等级

Gatsby: [gatsby-remark-images]调整图像质量？

最有用的评论

所有3条评论

相关问题