README

ProcessWire模块，用于生成图像占位符，以实现更平滑的懒加载。

支持ThumbHash、BlurHash和平均颜色占位符。

为什么使用图像占位符？

低质量图像占位符（LQIP）通过在高质量版本加载的同时显示图像的较小、低质量版本，来改善网站的感知性能。LQIP技术与渐进式懒加载技术常常结合使用。

工作原理

该模块将自动为每个上传到配置为使用占位符的字段中的图像生成一个小的模糊图像占位符。在您的前端模板中，您可以通过数据URI字符串访问图像占位符，在高质量图像加载时显示。下面是标记示例。

占位符类型

该模块支持生成各种类型的图像占位符。推荐类型是ThumbHash，它编码了大多数细节，并支持透明图像。

ThumbHash

ThumbHash是一种较新的图像占位符算法，具有改进的颜色渲染和透明度支持。

BlurHash

BlurHash是原始的占位符算法，由Wolt开发。目前它不支持alpha通道，将以黑色渲染透明度。

平均颜色

计算图像的平均颜色。

安装

使用composer从ProcessWire安装的根目录安装该模块。

composer require daun/processwire-image-placeholders

打开您网站的admin面板，导航到模块 → 站点 → ImagePlaceholders以完成安装。

配置

您需要配置图像字段以生成图像占位符。

设置 → 字段 → [images] → 详细信息 → 图像占位符

在那里，您可以选择要生成的占位符类型。如果您在现有网站上安装该模块，也可以选择为任何现有图像批量生成占位符。

使用方法

访问图像的lqip属性将返回其占位符的数据URI字符串。

$page->image->lqip; // data:image/png;base64,R0lGODlhEAAQAMQAA

将其作为方法访问允许设置占位符的自定义宽度和/或高度。

$page->image->lqip(300, 200); // 300x200px

标记

使用像lazysizes或vanilla-lazyload这样的懒加载库，您可以通过将其数据URI作为图像的src来显示占位符图像。

<!-- Using the placeholder as src while lazyloading the image -->
<img
  src="<?= $page->image->lqip ?>"
  data-src="<?= $page->image->url ?>"
  data-lazyload
/>

另一种技术是将占位符和原始图像作为单独的图像重叠渲染。这允许在模糊未加载状态和最终加载状态之间进行更平滑的动画。

<!-- Display placeholder and image on top of each other -->
<div class="ratio-box">
  <img src="<?= $page->image->lqip ?>" aria-hidden="true">
  <img data-src="<?= $page->image->url ?>" data-lazyload>
</div>

支持

请提交问题以获取支持。

鸣谢

Blue Tomato已弃用的ImageBlurhash模块启发了本模块，并为其设定了标准。

许可

MIT

daun / processwire-image-placeholders

维护者

详细信息