这是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个条件,对吗?相反,只有一个条件。我不确定我是否能够解释这种情况试图让浏览器做什么。
下面是我的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?
事实证明,由于我使用的是具有高DPI的设备,因此加载了高分辨率图像。所以它按预期工作。
在选择要显示的图像时,Web浏览器会将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)
您不必手动修改生成的流体对象,在查询图像时可以传入一个选项,如下所示:
{
file(ext: {
eq: ".png"
}) {
childImageSharp {
fluid(maxWidth: 800, sizes: "(min-width: 400px) 800px ,(min-width: 200px) 400px, 200px") {
srcSet
sizes
}
}
}
}
sizes =“(最大宽度:800px)100vw,800px”
这是gatsby-plugin-sharp
为流体图像生成的默认大小。它有两个规则:
(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
一些资源: