Html img 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">

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

我认为问题在于：

size=“（最大宽度：800px）100vw，800px”

应该有大约3个条件，对吗？相反，只有一个条件。我甚至不能确定我是否能够解释这个条件试图让浏览器做什么

下面是我的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\u with webp\u tracedSVG

生成

srcset

和

大小

。在文档中，我无法做任何事情来影响它们的生成方式。但是，我可能会在以后处理它们：

<Picture fluid={fluid} />

---

此时我是否应该操作

fluid.size

，或者是否有一种不太脏的方法来修复srcset？

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

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

---

尺寸=“（最大宽度：800px）100vw，800px”

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

（最大宽度：800px）100vw->如果视口<800px，则使用100vw
800px->默认情况下使用800px

所以浏览器应该。。。总是使用800px吗？ 你的规则应该是这样的：

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

（最小宽度：400px）800px，400，使用800px
（最小宽度：200px）400px，200，使用400px
200px结果显示加载了高分辨率图像，因为我使用的是具有高DPI的设备。因此，它按预期工作

当选择要显示的图像时，web浏览器将
devicePixelRatio
应用于其计算。例如，如果devicePixelRatio==2，则设备的典型像素量为2倍（相对于设备的物理宽度和与用户的物理距离）。当浏览器想要在这个设备上渲染一个“800像素宽”的图像时，它实际上需要一个1600像素宽的图像才能在这个高DPI的显示器上看起来很好

浏览器实际上遵循了
大小
规则。改编自德里克的回答：

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

（最大宽度：800px）100vw->如果视口<800px，则使用（100vw*devicePixelRatio）
800px->默认使用（800px*devicePixelRatio）
没错，我忘记了像素比率——这确实解释了为什么要加载大于800px的图像。只有一个警告，我不相信浏览器会在默认情况下将800px乘以devicePixelRatio——px是一个绝对单位。顺便说一句，我认为你应该保留
gatsby
标签-问题的一半是关于传递gatsby插件的自定义选项：）好的，编辑标签。浏览器实际上是将800px乘以devicePixelRatio；这就是我在最大宽度大于800px（默认情况下）时看到的行为。有趣！我试试看。谢谢你提出的有趣问题，干杯
(max-width: 800px) 100vw   -> If viewport < 800px, use (100vw * devicePixelRatio)
800px                      -> By default use (800px * devicePixelRatio)