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的可读性和编程逻辑我更喜欢响应式不在文件名中的路径中的东西。你可以做到这一点
<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 属性或作用域基础元素吗？

Answer 1

不。

在srcset中使用模板语法是一个明显的想法。实际上它是earliest srcset draft的一部分。但是，网址可以并且确实包含任何内容，并且不会始终映射到模板（例如，为不同的图像生成GUID），因此它无法正常工作。

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

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

Answer 2

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

SVG

＆lt; svg＆gt;元素是highly supported.

有一个响应式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>

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

2 个答案:

SVG

CSS