图片优化

概述

图片是现代 Web 页面中最重要的资源之一，通常占据了页面总传输字节的 50% 以上。优化图片不仅可以显著提升页面加载速度，还能改善用户体验（尤其是 LCP、CLS 等核心 Web 指标）、降低带宽成本。本文将从图片格式选型、响应式图片、懒加载、CDN 图片处理、雪碧图、压缩工具和性能影响等多个维度，系统性地介绍图片优化的策略与实践。

图片格式选型

常见图片格式对比

选择合适的图片格式是优化的第一步。不同格式在压缩率、质量、功能和浏览器兼容性上各有优劣。

格式	压缩类型	透明度	动画	最大色深	适用场景
JPEG	有损	不支持	不支持	24-bit	照片、复杂渐变图
PNG-8	无损	支持	不支持	8-bit	图标、Logo、文本截图
PNG-24	无损	支持	不支持	24-bit	需要高保真的图片
GIF	无损	支持	支持	8-bit	简单动画
WebP	有损/无损	支持	支持	24-bit	通用替代 JPEG/PNG
AVIF	有损/无损	支持	支持	12-bit	下一代高压缩率格式
JPEG XL	有损/无损	支持	不支持	32-bit	下一代通用格式
JPEG 2000	有损/无损	支持	不支持	38-bit	专业摄影/医疗影像

有损压缩 vs 无损压缩

有损压缩通过丢弃人眼不易察觉的图像信息来减小文件体积。JPEG、WebP（有损模式）、AVIF（有损模式）都属于有损压缩。高质量的有损压缩（如 Q=85-95）在视觉上几乎无损，但文件大小可以降低 60-80%。

无损压缩保留所有原始图像数据，适用于需要精确还原的场景，如医疗影像、设计稿中的矢量元素截图等。PNG 和 WebP（无损模式）是常用的无损格式。无损压缩的压缩率通常只有 10-40%，远低于有损压缩。

在实际项目中，建议对照片类图片使用有损压缩（WebP 或 AVIF），对 UI 元素、图标、文字类图片使用无损压缩（PNG 或 WebP 无损模式）。

浏览器兼容性与渐进增强

不同浏览器对现代图片格式的支持程度不同：

WebP：Chrome、Firefox、Edge、Safari 16+ 均支持，兼容性最广的现代格式。
AVIF：Chrome 85+、Firefox 93+ 支持，Safari 16.1+ 支持。压缩率比 WebP 高出约 20-30%，但编码速度较慢。
JPEG XL：目前仅 Chrome 和 Firefox 的实验性版本支持，尚未大规模商用。
JPEG 2000：仅 Safari 原生支持，主要用于苹果生态。

推荐策略：使用 <picture> 元素结合多种格式源，实现渐进增强：

html

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="备选文本" loading="lazy">
</picture>

浏览器会按顺序选择第一个支持的格式，降级到 JPEG 作为兜底。

响应式图片

响应式图片的核心思想是根据设备的视口尺寸、像素密度和网络条件，加载最合适的图片资源，避免在移动设备上加载桌面级大图。

srcset 与 sizes

srcset 允许为同一张图片提供多个分辨率版本，sizes 告诉浏览器图片在不同视口下的显示宽度：

html

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w,
    image-1600.jpg 1600w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 768px) 50vw,
    33vw
  "
  alt="响应式图片示例"
>

工作原理：浏览器根据当前视口宽度、设备像素比（DPR）和网络状况（通过客户端提示 Save-Data），从 srcset 中选择最合适的资源。w 描述符表示图片的实际像素宽度，浏览器会结合 sizes 计算出最终需要的分辨率。

关键点：

w 描述符必须与图片的实际宽度一致，不能虚标。
sizes 属性是 CSS 媒体查询条件，必须与 CSS 布局中的实际渲染宽度一致。
如果不提供 sizes，浏览器默认假设图片为 100vw。

picture 元素

<picture> 元素提供了比 srcset 更灵活的控制能力：

艺术方向（Art Direction）：在不同视口下显示不同裁剪比例或构图的图片：

html

<picture>
  <source
    media="(max-width: 480px)"
    srcset="hero-mobile.jpg"
  >
  <source
    media="(max-width: 1024px)"
    srcset="hero-tablet.jpg"
  >
  <img src="hero-desktop.jpg" alt="横幅图片">
</picture>

格式切换：如前文所述，使用 type 属性提供多种图片格式。

同时使用格式切换和分辨率切换：

html

