前端性能优化之图片优化篇

发布于:2021-10-20 16:55:13

图片优化篇

在前端领域,我们可能无时无刻都要与图片打交道,说到图片优化,不如说是一种权衡,接触到最多的图片方案有:JPEG/JPG,PNG,Base64,WebP,SVG,接下来让我们来看看各自的特点以及适用场景


    JPEG/JPG
    特点就是有损压缩,体积小,加载快
    缺点:不支持透明,有损压缩处理矢量图和Logo时,人为压缩导致图片模糊比较明显
    使用场景:大的背景图,轮播图或Banner图出现PNG
    特点:比JPG有更强的色彩表现力,支持透明
    缺点:体积大
    使用场景:小的Logo,颜色简单且对比强烈的图片SVG
    特点:文本文件,体积小,不失真,兼容性好
    缺点:渲染成本高Base64
    特点:文本文件,依赖编码,减少Http请求的次数
    使用场景:满足以下几点即可(图片实际尺寸很小,图片无法以精灵图的形式与其他小图结合,图片跟新频率非常低)Webp
    特点:支持有损和无损压缩,支持透明
    缺点:兼容性差

相关推荐

最新更新

猜你喜欢