Picturefill

响应式图像polyfill

RICG正式认可

picture元件,srcsetsizes属性,以及相关联的特征,网站开发者根据多种的像屏幕大小,视口大小,屏幕分辨率,以及多个条件提供适当的图像到每个用户。Picturefill支持picture在尚不支持它们的浏览器中支持元素和相关功能,因此您可以立即开始使用它们!

Picturefill发展是赞助,并通过保持Picturefill队正在进行的项目讨论是通过Slack进行的

贡献,错误报告和更多信息

有关Picturefill开发以及如何提交错误或提供修复的更多信息,请查看GitHub上的项目。

正在下载Picturefill

Picturefill 3.0.2版(稳定版)

版本3是Picturefill代码库完全重写,具有优化的性能,更好的本机行为仿真,以及更加贴近规范的解析器它还处理许多与第一代本机实现相关的怪癖,缺点和边缘情况。

对此版本的反馈非常欢迎 - 如果您遇到任何问题,请在GitHub上提交问题

Picturefill版本2.3.1

Picturefill 2是一种轻量级的polyfill,可能与原生响应式图像行为不完全匹配。但请注意,由于最近修复的错误,您绝对不应该在2.3.1之前使用任何版本的Picturefill。如果是,请立即更新。这些下载包括适用于需要它的浏览器matchMedia polyfill(如IE9)。

Picturefill入门

要开始使用Picturefill,请下载上面列出的文件之一,并head使用以下代码HTML文档部分引用它

<script src="picturefill.js"></script>

为了更有效地加载页面,我们建议您async也为该script标记添加属性这告诉浏览器它可以异步加载图片填充,而无需在加载文档的其余部分之前等待它完成。如果添加此属性,则需要在script标记之前添加一行脚本,以允许旧版浏览器识别picture元素,如果它们在picturefill加载完成之前在页面中遇到它们。

推荐用法:

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js" async></script>
</head>

请注意,如果您已经包含最新版本的HTML5 Shiv(有时与Modernizr一起打包),您可能不需要此行,因为它也包含在内。此外,更高级的用户可能不需要这可能选择使用像Require.js这样的脚本加载器动态加载Picturefill(脚本中包含AMD和CommonJS支持)。

标记模式

一旦你包含picturefill.js,你就可以开始向你的网站添加响应式图像元素了!Picturefill增加了对整套响应式图像解决方案的支持,包括picture元素和新img元素属性。

响应式图像规范的某些功能组合解决了许多不同的用例 -这些是最常见的一些:

使用`srcset`属性

srcset属性(无sizes)被用来服务于较大但其他方面相同的图像源以仅仅高分辨率显示器。

<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">

以下是您在显示屏上呈现的方式:

在Bayon寺庙的一张巨型石面孔在吴哥城,柬埔寨

如果安装固有维度插件2x源将自动按比例缩小2 - 这样图像将占用布局中与图像相同的空间1x,但2x源将以像素密度的两倍显示。这仅适用于通过CSS调整图像自然大小,img或者width内容属性将按预期运行。

srcset本机支持的现代浏览器可以选择满足最小媒体条件的高速缓存文件,即使它对当前媒体条件“过度杀伤”也是如此。例如,如果该文件已经在缓存中,则2x可以在1x设备上显示2x文件 - 毕竟,当用户看不到任何可辨别的差异时,没有理由发出额外的请求。这通常仅在具有不同大小的多个元素中显示的相同图像的多个版本的站点上遇到(例如我们的演示页面)。偶尔选择的“超大”资源(取决于缓存)目前是本机实现中的预期行为,您可能会在测试期间遇到它。

