跳到正文

图片优化 Image Optimization

词条 #231 / 700 · 第 5 章 · 5.2 网站性能、渲染路径与现代前端优化(226–240)
一句话定义

压缩图片、使用现代格式、响应式图片,减少加载时间。

打个比方 Analogy

把 RAW 照片转成 JPEG。体积小很多,但质量肉眼几乎看不出差别。

岗位实战怎么做 In Practice

使用 WebP 格式(比 JPEG 小 30%)。使用 <img srcset> 提供不同尺寸。使用懒加载(loading="lazy")。使用 CDN 的图片优化服务(如 Cloudflare Images, Imgix)。

案例与避坑 Pitfalls

不要使用 BMP 或 TIFF 格式。确保图片尺寸不超过显示尺寸(如显示 300px 宽,不要加载 2000px 宽的图)。