<picture>
  <source
    type="image/avif"
    srcset="
      image-400.avif 400w,
      image-800.avif 800w,
      image-1200.avif 1200w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  <source
    type="image/webp"
    srcset="
      image-400.webp 400w,
      image-800.webp 800w,
      image-1200.webp 1200w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  <img
    src="image-800.jpg"
    srcset="
      image-400.jpg 400w,
      image-800.jpg 800w,
      image-1200.jpg 1200w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="响应式图片"
  >
</picture>

分辨率切换 vs 艺术方向

分辨率切换（Resolution Switching）：同一张图片、同一构图，只是尺寸不同。适用于响应式布局中图片按比例缩放的情况，使用 srcset + sizes 即可。

艺术方向（Art Direction）：在不同设备上展示不同的构图或裁剪区域。例如在手机上显示人物特写，在桌面上显示全景。必须使用 <picture> 元素配合 media 属性。

懒加载

懒加载的核心原理是只加载当前视口内（或即将进入视口）的图片，推迟加载不可见区域的图片，从而减少首屏请求数和带宽消耗。

loading=lazy 属性

这是最简单的原生懒加载方式，现代浏览器原生支持：

html

<img src="image.jpg" loading="lazy" alt="懒加载图片">
<iframe src="widget.html" loading="lazy"></iframe>

浏览器支持：Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+。

注意事项：

首屏以上的图片不应设置 loading="lazy"，会影响 LCP 指标。
设置了 loading="lazy" 的图片即使位于首屏，浏览器也可能延迟加载。
建议对首屏图片使用 fetchpriority="high" 提示浏览器优先加载。

IntersectionObserver 实现

对于需要更精细控制的场景（如自定义占位符效果、加载动画、统计曝光），可以使用 IntersectionObserver API 手动实现懒加载：

javascript

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.srcset = img.dataset.srcset;
        observer.unobserve(img);
      }
    });
  },
  {
    rootMargin: '200px 0px', // 提前 200px 开始加载
    threshold: 0.01,
  }
);

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

HTML 标记：

html

<img
  data-src="image.jpg"
  data-srcset="image-400.jpg 400w, image-800.jpg 800w"
  src="placeholder.svg"
  alt="懒加载图片"
  class="lazy"
>

占位符技术

LQIP（Low Quality Image Placeholders）：加载一个极低质量（如将图片缩小到 30-50px 宽）的模糊版本作为占位符，待原图加载完成后替换。可以使用内联 Base64 数据 URI 或单独的极低质量图片。

html

<!-- 内联 LQIP -->
<img
  src="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
  data-src="full-image.jpg"
  alt="LQIP 示例"
  class="lazy"
>

SQIP（SVG-based Image Placeholders）：使用 SVG 形状轮廓作为占位符，相比 LQIP 文件更小（通常 0.5-1KB），视觉上更加平滑。SQIP 工具可以将图片转换为带有渐变和形状的 SVG 轮廓。

html

<img
  src="placeholder.svg"
  data-src="full-image.jpg"
  alt="SQIP 示例"
  class="lazy"
>

CSS 背景色/渐变占位符：对于已知平均色调的图片，可以直接在 CSS 中设置背景色作为占位符，这是零成本的方案：

css

.image-wrapper {
  background: #f0e6d3; /* 图片的主色调 */
}

懒加载的最佳实践

首屏图片不使用懒加载，使用 fetchpriority="high" 或 loading="eager"。
设置合理的 rootMargin，提前 100-300px 开始加载，避免用户滚动时出现白屏。
结合骨架屏或纯色占位符，减少布局偏移（CLS）。
为图片显式设置 width 和 height 属性，配合 aspect-ratio CSS 属性避免 CLS。

CDN 图片处理

现代 CDN 和图片处理服务（如 Cloudinary、Imgix、阿里云 OSS 图片处理、Sharp）提供了丰富的实时图片处理能力，允许在 URL 级别动态调整图片。

图片裁剪与缩放

通过 URL 参数指定裁剪区域和输出尺寸：

https://cdn.example.com/image.jpg?w=800&h=600&fit=crop

常见参数：

w / width：输出宽度
h / height：输出高度
fit：缩放模式（crop、contain、cover、fill、scale-down）
crop：裁剪区域（faces、entropy、edges 等智能裁剪模式）

质量调整

根据输出格式和目标质量设置压缩参数：

https://cdn.example.com/image.jpg?q=85&format=webp

q / quality：质量参数（1-100），85 是照片类图片的推荐值
format：强制转换输出格式
auto=format：让 CDN 根据浏览器 Accept 请求头自动选择最优格式

格式自动转换

配置 CDN 根据 User-Agent 或 Accept 请求头自动返回 WebP 或 AVIF：

# 请求头
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

# CDN 自动响应
https://cdn.example.com/image.jpg?auto=format

fetchpriority 属性

