Web性能优化之图片优化

312 阅读2分钟

什么是图像压缩

图像压缩就是让图像的清晰度保持在可接受范围内,减少文件的大小。 图像压缩可以借用第三方插件来实现,如imagemin。

JPEG&JPG

JPG的优点

JPG最大的特点就是有损压缩。这种压缩方式,会损坏图片的质量,但这种损失我们肉眼很难分辨出来。

JPG的使用场景

JPG适用于呈现色彩丰富的图片,在日常开发中,JPG图片常被用作背景图、轮播图。

JPG的缺点

JPG有损压缩,在背景图、轮播图使用,确实肉眼难以分辨。但是,在处理矢量图或者logo这种线条感比较明显的图片时,JPG的有损压缩是非常明显的。 此外,JPEG不支持透明度处理,透明图片需要用PNG。

PNG

PNG的优缺点

PNG无损压缩高保真,对线条的处理更细腻、对透明度有很好的支持、色彩表现力更强烈。 但是,同时PNG的体积太大,这也是PNG唯一的缺点。

PNG使用场景

因为PNG的使用成本太大,所以一般都使用JPG图片。因为PNG在处理线条和色彩对比度的优势,一般PNG被使用在小logo、颜色对比强烈的图片上。

WebP

WebP的优缺点

WebP集多种文件格式的优点于一身,支持透明度处理、支持动态图片。这种图片格式虽然优点很多,但是还没有普及,目前也只有谷歌浏览器支持。

总结

通过压缩图片的方式,减少页面的加载时间,提高用户体验。不同的图片,根据图片的特点,使用场景,采用不同的图片格式。