Picturefill 响应式网页图片展示解决方案

Z时代
2024-01-10
分类：IT

Picturefill 根据屏幕尺寸，展示不同尺寸的图片，使展示效果达到最好，比如在手机上，就展示小尺寸的图片，在 PC 上就展示完整尺寸的图片。

这个插件使用 picture 元素，srcset 和 sizes 属性，以及相关功能允许 Web 开发人员根据屏幕大小、视口大小、屏幕分辨率等各种条件向每个用户提供适当的图像。启用对 picture 元素和不支持它们的浏览器中的相关特性，因此您可以从今天开始使用它们。

快速使用

无论是浏览器问题、响应性的图像规范还是 PictuRefill 本身，您在使用 PictuRefill 时都应该注意到以下几个问题：

Firefox 38 和 39 有一些bug[1] [2] [3]其中的图像不会更新屏幕上的大小调整。这些问题由 PictuRefill 3.0.0 解决，并在 Firefox 41 中进行了修复。

根据 picture 规格，使用 %不是允许进入 sizes 属性。使用 % 会退却 100vw 。

试图使用 src 属性的不支撑 picture 本机可以导致双下载。为了避免这种情况，不要使用 src 属性的 img 标签：

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="default.png" alt="Sample pic" />
</picture>

如果您只想让图像以特定大小显示，而不想在其他大小上显示，则需要使用透明占位符f：

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt="Sample pic" />
</picture>

下载

Picturefill 3.0.2 稳定版

版本 3 是全重写的代码库，具有优化的性能、更好地模拟本机行为和更紧密地遵循以下特性的解析器。它还处理与第一代本机实现相关的许多怪癖、缺点和边缘情况。

picturefill.js (开发版本，无限制代码)

picturefill.min.js (制作版本，精简代码)

PICTUREILL版本2.3.1

PictuRefill 2 是一种轻量级的填充，可能与本机响应图像行为不完全匹配。不过，请注意因为最近修复的错误，您绝对不应该在2.3.1之前使用 Pictureill 的任何版本。如果是，请立即更新。这些下载包括 matchMedia.js 对于需要它的浏览器，比如 IE9。

picturefill.js (开发版本，无限制代码)

picturefill.min.js (制作版本，精简代码)

开始使用

要开始使用PictuRefill，请下载上面列出的一个文件，并从headHTML文档中包含以下代码的部分：

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

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

推荐使用：

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

请注意，如果您已经包含了HTML 5 Shiv的最新版本(有时与 Modernizr 一起打包)，您可能不需要这一行，因为它也包含在其中。另外，更高级的用户可能不需要这一点–可以选择使用脚本加载器(如Require.js)动态加载 Pictureill(脚本中包含了 AMD 和 CommonJS 支持)。

标记模式

一旦包含了pictuRefill.js，就可以开始向站点添加响应性图像元素了！Pictureill添加了对所有响应性图像解决方案的支持，包括picture元素与新img元素属性

使用 srcset 属性

这个srcset属性(没有sizes)用于提供更大(但在其他方面相同的)只用于高分辨率显示的图像源。

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

下面是在您的显示器上呈现的方式：

Picturefill 响应式网页图片展示解决方案

如果 intrinsic dimension plugin 已安装：2x源将自动缩小为2，因此图像将占用布局中与1x，但是2x源将以双像素密度显示。这只适用于天然的大小img-通过CSS或使用width内容属性的行为将与预期的一样。

支持srcset本机可以选择满足最小媒体条件的缓存文件，即使该文件对于当前媒体条件“过高”。例如，2x文件可以显示在1x设备，如果2x文件已经在缓存中了–毕竟，当用户看不到明显的差异时，就没有理由提出额外的请求了。通常情况下，只有在具有不同大小的多个元素中显示的同一图像的多个版本的站点上才会遇到这种情况(比如我们的演示页面)。偶尔选择“超大”资源–取决于缓存–目前是本机实现中的一种预期行为，您可能在测试期间遇到它。

最终srcset将被扩展为允许浏览器根据带宽限制或用户首选项覆盖对更高分辨率选项的请求(请参见响应图像用例和需求).

使用 srcset 和 sizes 属性

这个srcset和sizes语法用于为浏览器提供一个与其大小(相同的纵横比、相同的焦点)以及显示方式完全相同的图像源列表，然后允许浏览器选择最适合用户当前视图大小、显示密度和页面布局中该图像大小的源。

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

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

Picturefill 响应式网页图片展示解决方案

独立srcset和sizes演示

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

这超出了本指南的范围，无法深入了解如何使用新的srcset & sizes因此，我们强烈建议阅读Eric Portis的以下文章：Srcset和尺寸。记住同样的缓存行为应用于srcset，也是。

使用 `picture` 元素

这个picture元素用于在设置视口大小时对显示哪个源进行显式控制时使用。

这个picture元素比上面的示例需要更多的标记，但它允许您使用CSS 3 Media查询这样的特性，将图像源与设计中的布局条件进行配对，它们具有不同的大小、缩放级别和高宽比。但是，不应该使用它来提供完全不同的图像源–所有的源都必须由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>

下面是在当前视图大小下的呈现方式：

Picturefill 响应式网页图片展示解决方案

独立picture演示

你的picture元素应该包含一系列source元素后面跟着img元素。各source元素必须具有srcset属性指定一个或多个图像url源(如果需要，可以使用扩展的srcset语法进行分辨率切换)，img元素也应该有一个srcset属性作为回退用途(有些浏览器，比如Android2.3，不会看到source)。此外，还可以添加media属性，包含CSS 3媒体查询和/或sizes属性对srcset.

第一source带着media与用户上下文匹配的属性将确定img元素的末尾，因此在使用min-width媒体查询(如下面的示例所示)，当使用max-width媒体查询。因为这些图像源是用来对齐布局断点的，srcset氏缓存行为以及潜在的带宽或用户首选项覆盖不要在这里申请。

IE9 中的支持图片

而大多数IE版本(甚至更老的版本！)支持得很好，IE9有一些冲突需要解决。要支持IE9，您需要将video中的源元素的元素包装器。picture标签。您可以使用条件注释来完成此操作，如下所示：

<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 中使用图片填充时，在选择正确的源之前，可能会短暂地加载错误的图像。我们称之为“错误图像闪存”(Flashof 错误图像™)。防止这种情况的唯一方法是删除src和srcset在后备影像上。但是，值得注意的是，这可能会导致在旧的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>

Picturefill 响应式网页图片展示解决方案

独立扩展picture演示

`picture` 中的 type 属性

这个 types 属性用于发送备用图像源。格式只适用于支持这种格式的浏览器，以及不支持这种格式的浏览器的备用源。不像现有解决方案，picture元素使用单个请求进行这些协商。

PictuRefill支持SVG和WebP作为其核心的一部分，但是可以通过 type esupport 插件使用以下 MIME 类型：

image/bmp

image/xbmp

image/jp2

image/vnd.ms-photo

video/vnd.mozilla.apng

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

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

独立type属性演示

PictuRefill JavaScript API

在一般情况下，您可能不需要做更多的工作，只需在页面中包含pictuRefill.js，但在某些情况下，您可能希望自己手动运行pictuRefill函数，并且有几个选项需要记住：

PictuRefill 函数

js公开一个全局函数：picturefill()功能。picturefill()在加载页时自动调用一次或多次，并且在调整浏览器窗口的大小(或更改方向)时也会触发。您可以运行picturefill()函数本身也可以在任何时候使用JavaScript函数，在对DOM进行更新之后，或者当与应用程序相关的条件发生变化时，这可能很有用：

picturefill();

PictuRefill 函数选项

当运行picturefill()函数，可以传递指定下列配置选项的选项：

要素：一列img您希望图片填充来评估的元素。的默认值options.elements都是img元素的srcset属性或具有picture元素作为直接父元素。
```
picturefill({
  elements: [ document.getElementById( "myImg" ) ]});
```

重新评价：如果动态更改srcset, sizes属性，或修改source元素，请使用此重新评估选项，并提供您的变异对象的数组或类似数组的对象。img元素。作为另一种选择突变插件可以使用。
```
picturefill({
  reevaluate: true,
  elements: [ document.getElementById( "myImg" ) ]});
```

PictuRefill 插件/扩展

PictuRefill核心填充响应图像的核心部分，包括对srcset, sizes和picture/source.

为了提供干净和轻量级的填充，本机特性的某些方面被忽略了。如果您需要本机实现的特定行为，只需添加相应的插件即可。最好的方法是将所有脚本合并在一起。

