Question

这是Gatsby生成的图像srcset：

<source type="image/webp" srcset="
/static/be21c7dd0d11c74c18530fc39aefa922/10917/mailboxes.webp 200w,
/static/be21c7dd0d11c74c18530fc39aefa922/21f2d/mailboxes.webp 400w,
/static/be21c7dd0d11c74c18530fc39aefa922/fdc6a/mailboxes.webp 800w,
/static/be21c7dd0d11c74c18530fc39aefa922/e7f3d/mailboxes.webp 1200w,
/static/be21c7dd0d11c74c18530fc39aefa922/faacb/mailboxes.webp 1600w,
/static/be21c7dd0d11c74c18530fc39aefa922/acdd2/mailboxes.webp 1800w" 
sizes="(max-width: 800px) 100vw, 800px">

我的图像显示在一个最大为800px宽的容器中，所以这是我希望浏览器选择的方式：

if screenWidth > 400 then choose 800w
if screenWidth > 200 then choose 400w
else choose 200w

但是，浏览器实际上总是选择尽可能大的图像（即使我将浏览器的大小调整为200宽度）。

我相信问题就在这里

sizes="(max-width: 800px) 100vw, 800px"

应该有〜3个条件，对吗？相反，只有1个条件。我不确定我什至无法解释这种情况正在试图要求浏览器执行的操作。

下面是我的GraphQL代码：

edges {
    node {
      excerpt
      fields {
        slug
        prefix
      }
      frontmatter {
        title
        tags
        cover {
          children {
            ... on ImageSharp {
              fluid(maxWidth: 800, maxHeight: 360, traceSVG: { color: "#f9ebd2" }) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
      }
    }
  }

片段...GatsbyImageSharpFluid_withWebp_tracedSVG生成srcset和sizes。在文档中，我无法做任何事情来影响它们的生成方式。但是，我以后可能会操纵它们：

<Picture fluid={fluid} />

这时我应该操纵fluid.sizes，还是有一种更简单的方法来修复srcset？

Answer 1

您不必手动修改生成的流体对象，可以在查询图像时传递一个选项，如下所示：

{
  file(ext: {
    eq: ".png"
  }) {
    childImageSharp {
      fluid(maxWidth: 800, sizes: "(min-width: 400px) 800px ,(min-width: 200px) 400px, 200px") {
        srcSet
        sizes
      }
    }
  }
}

sizes =“（最大宽度：800像素）100vw，800像素”

这是gatsby-plugin-sharp为流体图像生成的默认尺寸。它有2条规则：

(max-width: 800px) 100vw   -> If viewport < 800px, use 100vw
800px                      -> By default use 800px

所以浏览器应该...始终使用800px？您的规则可能应该是这样的：

(min-width: 400px) 800px, <-- if > 400, use 800px
(min-width: 200px) 400px, <-- if > 200, use 400px
200px <-- else use 200px

一些资源：

Responsive Images Done Right: A Guide To And srcset

gatsby-plugin-sharp | default sizes

Answer 2

事实证明，由于使用的DPI高，因此已加载了高分辨率图像。因此它按预期工作。

当选择显示哪个图像时，网络浏览器会将devicePixelRatio应用于其计算。例如，如果devicePixelRatio == 2，则设备的典型像素数量是相对于设备的物理宽度以及到用户的物理距离的2倍。当浏览器想要在此设备上呈现“ 800像素宽”的图像时，实际上需要一个1600像素宽的图像才能使其在这种高DPI显示器上看起来不错。

浏览器实际上遵循sizes规则。改编自Derek的答案：

(max-width: 800px) 100vw   -> If viewport < 800px, use (100vw * devicePixelRatio)
800px                      -> By default use (800px * devicePixelRatio)

img srcset，浏览器选择的图像过大

2 个答案: