前端性能优化（图片篇）

前端性能优化（图片篇）

不同业务场景下的图片方案选型

JPEG/JPG （有损压缩、体积小、加载快、不支持透明）

• 优点：有损压缩，图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。

• 缺点：不支持透明度处理，透明图片需要召唤 PNG 来呈现。

• 使用场景：大的背景图、轮播图或 Banner 图出现。

PNG （无损压缩、质量高、体积大、支持透明）

• 优点：无损压缩的高保真的图片格式，对线条的处理更加细腻。

• 缺点： 体积太大。

• 使用场景： 主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。

SVG (文本文件、体积小、不失真、兼容性好)

• 优点：图片可无限放大而不失真。

• 缺点：渲染成本比较高，以及其它图片格式所没有的学习成本。

• 使用场景：SVG写入HTML（使用svg标签）， SVG写入独立文件后引入HTML（使用img引入）。

Base64 （文本文件、依赖编码、小图标解决方案）

• 优点：减少加载网页图片时对服务器的请求次数，从而提升网页性能（Base64 是作为雪碧图的补充而存在的）。

• 缺点：Base64 编码后，图片大小会膨胀为原文件的 4/3。

• 使用场景：图片的实际尺寸很小、图片无法以雪碧图的形式与其它小图结合、图片的更新频率非常低

WebP

• 优点：支持透明、可以显示动态图片。

• 缺点：太年轻，兼容性不强。

前端性能优化（渲染篇）
前端性能优化（存储篇）
前端性能优化（图片篇）