内在维数这个扩展增加了对响应图像内在维度行为的支持。它是有用的，当你不使用CSS样式你的图片。

突变插件此插件自动检测任何DOM突变，并自动填充新的或更改的响应图像。它还增加了对响应性图像IDL属性/属性的支持。如果您有一个高度动态的网站或SPA，您可能想使用这个插件。(此插件不适用于IE8。)

类型支撑这个插件扩展了对 source[type] 属性并检测 JPG 2000、APNG 和 JPEG XR 支持。如果您想使用新的图像格式，您可能想要使用这个插件。

旧版本浏览器(IE6/7)：pictureill支持大多数浏览器，包括 IE8+。如果您需要支持 IE6/7，可以将旧插件与jQuery结合起来，添加对这些浏览器的支持。

源选择算法选项

默认情况下，PictuRefill 试图模仿当前的本机实现的资源选择算法，但是PictuRefill 3还包括一个可选的和实验性的自定义源选择算法。这个saveData算法将资源选择算法倾斜到较小的候选图像(2x在极高的dppx设备上(3x)，在可能很少或根本没有带宽的情况下节省带宽。视觉化不同来源之间的差异。

使用saveData，创建一个picturefillCFG在图片填充之前运行的数组：

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

开发人员对这个新算法的反馈是高度欢迎。我们希望看到一些关于潜在的带宽节约的数据，这些数据可能会在将来通知本机响应的映像实现。

浏览器支持

Pictureill支持广泛的浏览器和设备，只要您坚持上面记录的标记约定。

支持警告

Pictureill经过了广泛的测试，并在大量的浏览器中工作。尽管如此，它确实需要记住一些浏览器支持方面的注意事项：

PictuRefill 3包含一个小垫片，用于填充IE9和更早版本的常见媒体条件(min-width, max-width, min-height，和max-height)。如果其他媒体条件需要旧的IE支持，如orientation或aspect-ratio，请另外包括 matchMedia.js.

禁用JS的浏览器只看到ALT文本：当使用picture元素，非-picture支持浏览器只会看到alt当JavaScript失败或禁用时，属性文本作为后盾。这是因为noscript-基于此的解决方案(例如PictuRefill版本1中使用的解决方案)将导致未来的浏览器支持picture元素来显示两个图像，而不是在JavaScript关闭时显示一个图像。不幸的是，添加一个src属性具有外部源的img元素中的picture元素也不是一个很好的解决方法，因为现在存在的任何浏览器都会获取它。srcURL，即使它不会被使用(这是浪费)，并且是空的 src 可能导致意外请求。对于有效标记，src(不触发onerror事件或潜在请求)是
```
src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
```

的临时额外HTTP请求picture在某些浏览器中的使用情况：在本机支持的浏览器中srcset但不要支持picture元素时，用户可能会体验到每个用户浪费掉的HTTP请求picture元素。这是因为浏览器的准备程序将获取picture元素子img氏srcset属性在页面加载期间，在JavaScript评估潜在的picturesource更好匹配的元素。此问题只会影响已实现的浏览器。srcset但不是picture希望是短暂的。

源元素限制：像Android2.3和InternetExplorer 9这样的浏览器看不到source元素中的元素。picture元素。对于IE，video标记解决方案可以帮助我们避免这个问题，但是android仍然无法访问source元素。一定要提供srcset属性随函附上img以确保图像将在此浏览器中显示。

媒体属性支持需要本机媒体查询支持。这个 picture 元素(与pictureill配对)在支持CSS3媒体查询的浏览器中工作得最好。图片填充包括 matchMedia.js 默认情况下，这会使 MatiMedia 在不支持媒体查询的浏览器中工作。

Picturefill 响应式网页图片展示解决方案

快速使用

下载

Picturefill 3.0.2 稳定版

PICTUREILL版本2.3.1

开始使用

标记模式

使用 srcset 属性

使用 srcset 和 sizes 属性

使用 picture 元素

IE9 中的支持图片

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

MEDIA 和 SRCSET 语法：

picture 中的 type 属性

PictuRefill JavaScript API

PictuRefill 函数

PictuRefill 函数选项

PictuRefill 插件/扩展

源选择算法选项

浏览器支持

支持警告

相关链接

其他人也看了：

使用 `picture` 元素

`picture` 中的 type 属性