图片元素：是否需要在每个 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>

BTW for readability and programming logic I prefer the responsive stuff in the path not in filename. The you can do this
<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>
If you drop support for a certain width, just delete the directory.

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

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

我可以设置类似 pathsrc 属性或范围 base 元素的东西吗？

Answer 1

Disclaimer this is not an solution to your question. But a solution for responsive images

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>

按运行代码段然后整页进行测试出来了。

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>

Answer 2

没有。

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

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

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

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

Picture element: do I need to set the full path in every scrset attribute?

html

image

responsive-design

picture-element

SVG

CSS