1

本文picture很好地解释了响应式图像、用例和新的 HTML5元素。

更新：更具体地说，我的意思是响应式图像，针对不同设备调整大小的图像。更小的图像重量，因此更快的加载网站。重量减轻多达72%。

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

<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属性或作用域的基本元素吗？

4

2 回答 2

2

没有。

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

理论上，您可以使用 XHTML 和xml:base. 实际上，您不使用 XHTML，并且xml:base正在从浏览器中删除支持。

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

于 2015-07-09T21:08:56.143 回答
0

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

SVG

<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>

按run code snippet和 然后Full page进行测试。

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>

于 2015-07-05T10:55:03.570 回答