fetchpriority 是一个浏览器 API 提示，用于告诉浏览器资源的相对重要性：

html

<!-- 高优先级 - LCP 候选元素 -->
<img src="hero.jpg" fetchpriority="high" alt="重要图片">
<!-- 低优先级 -->
<img src="footer-banner.jpg" fetchpriority="low" alt="次要图片">

与 CDN 结合使用时，可以为首屏关键图片设置 fetchpriority="high"，提前发起资源加载请求。

雪碧图（CSS Sprites）

合成原理

CSS Sprites 将多张小图标合并到一张大图上，通过 background-position 控制显示区域，以减少 HTTP 请求数。在 HTTP/1.1 时代，这是最有效的优化手段之一。

css

.icon {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}
.icon-home { background-position: 0 0; width: 24px; height: 24px; }
.icon-user { background-position: -24px 0; width: 24px; height: 24px; }
.icon-settings { background-position: -48px 0; width: 24px; height: 24px; }

维护成本与挑战

随着 HTTP/2 的普及，雪碧图的优势大幅降低：

维护困难：每次新增或修改图标都需要重新合成雪碧图，更新样式表中的坐标。
缓存失效：任何一个图标的修改都会导致整个雪碧图的缓存失效。
内存浪费：需要加载整张大图，即使只用到其中一小部分。
Retina 屏幕：需要准备 2x/3x 等多套雪碧图，复杂度成倍增加。

替代方案

图标字体（Icon Fonts）：使用字体文件包含矢量图标，通过 CSS font-family 控制。代表库有 Font Awesome、Iconfont 等。

优点：单文件、矢量缩放、CSS 控制颜色和大小。缺点：只能单色、渲染锯齿、加载整个字体文件即使只用几个图标、可访问性差。

SVG Sprite：将多个 SVG 图标合并到一个文件中，通过 <use> 引用：

html

<svg width="0" height="0" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<!-- 使用 -->
<svg width="24" height="24">
  <use href="#icon-home" />
</svg>

优点：矢量缩放、多色支持、按需引用、高分辨率无关、良好的可访问性。缺点：需要构建工具支持（如 svg-sprite-loader）、复杂形状体积可能较大。

推荐：在现代项目中，优先使用 SVG Sprite 或直接将 SVG 内联到 HTML 中。只有当项目仍运行在 HTTP/1.1 协议下，且图标数量较少且稳定时，才考虑 CSS Sprites。

图片压缩工具

Sharp（Node.js）

Sharp 是 Node.js 生态中最流行的图片处理库，基于 libvips，性能极佳：

javascript

const sharp = require('sharp');

// 转换到 WebP
await sharp('input.jpg')
  .webp({ quality: 85 })
  .toFile('output.webp');

// 调整大小并转换到 AVIF
await sharp('input.jpg')
  .resize(800, 600)
  .avif({ quality: 75 })
  .toFile('output.avif');

// 生成多种尺寸
const sizes = [400, 800, 1200];
await Promise.all(
  sizes.map((size) =>
    sharp('input.jpg')
      .resize(size)
      .webp({ quality: 85 })
      .toFile(`output-${size}.webp`)
  )
);

imagemin（Gulp/Webpack 插件）

imagemin 是一组图片压缩插件的集合，常用插件包括：

imagemin-mozjpeg：JPEG 压缩（基于 MozJPEG 引擎）
imagemin-pngquant：PNG 有损压缩
imagemin-webp：转换为 WebP
imagemin-svgo：SVG 优化

Webpack 配置示例：

javascript

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['mozjpeg', { quality: 85, progressive: true }],
            ['pngquant', { quality: [0.7, 0.85] }],
            ['webp', { quality: 85 }],
          ],
        },
      },
    }),
  ],
};

Squoosh

Squoosh 是 Google 推出的在线/CLI 图片压缩工具，提供了直观的视觉对比界面。它的 CLI 版本适用于批量处理：

bash

npx @squoosh/cli --webp '{"quality":85}' --avif '{"quality":75}' input.jpg

TinyPNG / TinyJPG

TinyPNG 是知名的在线图片压缩服务，通过智能量化算法减少 PNG 文件中的颜色数量，对 JPEG 则通过优化的压缩参数进行处理。它提供 API 接口适用于自动化流水线。

各工具量化对比

工具	类型	JPEG 压缩率	PNG 压缩率	WebP 支持	批量处理	适用场景
Sharp	Node.js 库	40-60%	30-50%	原生支持	是	服务端动态处理
imagemin	CLI/插件	50-70%	50-70%	插件支持	是	构建流程
Squoosh	CLI/Web	40-60%	40-60%	原生支持	是	手动/批量优化
TinyPNG	Web/API	50-70%	60-80%	不支持	API 支持	少量图片手动优化

