logoPerfEdge | Web性能优化知识库

Web 图片优化

在 Web 资源中,图片往往占据了最大的体积。优化图片不仅能减轻服务器压力,更能显著提升页面加载速度,改善用户体验。本文将探讨为什么需要优化 Web 图片、如何选择合适的图片格式,以及实用的优化策略。

为什么要优化 Web 图片?

在所有网页资源中,图片通常是体积最大的资源类型。如果不进行优化,可能会遇到以下问题:

  • 页面加载缓慢 未优化的图片会显著延长加载时间,特别是在网络条件较差的情况下,用户体验会大幅下降。

  • 性能指标受影响 核心性能指标(如 FCP 和 LCP)会因图片加载缓慢而恶化,这不仅影响用户体验,也会降低搜索引擎排名。

  • 带宽消耗增加 大体积图片会消耗更多流量,增加用户的流量费用,同时也会提高服务器的带宽成本。

  • 搜索排名下降 搜索引擎高度重视页面加载速度,加载缓慢的网页在搜索结果中的排名会受到负面影响。

  • 移动设备性能问题 移动设备通常面临屏幕较小、网络较慢的限制,大体积图片会严重影响移动端用户体验。

归根结底,优化图片是为了提升性能、改善用户体验并降低成本。

常见的图片格式:该选谁?

在选择图片格式时,我们需要根据不同的使用场景做出权衡。以下是常见图片格式的特点和适用场景。

jpg

JPG - 483KB

png

PNG - 2.2MB

webp

WebP - 126KB

gif

GIF - 780KB

svg

SVG - 2.7MB

webp

Next Image - 懒加载、压缩、优化

1. 位图格式:传统但强大

  • JPEG:

    • 适合照片和复杂色彩图片。
    • 有损压缩,但体积小、能应对大多数场景。
    • 适用性广,但可能会损失部分细节。

  • PNG:

    • 支持透明背景,细节丰富。
    • 无损压缩,画质高。
    • 缺点是文件体积较大,不适合对加载速度要求高的场景。

  • GIF:

    • 传统的动画格式,现在主要用于简单动画。
    • 最多支持 256 色,画质有限,适合简单的动态内容。

  • WebP:

    • 现代网页的新兴格式,体积比 JPEG 小 25%-35%,画质优秀。
    • 支持有损和无损压缩。
    • 需要注意的是部分旧版浏览器不支持该格式。

2. 矢量图格式:无限缩放,无损压缩

  • SVG:
    • 基于 XML 的矢量图格式,可以任意缩放而不失真。
    • 适合图标、Logo 等简单图形,但不适合照片等复杂内容。

懒加载 vs. 预加载:看似对立,实则互补

懒加载和预加载是两种不同的资源加载策略,各有其适用场景。

懒加载:按需加载

懒加载的核心思想是:只有当图片进入用户视野附近时才加载。就像站在书架前,只有需要某本书时才去取,而不是一次性把所有书都搬回家。

懒加载实现示例:

<body>
  <div id="gallery">
    <img data-src="example1.jpg" alt="Image 1" />
    <img data-src="example2.jpg" alt="Image 2" />
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const images = document.querySelectorAll("img[data-src]");
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
          }
        });
      });

      images.forEach((img) => observer.observe(img));
    });
  </script>
</body>

预加载:提前准备

与懒加载相反,预加载会提前加载某些关键资源。对于首屏内容等重要图片,预加载可以确保它们在用户访问页面时立即可用。

预加载实现示例:

<link rel="preload" as="image" href="important-image.jpg" />

优先级控制

资源加载具有优先级机制,预加载的图片会优先加载,从而加快首屏展示速度。在 HTML 头部,一些关键资源如字体、CSS 文件等可以通过设置 preload 来提升加载优先级。相应地,图片也有优先级概念,比如首屏图片应该优先加载。

fetchpriority API 可以用来设置资源的加载优先级:

<img src="example.jpg" fetchpriority="high" />

<img src="example.jpg" fetchpriority="low" />

<img src="example.jpg" fetchpriority="auto" />

更多内容可以参考 Web Dev。

