为什么 srcset 属性只有在 img 标签中的 src 属性之前使用时才能正常工作
Why is the srcset attribute only working correctly when used before the src attribute in img tags
我有一个谜。这个问题本身现在已经解决了，但我仍然看不出真正的原因：在我们的图像共享网站 Pixabay.com 上，我们最近为搜索结果的 img 标签实现了 srcset 属性.您可以在此处看到实际效果：https://pixabay.com/photos/
那里的典型 img 标签如下所示：
<img src="/image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" alt="...">
效果非常好 - 对于大约 99% 的用户来说。但是，一些人报告看到了此屏幕截图中描述的问题：
页面上正确加载了大约 30-50 张图像，而其他图像则导致图像损坏。我们意识到，我们的 NGINX 日志包含一些这样的错误：
open() "/.../image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" failed (2: No such file or directory)
显然，由于未知原因，客户端请求了整个表达式（src 的值+"srcset"+srcset 的值）作为图像路径，这当然导致错误 404。
我们玩了一下，发现，首先在 img 标签上提供 srcset 然后 src 属性解决了这个问题。不再有错误日志，不再有投诉。
<img srcset="/image__180.jpg 1x, /image__340.jpg 2x" src="/image__180.jpg" alt="...">
我在网上找不到任何关于此行为的报告。但我想了解更多。这是在 Pixabay 上与几个用户报告问题的讨论：https://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2
你有解释吗？
浏览器绝对没有办法正常搞砸它。 HTML 解析器是坚如磐石的，它们不会随机地吃掉属性的额外字节。
这绝对是一个代理或其他一些以某种方式破坏标记的 MITM。我建议放入一些 JS，它可以快速检查页面上的所有 src 属性并检查是否包含 "srcset"，如果包含，请尽可能多地记录有关 UA 或其他内容的信息，以便您可以尝试查找他们之间的共同点。
怀疑它可能是一些奇怪的代理 examining/rewriting 来源，使用像 /image.*.jpg/ 这样的正则表达式并将其重写回 URL-escaped。这将捕获从 src 图像开始到 srcset 中最终 .jpg 的所有内容，并转义它们之间的所有空格和引号，这样您就可以获得一个大的 src属性值。
或者，由于这显然是通过 HTTPS 传送的，这减少了代理重写的可能性，它可能是一个行为不当的扩展。
我有一个谜。这个问题本身现在已经解决了，但我仍然看不出真正的原因：在我们的图像共享网站 Pixabay.com 上，我们最近为搜索结果的 img 标签实现了 srcset 属性.您可以在此处看到实际效果：https://pixabay.com/photos/
那里的典型 img 标签如下所示：
<img src="/image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" alt="...">
效果非常好 - 对于大约 99% 的用户来说。但是，一些人报告看到了此屏幕截图中描述的问题：
页面上正确加载了大约 30-50 张图像，而其他图像则导致图像损坏。我们意识到，我们的 NGINX 日志包含一些这样的错误：
open() "/.../image__180.jpg" srcset="/image__180.jpg 1x, /image__340.jpg 2x" failed (2: No such file or directory)
显然，由于未知原因，客户端请求了整个表达式（src 的值+"srcset"+srcset 的值）作为图像路径，这当然导致错误 404。
我们玩了一下，发现，首先在 img 标签上提供 srcset 然后 src 属性解决了这个问题。不再有错误日志，不再有投诉。
<img srcset="/image__180.jpg 1x, /image__340.jpg 2x" src="/image__180.jpg" alt="...">
我在网上找不到任何关于此行为的报告。但我想了解更多。这是在 Pixabay 上与几个用户报告问题的讨论：https://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2
你有解释吗？
浏览器绝对没有办法正常搞砸它。 HTML 解析器是坚如磐石的，它们不会随机地吃掉属性的额外字节。
这绝对是一个代理或其他一些以某种方式破坏标记的 MITM。我建议放入一些 JS，它可以快速检查页面上的所有 src 属性并检查是否包含 "srcset"，如果包含，请尽可能多地记录有关 UA 或其他内容的信息，以便您可以尝试查找他们之间的共同点。
怀疑它可能是一些奇怪的代理 examining/rewriting 来源，使用像 /image.*.jpg/ 这样的正则表达式并将其重写回 URL-escaped。这将捕获从 src 图像开始到 srcset 中最终 .jpg 的所有内容，并转义它们之间的所有空格和引号，这样您就可以获得一个大的 src属性值。
或者，由于这显然是通过 HTTPS 传送的，这减少了代理重写的可能性，它可能是一个行为不当的扩展。