最终srcset将扩展为允许浏览器根据带宽限制或用户偏好覆盖对更高分辨率选项的请求(请参阅响应图像用例和要求中的#9 )。

使用`srcset`和`sizes`属性

这些srcsetsizes语法用于为浏览器提供一个图像源列表,这些图像源的大小相同(相同的宽高比,相同的焦点)以及它们将如何显示,然后允许浏览器选择最适合的源用户的当前视口大小,显示密度以及页面布局中该图像的大小。

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w"
  alt="…">

以下是以当前视口大小在显示器上呈现的方式:

在Bayon寺庙的一张巨型石面孔在吴哥城,柬埔寨 独立srcsetsizes演示

sizes语法用于定义你的形象会在你的布局占据的空间。srcset然后定义图像列表及其固有宽度。这允许浏览器为布局的该部分中可用的大小选择最小的适当源,而不仅仅是视口大小。

详细了解如何使用新的srcsetsizes属性超出了本指南的范围,因此我们强烈建议您阅读Eric Portis的以下文章:Srcset和Sizes请记住,同样的缓存行为也适用于此用法srcset

使用`picture`元素

picture当您需要显式控制在设置视口大小时显示哪个源时,将使用元素。

picture元素需要比上面的示例更多的标记,但它允许您使用CSS3 Media Queries等功能将图像源与不同大小,缩放级别和宽高比配对,以及设计中的布局条件。但是,它不应该用于服务完全不同的图像源 - 所有的源都必须用alt内部属性来描述img

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="examples/images/art-medium.jpg" alt="…">
</picture>

以下是以当前视口大小呈现的方式:

在Bayon寺庙的一张巨型石面孔在吴哥城,柬埔寨 独立picture演示

您的picture元素应包含一系列source元素,后跟img元素。每个source元素必须具有一个srcset属性,指定一个或多个图像URL源(如果需要可以使用扩展的srcset语法进行分辨率切换),该img元素应具有srcset属性以用于回退目的(某些浏览器,如Android 2.3的赢取'看到source元素)。此外,您可以添加media包含CSS3媒体查询的sizes属性和/或要配对属性srcset

第一个source具有media与用户上下文匹配的属性将决定img结尾处元素的src ,因此您将希望在使用min-width媒体查询时首先显示更大的选项(如下面的示例中所示),并且在使用max-width媒体时使用更大的选项查询。由于这些图像源是为了与布局断点对齐,srcset缓存行为,并为潜在的带宽或用户偏好覆盖不适用于此。

在Internet Explorer 9中支持图片

虽然IE的大多数版本(甚至更老版本!)都得到了很好的支持,但是IE9有一点冲突可以解决。要支持IE9,您需要videopicture标记中的源元素周围包装元素包装器您可以使用条件注释来执行此操作,如下所示:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="examples/images/medium.jpg" alt="…">
</picture>

在Safari上防止错误图像的闪光

有时在Safari中使用图片填充时,错误的图像可能会在选择正确的源之前暂时加载。我们称之为Flash of Wrong Image™。防止这种情况的唯一方法是删除srcsrcset后备图像。但是,重要的是要注意,这可能会导致图像显示在旧的Android设备上(2.3)

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img alt="…">
</picture>

`media`和`srcset`语法:

1x/ 2x可使用语法内source元件srcset作为用于更复杂的分辨率的媒体的查询的速记属性。

<picture>
  <source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
  <img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="…">
</picture>
在Bayon寺庙的一张巨型石面孔在吴哥城,柬埔寨 独立扩展picture演示

`picture`中的`type`属性

types属性仅用于向支持该格式的浏览器发送备用图像源格式,而不向浏览器发送备用源。现有解决方案不同,该picture元素使用单个请求进行这些协商。

Picturefill支持SVG和WebP作为其核心的一部分,但可以通过“typesupport”插件使用以下MIME类型:

<picture>
  <source srcset="examples/images/large.webp" type="image/webp">
  <img srcset="examples/images/large.jpg" alt="…">
</picture>

以下是在浏览器中呈现的方式:

在Bayon寺庙的一张巨型石面孔在吴哥城,柬埔寨 独立type属性演示

Picturefill JavaScript API

在通常情况下,您可能不需要在页面中包含picturefill.js,但在某些情况下,您可能希望自己手动运行picturefill的功能,并且有几个选项要记住:

Picturefill功能

Picturefill.js公开了一个全局函数:picturefill()函数。picturefill()在页面加载时自动调用一次或多次,并且在调整浏览器窗口大小时(或在方向更改时)也会触发它。您也可以picturefill()随时在JavaScript中运行该函数,这在对DOM进行更新或与您的应用程序相关的条件发生变化时可能很有用:

picturefill();

Picturefill功能选项

运行该picturefill()功能时,您可以传递指定以下配置选项的选项:

Picturefill插件/扩展

Picturefill核心polyfills响应图像,包括全面支持最核心的部分srcsetsizespicture/ source

省略了原生特征的某些方面以提供清洁且轻质的填充物。如果您需要未包含在picturefill核心中的本机实现的特定行为,只需添加相应的插件即可。最好的方法是将所有脚本合并在一起。

源选择算法选项

默认情况下,Picturefill尝试模仿资源选择算法当前的本机实现,但Picturefill 3还包括可选的和实验性的自定义源选择算法。saveData算法将资源选择算法偏向较小的图像候选者(2x在极高的dppx设备(3x和更高)上),以在源之间可能存在很少或没有视觉差异的情况下节省带宽

要使用saveData,请创建一个picturefillCFG在picturefill之前运行数组:

//generating the config array
window.picturefillCFG = window.picturefillCFG || [];
picturefillCFG.push([ "algorithm", "saveData" ]);

开发人员对这种新算法的反馈非常受欢迎。我们希望看到有关潜在带宽节省的一些数据,这些数据可能会继续为未来的原生响应式图像实施提供信息。

浏览器支持

Picturefill支持各种浏览器和设备,只要您坚持上面记录的标记约定。

支持警告

Picturefill经过广泛测试,可在大量浏览器中使用。也就是说,它确实需要考虑一些浏览器支持注意事项: