详细解释Blogger.com或BlogSpot的延迟加载图片和webP图片发布功能

最近SpotBlog Blogger添加了两个新特性

• 延迟加载图片(Lazy Load)
• WebP图片发布(Webp Image Format)

延迟加载图片(Lazy Load)

这是浏览器级别的图像延迟加载，因此不需要脚本。如果你启用了这个选项，Blogger会将loading ='lazy'属性添加到<img>post/page中的所有标签中。主题的其他元素必须手动编辑。

当我们浏览网页端的时候，只有下滑到的对应的图像后，图像才会显示出来。

参考：https://web.dev/browser-level-image-lazy-loading/#the-loading-attribute

WebP图片发布(Webp Image Format)

启用这个选项后，Blogger只会在文章或页面里的图片网址后面加上-rw参数（紧跟在宽度和高度参数之后）。例如：

原来：/w640-h450/

现在：/w640-h450-rw/

我的浏览器会把带有-rw的图片识别为WEBP格式的图片，即使它们的扩展名还是.jpg或.png。如果您想把这个功能应用到主题里的其他图片，您需要手动修改代码。

有了这个选项以后，我们就不用自己的手动去添加的-rw选项了。

-rw的作用演示

在 Blogger 中使用 WebP 图像您可能无法通过 Blogger 上传 WebP 格式的图片，但您绝对可以通过图像网址（实时转换）来使用 WebP 格式。

• 将您的图片上传到帖子中。
• 切换帖子至 HTML 编辑器。
• 找到您的 img 标签。
• 例如，您的 src 如下所示： https://2.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s1600/ramdom-image.jpg
• 只需查找跟随某些数字的字母 s（图片尺寸）。
• 在其后添加 -rw 后缀，像这样：https://2.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s1600-rw/random-image.jpg 检查 WebP 格式 确认图片是否为 WebP 格式， 完成 -rw 添加步骤后，转到博客帖子页面。 在本地设备中保存帖子的图片。 图片以 WebP 格式保存。

测试 WebP 的效率，

在 -rw 添加步骤之前访问 Google Pagespeed 工具。 测试您网站的速度。 在 -rw 添加步骤之后访问 Google Pagespeed 工具。 测试您网站的速度。

注意速度上的差异。

因此，我们可以确认 WebP 格式可以在保持类似或更好的图像质量的情况下，比标准 JPEG 压缩更有效地减少图像文件大小，而不会降低网站的加载速度。

参考

[1] https://support.google.com/blogger/thread/237007132/blogger-lazy-load-and-webp-image-format-system?hl=en

[2] https://amprandom.blogspot.com/2020/07/how-is-blogger-supporting-webp-image.html

---