作为一名前端工程师，我每天都要和各种图片打交道。以前我总觉得图片优化是设计师的事，直到有一天，我负责的一个电商落地页因为首屏图片太大，导致加载时间长达 5 秒，跳出率惨不忍睹。这次惨痛的教训迫使我系统地研究了图片优化技术。今天，我将把这些"血泪经验"总结成一份指南分享给你。
现在的 4K 屏幕普及了，图片越来越大。但很多时候，用户上传的头像明明只显示 50x50，却传了个 10MB 的原图。服务器流量就是这么被吃光的... 真的希望能有一个'自动打回'的功能。
为什么图片优化很重要
在当今的互联网环境中，图片往往占据网页总体积的 50% 以上。根据 HTTP Archive 的统计数据，一个普通网页的平均大小已经超过 2MB，其中图片资源就占据了约 1MB。这意味着，如果你不对图片进行优化处理，你的网站将面临严重的性能问题。
Google 的研究表明，当页面加载时间从 1 秒增加到 3 秒时，用户跳出的概率会增加 32%；而加载时间达到 5 秒时，跳出概率更是飙升至 90%。更为关键的是，自 2021 年起，Google 已将 Core Web Vitals（核心网页指标）纳入搜索排名因素，其中最大内容绘制时间（LCP）与图片加载速度直接相关。一张未经优化的 Banner 图片很可能就是拖慢 LCP 的元凶。
因此，图片优化不仅影响用户体验，更直接关系到网站的搜索引擎排名和商业转化率。接下来，我们将从格式选择、压缩策略和实际操作技巧三个维度，系统地讲解如何做好图片优化。
主流图片格式对比
选择合适的图片格式是优化的第一步。不同的格式在压缩效率、色彩支持和浏览器兼容性等方面各有优劣。以下是目前主流的四种图片格式的详细对比。
JPEG / JPG
JPEG 是使用最广泛的有损压缩格式，诞生于 1992 年。它支持 1600 万种颜色，非常适合色彩丰富的照片和自然场景图像。JPEG 的压缩率可调范围大，在质量设置为 75-85 时通常能在画质和体积之间取得良好平衡。
PNG
PNG 是一种无损压缩格式，最大的优势在于支持 Alpha 通道透明度。它非常适合图标、Logo、UI 元素以及需要保留锐利边缘的图形。PNG-8 最多支持 256 色，适合简单图形；PNG-24 支持真彩色，但文件体积通常较大。
WebP
WebP 由 Google 于 2010 年推出，同时支持有损和无损压缩，并且支持透明通道和动画。在同等画质下，WebP 的有损压缩比 JPEG 小 25-35%，无损压缩比 PNG 小 26%。截至 2025 年，所有主流浏览器均已支持 WebP 格式，是目前最推荐的通用图片格式。
AVIF
AVIF 是基于 AV1 视频编码标准衍生的图片格式，由 Alliance for Open Media 于 2019 年发布。它的压缩效率是目前所有格式中最高的，在同等画质下比 WebP 还要小 20% 左右。AVIF 支持 HDR、宽色域和 12 位色深，在高质量图像领域有明显优势。不足之处在于编码速度较慢，且部分老旧浏览器尚未支持。
同一张照片不同格式的体积对比
以一张 1920x1080 风景照为例（原始 BMP 约 6MB）
图片压缩策略
有损压缩 vs 无损压缩
图片压缩从根本上分为两种方式：有损压缩和无损压缩。有损压缩通过丢弃人眼不敏感的图像数据来大幅减小文件体积，适合照片、Banner 等对细节精度要求不极端的场景。无损压缩则通过更高效的编码算法减小体积，不丢失任何原始数据，适合图标、截图、技术图表等需要保持精确像素的场景。
实际操作中，大多数网站图片都应该使用有损压缩。原因很简单：在合适的质量参数下，有损压缩造成的画质损失几乎无法被肉眼察觉，但文件体积可以减少 60% 到 80%。
质量参数设置建议
不同用途的图片应采用不同的质量设置，以下是一份经过实践验证的参考标准：
- Banner 和首屏大图：质量 80-85。这类图片视觉影响大，需要较高画质，但不必追求 100%。在 85 以上时，画质提升极小而体积增加明显。
- 产品图和内容配图：质量 70-80。这是适用范围最广的区间，能在清晰度和加载速度之间取得良好平衡。
- 缩略图和预览图：质量 50-65。由于展示尺寸小，画质损失不易被发现，可以更积极地压缩以获得更快的加载速度。
- 背景和装饰图：质量 40-60。这类图片通常会被模糊处理或设置透明度，低质量压缩完全不影响视觉效果。
不同场景的推荐质量参数
响应式图片策略
在移动优先的时代，为不同屏幕尺寸提供不同分辨率的图片是非常重要的优化手段。一张在桌面端显示为 1920px 宽的 Banner，在手机端可能只需要 640px 宽。如果手机用户也下载 1920px 的原图，就白白浪费了大量带宽和加载时间。
推荐为每张关键图片准备 3 个版本：小尺寸（640px 宽，面向手机）、中尺寸（1024px 宽，面向平板）、大尺寸（1920px 宽，面向桌面）。通过 HTML 的 srcset 和 sizes 属性，浏览器会自动选择最合适的版本下载。
实用优化技巧
延迟加载（Lazy Loading）
延迟加载是指只在图片即将进入可视区域时才开始加载，而不是在页面初始化时就加载所有图片。现代浏览器原生支持这一特性，只需在 img 标签上添加 loading="lazy" 属性即可。对于首屏可见的图片（如 Banner 和 Logo），不要使用延迟加载，因为这反而会延迟 LCP 的时间。建议将延迟加载应用于首屏以下的所有图片。
使用 srcset 实现自适应
HTML 的 srcset 属性允许你为同一张图片指定多个不同分辨率的源文件，浏览器会根据设备的屏幕宽度和像素密度自动选择最合适的版本。配合 sizes 属性使用时，还可以告诉浏览器图片在不同视口宽度下的显示尺寸，让选择更加精确。这种方式不需要 JavaScript，完全由浏览器原生处理，既高效又可靠。
利用 CDN 加速分发
内容分发网络（CDN）能将你的图片缓存到全球各地的边缘节点，让用户从距离最近的服务器获取图片，显著降低网络延迟。许多现代 CDN 还提供实时图片处理功能，可以在请求时动态调整图片尺寸、格式和质量参数，省去了预先生成多个版本的麻烦。例如 Cloudflare Images、imgix 和 Cloudinary 等服务都提供了这样的能力。
现代格式与回退方案
为了兼顾性能和兼容性，推荐使用 HTML 的 picture 元素来实现格式回退。将 AVIF 作为首选格式，WebP 作为第二选择，JPEG 或 PNG 作为最终回退。浏览器会按照 source 标签的顺序尝试加载，自动选择它所支持的第一个格式。这种渐进增强的方式确保了所有用户都能看到图片，同时让支持新格式的浏览器获得更优的体验。
提示：使用 picture 元素时，务必在最后的 img 标签中设置 alt 属性，这对搜索引擎优化和无障碍访问至关重要。同时，img 标签上的 width 和 height 属性可以帮助浏览器在图片加载前预留空间，避免布局偏移（CLS）。
使用 OneKit 图片工具
了解了以上图片优化理论后，接下来就需要一套趁手的工具来付诸实践。OneKit 提供了完全在浏览器端运行的图片处理工具，所有操作在本地完成，无需上传图片到服务器，既保护了你的隐私，又避免了网络传输的等待时间。