图片优化–质量与性能的博弈
无论是作者还是《高性能网站建设指南》的作者,都认为图片的优化优先级高于js和css的优先级,因为这是用户可感知的。
图片压缩我们通常会选择压缩图片的体积来减少网络加载时长,但一般会牺牲一些图片成像效果。
目前主要的图片分类有JPEG/JPG、PNG、WebP、Base64、SVG
JPEG/JPG
关键词:有损压缩、体积小、加载快、不支持透明
JPG 适用于呈现色彩丰富的图片,在我们日常开发中,JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。
当在处理颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显。且JPEG不支持透明图片。
PNG-8 与 PNG-24
关键字:无损压缩、质量高、体积大、支持透明。
PNG是一种无损压缩的高保真的图片格式。跟JPG相比,有更强的色彩表现力,对线条的处理更加细腻,对透明度有良好的支持。唯一的缺点就是体积有点大。
主要使用场景:主要用来处理小logo、背景图等。
SVG
关键字:文本文件、体积小、不失真、兼容性好
SVG(可缩放矢量图形)是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同:SVG 对图像的处理不是基于像素点,而是是基于对图像的形状描述
SVG 与 PNG 和 JPG 相比,文件体积更小,可压缩性更强。
当然,作为矢量图,它最显著的优势还是在于图片可无限放大而不失真这一点上。这使得 SVG 即使是被放到视网膜屏幕上