Squoosh：网站图像优化工具

？索引

1. 简介
2. Squoosh 是什么？
3. 延迟加载
4. 参考文献
5. 结论

---

1. 简介

网络通常以图像的使用为特征。您是否访问过没有图像的网站？我向你保证，事实并非如此。图像是网络中最出色的多媒体内容，因此学习管理图像对于提供具有良好用户体验的最佳网站非常重要。

2. Squoosh 是什么？

Squoosh 是一款安全且易于使用的开源工具，由 Google Chrome 开发团队创建和维护，可通过减轻图像重量来优化图像，但不会损失最终用户的演示质量。

我们可以访问其官方网站，您可以在其中上传图像，并根据您的使用案例，调整它们的重量和质量。

例如，我们加载一张.png格式的图片，大小为1.62Mb，经过优化后，我们可以得到同样大小为154Kb的图片，仅使用工具就可以优化90%：

我们可以看示例的demo来检查一下。

3. 延迟加载

管理图像优化的另一种简单方法是对未立即加载到用户视口中的图像使用延迟加载，这意味着通过避免请求可能不需要使用的图像来节省客户端的带宽。

让我们看一个简单的例子：

示例中的最后一张图片默认不会加载，因为它有属性loading="lazy"，这只会在用户滚动时加载它，这将向浏览器表明用户需要该图片，所以负担。

如您所见，这是一种非常简单的节省带宽的方法，并且本身就是纯 HTML。

4. 参考文献

Squoosh 官方存储库如下：

谷歌Chrome实验室 / 压扁

直接在浏览器中使用一流的编解码器缩小图像。

噗噗！

Squoosh 是一款图像压缩 Web 应用程序，可通过多种格式减小图像大小。

隐私

Squoosh 不会将您的图像发送到服务器。所有图像压缩均在本地处理。

但是，Squoosh 利用 Google Analytics 收集以下信息：

• 基本访客数据。
• 前后图像尺寸值。
• 如果是 Squoosh PWA，则为 Squoosh 安装的类型。
• 如果是 Squoosh PWA，安装时间和日期。

开发中

为 Squoosh 开发：

1. 克隆存储库
2. 要安装节点包，请运行：

   npm install
3. 然后通过运行以下命令构建应用程序：

   npm run build
4. 构建后，通过运行以下命令启动开发服务器：

   npm run dev

贡献

Squoosh 是一个开源项目，感谢所有社区的参与。要为该项目做出贡献，请遵循贡献指南。

在 GitHub 上查看

5. 结论

使用开源工具优化网站的图像对于提高网站的性能非常重要，与延迟加载等原生 HTML 功能相结合，可以带来显着且极其简单的性能提升。

---

您可能感兴趣的我的作者的其他帖子：

HTML5 中独有的原生手风琴？

克里斯蒂安·费尔南多·1 月 10 日

#webdev #html #css ＃前端

快速指南：在 Git 中制作良好提交消息的技巧？

克里斯蒂安·费尔南多 ・2024 年 12 月 20 日

#git #github ＃GitLab ＃西班牙语

如何在 Windows 上创建 SSH 密钥并将其连接到 Github？ ？

克里斯蒂安·费尔南多 ・24 年 12 月 13 日

#github #git ＃西班牙语 ＃GitLab

以上是Squoosh：网站图像优化工具的详细内容。更多信息请关注PHP中文网其他相关文章！