网络通常以图像的使用为特征。您是否访问过没有图像的网站?我向你保证,事实并非如此。图像是网络中最出色的多媒体内容,因此学习管理图像对于提供具有良好用户体验的最佳网站非常重要。
Squoosh 是一款安全且易于使用的开源工具,由 Google Chrome 开发团队创建和维护,可通过减轻图像重量来优化图像,但不会损失最终用户的演示质量。
我们可以访问其官方网站,您可以在其中上传图像,并根据您的使用案例,调整它们的重量和质量。
例如,我们加载一张.png格式的图片,大小为1.62Mb,经过优化后,我们可以得到同样大小为154Kb的图片,仅使用工具就可以优化90%:
我们可以看示例的demo来检查一下。
管理图像优化的另一种简单方法是对未立即加载到用户视口中的图像使用延迟加载,这意味着通过避免请求可能不需要使用的图像来节省客户端的带宽。
让我们看一个简单的例子:
示例中的最后一张图片默认不会加载,因为它有属性loading="lazy",这只会在用户滚动时加载它,这将向浏览器表明用户需要该图片,所以负担。
如您所见,这是一种非常简单的节省带宽的方法,并且本身就是纯 HTML。
Squoosh 官方存储库如下:
Squoosh 是一款图像压缩 Web 应用程序,可通过多种格式减小图像大小。
Squoosh 不会将您的图像发送到服务器。所有图像压缩均在本地处理。
但是,Squoosh 利用 Google Analytics 收集以下信息:
为 Squoosh 开发:
npm install
npm run build
npm run dev
Squoosh 是一个开源项目,感谢所有社区的参与。要为该项目做出贡献,请遵循贡献指南。
使用开源工具优化网站的图像对于提高网站的性能非常重要,与延迟加载等原生 HTML 功能相结合,可以带来显着且极其简单的性能提升。
您可能感兴趣的我的作者的其他帖子:
以上是Squoosh:网站图像优化工具的详细内容。更多信息请关注PHP中文网其他相关文章!