图片元素：是否需要在每个 srcset 属性中设置完整路径？

Question

响应式图像、用例和新的 HTML5 picture 元素在 this article 中得到了很好的解释。

更新：更具体地说，我的意思是响应式图像，针对不同设备调整大小的图像。更小的图像重量，所以faster loading sites。 最高可达72% less weight。

显示的示例只是文件名（没有路径），实际上它会更详细，例如：

<picture>
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.webp 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.webp 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.webp 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.webp 200w,
            wp-content/uploads/2015/03/opera-closeup-400.webp 400w,
            wp-content/uploads/2015/03/opera-closeup-800.webp 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.jpg 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.jpg 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.jpg 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.jpg 1800w,
            wp-content/uploads/2015/03/opera-fullshot-2000.jpg 2000w">
<img
    src="wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.jpg 200w,
            wp-content/uploads/2015/03/opera-closeup-400.jpg 400w,
            wp-content/uploads/2015/03/opera-closeup-800.jpg 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.jpg 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.jpg 2000w">
</picture>

每次都设置完整路径似乎很尴尬。

我更喜欢这个：

<picture pathset="http://example.com/wp-content/uploads/2015/03/">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.webp 200w,
            opera-fullshot-400.webp 400w,
            opera-fullshot-800.webp 800w,
            opera-fullshot-1200.webp 1200w,
            opera-fullshot-1600.webp 1600w,
            opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.webp 200w,
            opera-closeup-400.webp 400w,
            opera-closeup-800.webp 800w,
            opera-closeup-1200.webp 1200w,
            opera-closeup-1600.webp 1600w,
            opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.jpg 200w,
            opera-fullshot-400.jpg 400w,
            opera-fullshot-800.jpg 800w,
            opera-fullshot-1200.jpg 1200w,
            opera-fullshot-1600.jpg 1800w,
            opera-fullshot-2000.jpg 2000w">
<img
    src="http://example.com/wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.jpg 200w,
            opera-closeup-400.jpg 400w,
            opera-closeup-800.jpg 800w,
            opera-closeup-1200.jpg 1200w,
            opera-closeup-1600.jpg 1600w,
            opera-closeup-2000.jpg 2000w">
</picture>

顺便说一句，为了可读性和编程逻辑，我更喜欢响应式 路径中的东西不在文件名中。你可以这样做

<picture pathset=/pathtoimages/>
 <source fileset=opera-fullshot.webp
      sizes="(min-width: 640px) 60vw, 100vw"
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
...
<source fileset=opera-closeup.webp
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
</picture>

如果您放弃对某个宽度的支持，只需删除该目录即可。

但主要问题是，我们需要为 1 张图片编写大量代码。

所以，为了限制（没有任何 JS 解决方案）：

我可以设置类似 pathsrc 属性或作用域 base 元素吗？

Answer 1

没有。

在 srcset 中使用模板语法是一个显而易见的想法。事实上，它是earliest srcset draft 的一部分。但是，URL 可以并且确实包含任何内容，并且并不总是映射到模板（例如为不同图像生成的 GUID），因此它不起作用。

理论上你可以使用 XHTML 和xml:base。在实践中，您不使用 XHTML，并且 xml:base 支持是 removed from 浏览器。

我建议不要太担心重复，只要确保使用 gzip。

Answer 2

免责声明这不是您问题的解决方案。但是响应式图像的解决方案

SVG

有一个响应式 svg 图片的例子：

circle {
  fill: firebrick;
}
svg {
  border: 1px solid black;
}

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="50" fill="DarkOrange" />
  <rect x="40" y="40" width="50" height="50" fill="SeaGreen" />
  <circle cx="50" cy="50" r="30" />
</svg>

按运行代码sn-p，然后按整页进行测试。

CSS

或者您可以简单地使用适当缩小的图像：

body {
  width: 100%;
}
.container {
  width: 100%;
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="container">
  <img src="http://i.ytimg.com/vi/4rY4PlSCy48/maxresdefault.jpg" />
</div>