图像仍然是造成网络膨胀的首要原因。
图像占用了大量的互联网带宽,因为它们通常有较大的文件大小。根据HTTP存档,60%用于获取网页的数据是由JPEG、PNG和GIF组成的图像。截至2017年7月,在平均3.0MB大小的站点加载的网页内容中图像占了1.7MB。
根据Tammy Everts,将图像添加到页面或使用更多的现有图像已经被证明可以提高转化率。图像不太可能消失,因此投资于有效的压缩策略以尽量减少网络膨胀变得非常重要。
根据2016年Soasta/Google的研究,图像是第二大转换预测指标,最佳页面的图像数量占比少于38%。
图像优化包含各种不同的方法,它们都可以减少图像的文件大小。这最终取决于你对图像所要求的视觉保真度。
图像优化:选择正确的格式,谨慎压缩,并将关键图像优先于那些可能被延迟加载的图像。
常见的图像优化包括压缩,使用<picture>/<img srcset>根据屏幕大小响应式为它们服务,以及调整它们的大小以降低图像解码成本。
根据HTTP存档,每个图像在第95%(查看累积分布函数)的位置可以节省30KB流量!
因此有足够的空间让我们一起把图像优化做得更好。
ImageOptim是免费的,通过现代压缩技术和剥离不必要的EXIF元数据来减少图像大小。
如果你是一个设计师,也有一个Sketch的ImageOptim插件,可以优化你导出的资源。我发现它可以节省很多时间。



