README

Gaussholder是一个图像占位符工具，使用极小的数据量生成精确的预览图像。

这是一张800字节的预览图像，用于一张109千字节的图像。800字节还是太大？在您的配置中调整大小到您喜欢的程度。

请注意：这仍然处于开发中，我们正在努力使其准备生产，因此某些事情可能还没有确定。特别是，我们仍在调整占位符大小和改进懒加载代码。请勿在生产环境中使用此工具。

它是如何工作的？

Gaussholder受到Facebook Engineering的精彩帖子的启发，该帖子介绍了生成微型预览图像的方法。Gaussholder从这篇文章中提取概念，并将其应用于WordPress的广阔世界。

简而言之，Gaussholder对图像应用高斯模糊以生成预览图像。高斯模糊作为一个低通滤波器，允许我们丢弃大量数据。然后我们通过删除JPEG头部并在客户端重建它来进一步减少每张图片的数据量（这从每张图片中消除了大约800字节）。

我们通过懒加载图像进一步减少某些请求的数据量。

我该如何使用它？

Gaussholder是为大量网站的高级用户设计的。请勿在您的常规WP网站上安装此插件。

1. 从此存储库下载并激活插件。
2. 选择要使用Gaussholder的图像大小，并将它们添加到gaussholder.image_sizes过滤器数组中。
3. 如果您有现有图像，请重新生成图像缩略图。

您的过滤器应类似于以下内容

add_filter( 'gaussholder.image_sizes', function ( $sizes ) {
	$sizes['medium'] = 16;
	$sizes['large'] = 32;
	$sizes['full'] = 84;
	return $sizes;
} );

键是注册的图像大小（包括full以表示原始大小），值是所需的像素模糊半径。

默认情况下，Gaussholder不会生成任何占位符，您需要选择使用它。只需在这里过滤，并添加您想要生成的尺寸名称。

请注意，对于您添加的每个尺寸，都会生成一个占位符并存储在数据库中。如果您有很多尺寸，这将需要大量数据。

默认情况下，Gaussholder使用DOMContentLoaded事件初始化。如果在页面加载后需要重新初始化Gaussholder，可以使用GaussHolder();实现。

模糊半径

模糊半径控制我们使用多少模糊。图像通过此因子预先缩放，这是占位符工作的关键。增加半径会成比例减少所需数据：半径为2使用与完整图像四分之一的数据量；半径为8使用1/64的数据量。（由于压缩，最终结果不会遵循此缩放。）

请谨慎调整此设置，因为过度减小半径会导致体中数据量巨大；增加它将导致数据量不足，无法作为有效的占位符。

需要单独调整每个尺寸的半径。Facebook为其占位符使用约200字节的数据，但您可能希望有更高质量的占位符。没有理想的半径，您只需要平衡有用占位符与处理页面数据所需额外时间之间的关系。

Gaussholder 包含一个 CLI 命令来帮助您调整半径：选择一个代表性的附件或图片文件，然后使用 wp gaussholder check-size <id_or_image> <radius>。调整半径，直到大约达到 200B，然后与其他附件进行比较，以确保它们大致相同。

注意：更改半径需要重新生成占位符数据。更改半径或添加新尺寸后，运行 wp gaussholder process-all --regenerate。

许可证

Gaussholder 使用 GPLv2 或更高版本的许可证。

Gaussholder 使用 StackBlur，该软件使用 MIT 许可证。

有关更多详细信息，请参阅 LICENSE.md。

致谢

由 Human Made 为大量和大规模网站创建。

由 Ryan McCue 编写和维护。感谢所有我们的 贡献者。（还要感谢 Matt 和 Paul 提供的初始占位符代码。）

Gaussholder 受 Facebook Engineering 的文章 Facebook Engineering's post 非常大，没有它将无法实现。特别是，在模糊之前进行降级和提取 JPEG 标头的技巧尤其新颖，是 Gaussholder 存在的关键。

想加入这个有趣的行列吗？ 加入我们，成为人类！