图片压缩:既要瘦身,也要美貌

图片压缩是优化的关键环节之一,目标是在尽可能减小文件体积的同时,保留足够的画质。

有损压缩 vs. 无损压缩

  • 有损压缩: 通过丢弃部分图片细节来减小体积,适合对画质要求不高的场景,比如背景图、缩略图。常用工具有:

    • TinyPNG:支持 JPEG 和 PNG 格式,压缩效果显著。
    • Squoosh:谷歌出品,功能强大,支持多种格式压缩。

  • 无损压缩: 保留图片所有信息,减少冗余数据,适合对画质要求高的场景,比如产品图、艺术图。常用工具有:

    • ImageOptim:支持多种格式,特别适合 macOS 用户。
    • PNGGauntlet:专注 PNG 格式的无损压缩。

在线压缩工具推荐

1. TinyPNG

TinyPNG 是一个流行的在线压缩工具,支持 JPEG 和 PNG 格式,通过智能优化算法大幅减少图片体积。

  • 优点:操作简单,压缩率高。
  • 缺点:免费版有图片数量限制。

2. Squoosh

Squoosh 是谷歌出品的图片压缩工具,支持多种格式,并提供实时预览功能。

  • 功能亮点:
    • 支持 WebP、AVIF 等现代格式。
    • 可调整压缩参数,精确控制画质和体积。

3. Compressor.io

Compressor.io 提供有损和无损两种压缩模式,适合多种场景。

  • 特点:
    • 支持 JPEG、PNG、GIF 和 SVG 格式。
    • 提供在线比较压缩前后的画质差异。

批量压缩:提升处理效率

当需要处理大量图片时,推荐使用支持批量操作的工具:

  • 命令行工具:

    • ImageMagick:功能强大的开源工具,可实现格式转换、压缩、缩放等。
    • mozjpeg:专注 JPEG 优化,能生成更小的文件。

  • 桌面工具:

    • RIOT:Windows 用户的选择,支持批量压缩和质量预览。
    • Photopea:类似在线版的 Photoshop,可处理多种图片压缩需求。

压缩前后的对比

为了直观感受压缩的效果,以下是一张图片在不同压缩方式下的对比:

压缩方式文件大小(KB)画质评分(10 分制)
未压缩102410
TinyPNG5129
Squoosh (WebP)3208.5
ImageOptim7009.5

通过压缩,可以显著减小文件体积,同时保持较高的画质。

自动化图片优化:CI/CD 集成

为了提高开发效率,可以在项目中集成图片优化工具,自动完成压缩任务。以下是一个基于 Node.js 的示例:

const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");
const imageminPngquant = require("imagemin-pngquant");

(async () => {
  await imagemin(["images/*.{jpg,png}"], {
    destination: "dist/images",
    plugins: [
      imageminWebp({ quality: 75 }),
      imageminPngquant({ quality: [0.6, 0.8] }),
    ],
  });
  console.log("图片压缩完成!");
})();

在 CI/CD 管道中集成该脚本,可以在每次构建时自动对图片进行压缩。

其他优化技巧:细节决定成败

1. 雪碧图:减少 HTTP 请求

雪碧图(Sprite Image)将多个小图合并到一张大图中,通过 CSS 定位展示不同部分。这样可以减少 HTTP 请求的数量,提升性能。

sprite

注:上图展示了雪碧图的概念,来自 Windows 系统

.icon {
  background: url("sprite.png") no-repeat;
}
.icon-home {
  background-position: 0 0;
}

2. 缩略图:渐进式加载

对于大图场景,可以先加载缩略图,等用户需要时再加载高清大图。

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)" />
  <source srcset="image-large.jpg" media="(min-width: 601px)" />
  <img src="image-default.jpg" alt="example" />
</picture>

总结

图片优化的核心,是在性能和视觉效果之间找到平衡。通过合理选择格式、应用懒加载和预加载策略,以及借助强大的压缩工具和自动化流程,可以显著提升网页性能。优化 Web 图片需要综合运用多种技术手段,形成一套完整的优化方案。

参考文档

上一章节下一章节