README

概述

提供LQIP（低质量图像占位符）和GIP（灰度图像占位符），包括base64编码的URL数据。

它还包含一个方法，用于使用Harry Roberts描述的LCP LQIP，这样您就可以使用LQIP，使其作为LCP图像，而高分辨率图像稍后替换。感谢Harry的魔法；)

要求

Silverstripe Assets ^2.2 (Silverstripe ^5.2)

安装

使用composer安装模块

composer require innoweb/silverstripe-image-placeholders dev-master

然后运行dev/build。

使用方法

确保在生成占位符图像之前完成任何调整大小。

执行： <img src="$Image.Fill(200,200).GIP.DataURL" width="200" height="200">

不要执行： <img src="$Image.GIP.Fill(200,200).DataURL" width="200" height="200">

通过JavaScript实现懒加载

您可以使用这些占位符来加载通过JavaScript懒加载的图像，例如。

<img src="$Image.LQIP.DataURL" 
	data-src="$Image.URL.ATT" 
	width="$Image.Width" 
	height="$Image.Height" 
	class="lazyload">

然后使用 lazysizes 加载图像。

这使用LQIP的Base64编码数据URL作为占位符，然后懒加载高分辨率图像。

原生懒加载

您还可以使用这些占位符来加载原生懒加载的图像

<img src="$Image.URL.ATT" 
	width="$Image.Width" 
	height="$Image.Height" 
	style="background-image: url($Image.LQIP.DataURL); 
		background-repeat: no-repeat; 
		background-size: cover;" 
	loading="lazy">

这使用LQIP的Base64编码数据URL作为实际图像加载时的背景。

作为LCP图像的占位符

Harry Roberts在一篇博客文章中描述了如何设置LQIP，使其被视为LCP图像，稍后替换高分辨率图像。

此模块通过LCPLQIP方法支持此行为。

您可以使用以下设置使用Google描述的每像素位（BPP）阈值

Innoweb\ImagePlaceholders\ImageExtension:
  min_bits_per_pixel: 0.055

默认情况下，此设置设置为0.055，这给Google定义的值增加了额外的10%以确保安全。

要使用LCP LQIP图像，请预加载LQIP图像并将其设置为实际图像的背景

<head>
  ...
  <link rel="preload" as="image" href="$Image.LCPLQIP.URL.ATT" fetchpriority="high">
  ...
</head>
<body>
  ...
  <img src="$Image.URL.ATT" 
    width="$Image.Width" 
    height="$Image.Height" 
    style="background: #eee url($Image.LCPLQIP.URL.ATT) no-repeat; 
      background-size: cover;">
  ...
</body>

这样，当页面渲染时，LQIP图像已经加载，然后下载并替换高分辨率图像。（如果LQIP尚未可用，则CSS背景颜色用作另一种后备选项。）

因为LCPLQIP图像超过了BPP阈值，并且高分辨率图像与LCPLQIP图像具有相同的尺寸，所以LCPLQIP图像被视为LCP图像，而不是高分辨率图像。

许可

BSD 3-Clause License，请参阅许可

innoweb / silverstripe-image-placeholders

维护者

详细信息

README

概述

要求

安装

使用方法

通过JavaScript实现懒加载

原生懒加载

作为LCP图像的占位符

许可