fbpx

网站性能和图像压缩携手并进

图像占典型网页内容的一半以上,通常是确保最佳 Web 性能和愉悦用户体验的最大障碍。 了解哪种减小图像大小的方法最适合 Web,以及无损图像压缩技术与丢失图像压缩技术之间的区别。

减少图像大小以降低 Web 性能

在 Web 性能方面,图像压缩是关键。 图像压缩技术提供了简单、经济高效的解决方案,无需切割生成引线的图形即可快速提高 Web 性能。

根据GigaOM的说法,网页膨胀正在上升,图像占一个典型网页内容的一半以上。 因此,为了实现最佳的网站性能,Web 开发人员通常负责确定如何减小页面大小并更有效地处理图像负载。 如果您想知道如何减小图片大小,可以使用几种易于实现的技术。

无损图像压缩

Image Compression Quality Comparison
图像压缩比较 = 质量与文件大小。 如所示,随着质量的提高,文件大小呈指数级增长。 (点击放大)

虽然有许多竞争的图像压缩技术,但两种主要类型包括”无损”和”丢失”压缩。 无损压缩允许您完全按原样重新创建原始文件,尽管其形式较小,可加快交付速度,减少服务器存储要求。 此方法优化传输 – 考虑拆除床移动到您的新家 – 然后重建它,因为它原。 虽然它提供快速 – 达到 Web 性能的第一个标志 – “重新组装”所需的时间可能会影响用户体验,因为他们等待完全呈现。

另一方面,丢失压缩会丢弃所有不必要的信息,以使文件变小。 虽然此方法消除了冗余信息,但它确实会影响图像质量。 根据经验,在 Web 浏览器中查看时,以 60% 质量(或更高)保存的图像通常不会与以全分辨率保存的图像区分。 放大图像的图像编辑器将揭示质量差异,但这是意料之中的。 一般来说,损耗压缩是 Web 图像的最佳图像压缩技术,因为它使用的内存较少。

WebP 图像压缩 – 新技术

与传统图像压缩技术的替代方案是WebP,这是一种有前途的新图像格式,由谷歌的一个团队创建。 其目标是创建替换 PG 和 JPEG 的较小映像,以便开发人员可以使用一种标准化图像格式来制作他们的 Web 内容。 WebP 结合了无损压缩和失损压缩的元素,能够将图像减少 25% 到 34%。 虽然这是相对较新的,在早期采用 – 这是一个值得考虑的方法,作为您的网站性能战略的一部分。

减少图片大小的其他方法

当然,还有其他几种技术可用于优化和压缩图像。 其中一些方法包括渐进式映像构建、算术编码和无损 JPEG 压缩。 最终,网页设计人员必须选择一种既提供速度和图像清晰度的技术,又不会牺牲很多用户体验。

建立性能基准以跟踪图像优化成功

在优化网站之前,必须建立绩效基准,以便准确量化改进。建议使用外部 Web 性能监视工具,因为它们可以测量更改图形格式的影响,并分析世界各地多个点的最终用户体验。

要建立网站性能的基线,请在图像压缩前后运行我们的免费网站速度测试

[divider top=”no”]

您推荐的图像压缩技术是什么? 请随时分享以下评论。

[ 图片来源 –维基百科]

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
电子邮件
Share on print
打印