图片如何优化？

本文目录导读：

1. 核心优化原则（永远先做这几步）
2. 关键优化策略（提升效率）
3. 具体优化工具推荐
4. 高级优化技巧
5. 工作流程总结

“图片优化”是一个涵盖技术、设计和性能的综合性话题，核心目标是：在保证视觉质量可接受的前提下，让图片文件体积尽可能小，从而提升网页加载速度、节省带宽、改善用户体验。

以下是针对不同场景的完整优化指南：

核心优化原则（永远先做这几步）

1. 选择正确的格式

   • JPEG / JPG：适合照片、色彩丰富的复杂图像，支持有损压缩，文件较小。
   • PNG：适合需要透明背景的图标、Logo、截图，无损压缩，但文件通常较大。不推荐用于照片。
   • WebP：现代网页首选，Google 推出的格式，无损和和有损压缩都比 JPEG/PNG 小 25%-35%，且支持透明。大多数现代浏览器都支持。
   • AVIF：更新、压缩率更高的格式（比 WebP 再小 30% 左右），但浏览器支持度略低。
   • SVG：适合图标、Logo、插画等矢量图形，无限缩放、文件极小。不可用于照片。
   • GIF：强烈不推荐，仅用于简单动画，文件巨大、色彩有限，建议用 MP4 或 WebM 视频 替代。

2. 调整尺寸（分辨率）

   • 物理尺寸：不需要上传 4000x3000px 的照片去展示 600px 宽的缩略图。直接缩放到最终显示大小（或略大于显示尺寸的 2x 以应对 Retina 屏幕）。
   • 缩放工具：Photoshop、sips（Mac 命令行）、ImageMagick、或在线工具。

3. 调整压缩质量

   • JPEG/WebP：通常在 70% - 85% 之间，肉眼几乎看不出区别，但文件大小减半。
   • PNG：使用“有损PNG”或“PNG量化”工具（如 pngquant）将色彩从 256 色降到更少。

关键优化策略（提升效率）

响应式图片（Responsive Images）

• 原理：让浏览器根据屏幕尺寸和分辨率加载最合适的图片版本。

• 实现：使用 <picture> 元素或 <img> 的 srcset 和 sizes 属性。

  <!-- 简单示例：为不同屏幕宽度提供不同图片 -->
  <img src="photo-800w.jpg"
       srcset="photo-1200w.jpg 1200w,
               photo-800w.jpg 800w,
               photo-400w.jpg 400w"
       sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
       alt="描述">
  <!-- WebP 优先 -->
  <picture>
    <source type="image/webp" srcset="photo.webp">
    <source type="image/jpeg" srcset="photo.jpg">
    <img src="photo.jpg" alt="描述">
  </picture>

懒加载（Lazy Loading）

• 原理：图片出现在用户视口内之前，不加载图片。节省首屏时间和带宽。
• 实现：
  • 原生：给 <img> 或 <iframe> 元素添加 loading="lazy" 属性。
  • JavaScript库（如 lozad.js、lazysizes）用于更复杂的回退或自定义效果。

使用 CDN（内容分发网络）

• 原理：将图片缓存到全球各地的服务器，用户从最近的服务器下载，速度更快。
• 优势：CDN 通常还自带实时图片处理（自动调整尺寸、格式、质量），只需在 URL 后加参数即可。https://cdn.example.com/photo.jpg?w=400&q=80&format=webp

利用缓存

• 设置正确的 Cache-Control 和 Expires 头，让浏览器或 CDN 缓存图片，下次访问无需重新下载。

具体优化工具推荐

高级优化技巧

1. CSS 的 image-set：为 background-image 属性提供高清屏幕适配和格式回退。

   .bg { 
     background-image: image-set(
       url("photo.webp") type("image/webp"),
       url("photo.jpg") type("image/jpeg")
     );
     background-size: cover;
   }

2. 使用视频替代 GIF：将 GIF 转为 MP4 或 WebM，体积可缩小 90% 以上。

   ffmpeg -i input.gif -c vp9 -b:v 0 -crf 30 output.webm
   ffmpeg -i input.gif -c libx264 -pix_fmt yuv420p -crf 30 output.mp4

3. 渐进式 JPEG (Progressive JPEG)：先加载模糊缩略图，再逐渐变清晰，视觉上感觉更快，但文件略大，适合大图。

4. 压缩字体、图标、Logo：尽量使用 SVG 图标或 Icon Fonts（如 Font Awesome、Material Icons），它们是矢量，大小恒定且清晰。

5. 避免 HTTP 请求过载：如果页面有非常多小图（如表情包、小图标），可以考虑使用 CSS Sprites（雪碧图，将小图合并成一张大图）或 Base64（直接嵌入 CSS/HTML，但会增加 CSS 大小，需权衡）。现代更推荐 SVG Sprite 或 SVG 符号。

工作流程总结

1. 设计时：导出为 SVG（图标/Logo）或 WebP（照片/复杂图），尺寸精确。
2. 处理时：
   • 用 Squoosh 或 ImageMagick 调整质量（80% 起）、尺寸。
   • 用 <picture> 和 srcset 提供响应式版本。
   • 用 loading="lazy" 实现懒加载。
3. 部署时：上传到 CDN（如 Cloudinary、Netlify 自带图片优化）。
4. 测试时：用 Google PageSpeed Insights 或 Lighthouse 检查图片优化建议（通常它会直接给出优化后的图片链接）。

一句话总结： 用 WebP 格式、调整到正确物理尺寸、降低质量到 80%、配上响应式标签和懒加载、最后扔到 CDN 上。

这样一套组合拳下来,你的图片体积可以减少 70%-90%，网页加载速度至少提升一倍。

标签： 性能提升