注：压缩率受原图质量和内容影响较大，以上数据为典型值。

性能影响

LCP 与图片优化

LCP（Largest Contentful Paint）是 Core Web Vitals 的核心指标之一。在大多数页面中，LCP 元素是一张图片。优化图片加载对改善 LCP 至关重要：

关键策略：

预加载 LCP 图片：使用 <link rel="preload"> 提前加载 LCP 图片资源。

html

<link rel="preload" as="image" href="hero.webp" imagesrcset="..." imagesizes="...">

优化图片格式：将 LCP 图片转换为 WebP 或 AVIF，减少传输大小。
设置 fetchpriority：为 LCP 图片添加 fetchpriority="high"。
压缩与裁剪：不要加载超过显示尺寸的图片，精确控制 LCP 图片的尺寸。
使用 CDN：部署 CDN 减少图片传输的 RTT（往返时延）。

带宽与内存

带宽：优化后的图片可以减少 50-80% 的传输量，在移动网络下效果尤为明显。据统计，图片优化可以为中端手机用户节省约 60% 的数据流量。
内存：解码后的图片位图数据占用的内存约为 宽 × 高 × 4 字节（RGBA）。一张 4000×3000 的图片解码后占用约 48MB 内存。通过响应式图片加载合适尺寸的图片，可以大幅降低内存占用。

缓存策略

合理的缓存策略可以减少重复加载：

http

# 强缓存 - 图片内容通常不变，可以使用较长的 max-age
Cache-Control: public, max-age=31536000, immutable

# 配合版本化 URL（如文件名包含 hash）
https://cdn.example.com/image.a1b2c3d4.jpg

不可变缓存（immutable）：告诉浏览器文件永远不会改变，可以直接使用缓存而不需要重新验证，适用于带 hash 的静态图片资源。

综合优化清单

[ ] 选择合适的图片格式（WebP/AVIF 优先，JPEG 兜底）
[ ] 实现响应式图片（srcset + sizes 或 picture 元素）
[ ] 对非首屏图片启用懒加载
[ ] 设置图片的 width 和 height 避免 CLS
[ ] 使用 CDN 进行图片处理和分发
[ ] 在构建流程中集成图片压缩工具
[ ] 预加载 LCP 图片并设置 fetchpriority
[ ] 对使用的图标、Logo 优先考虑 SVG
[ ] 配置合理的缓存策略
[ ] 定期审计图片性能（Lighthouse）

交互式 Demo

以下 Demo 展示了同一图片在不同格式下的视觉质量和文件大小对比，支持缩放查看细节和模拟网络速度。

参考资源：
Web Performance Working Group - Image Optimization
Google Web Fundamentals - Image Optimization
MDN - Responsive Images
Cloudinary - Image Optimization Guide

图片优化 ​

概述 ​

图片格式选型 ​

常见图片格式对比 ​

有损压缩 vs 无损压缩 ​

浏览器兼容性与渐进增强 ​

响应式图片 ​

srcset 与 sizes ​

picture 元素 ​

分辨率切换 vs 艺术方向 ​

懒加载 ​

loading=lazy 属性 ​

IntersectionObserver 实现 ​

占位符技术 ​

懒加载的最佳实践 ​

CDN 图片处理 ​

图片裁剪与缩放 ​

质量调整 ​

格式自动转换 ​

fetchpriority 属性 ​

雪碧图（CSS Sprites） ​

合成原理 ​

维护成本与挑战 ​

替代方案 ​

图片压缩工具 ​

Sharp（Node.js） ​

imagemin（Gulp/Webpack 插件） ​

Squoosh ​

TinyPNG / TinyJPG ​

各工具量化对比 ​

性能影响 ​

LCP 与图片优化 ​

带宽与内存 ​

缓存策略 ​

综合优化清单 ​

交互式 Demo ​

图片优化

概述

图片格式选型

常见图片格式对比

有损压缩 vs 无损压缩

浏览器兼容性与渐进增强

响应式图片

srcset 与 sizes

picture 元素

分辨率切换 vs 艺术方向

懒加载

loading=lazy 属性

IntersectionObserver 实现

占位符技术

懒加载的最佳实践

CDN 图片处理

图片裁剪与缩放

质量调整

格式自动转换

fetchpriority 属性

雪碧图（CSS Sprites）

合成原理

维护成本与挑战

替代方案

图片压缩工具

Sharp（Node.js）

imagemin（Gulp/Webpack 插件）

Squoosh

TinyPNG / TinyJPG

各工具量化对比

性能影响

LCP 与图片优化

带宽与内存

缓存策略

综合优化清单

交互式 Demo