白骑士的CSS教学最佳实践篇之性能优化 8.3.3 图片与字体的优化

        在网页设计中，图片和字体通常是页面中资源占用较大的部分，它们直接影响网页的加载速度与性能优化。因此，合理地优化图片和字体是提升用户体验的重要一环。本文将详细介绍图片和字体优化的策略与方法，帮助开发者打造性能更优的网页。

图片优化的重要性

        图片在网页中扮演着至关重要的角色，往往是视觉设计的核心部分。然而，大量未经优化的图片会显著增加网页的加载时间，特别是在移动设备或低带宽的环境中。图片优化能够有效减少图片的体积和资源占用，提高网页的加载速度。

图片优化策略

选择合适的图片格式

        图片格式的选择直接影响图片的质量与大小，不同的格式适用于不同的图片内容：

• JPEG：适用于照片或含有复杂颜色的图片，能够在质量和文件大小之间取得平衡。
• PNG：适用于需要透明背景或简单图形的图片，但文件体积通常较大。
• WebP：是一种新型图片格式，具有更高的压缩率，能够在较小的文件大小下保持高质量图像。
• SVG：适用于矢量图形，文件体积小且可缩放不失真，常用于图标、徽标等。

图片压缩

        压缩是图片优化的关键步骤，通过去除不必要的元数据、降低分辨率或减少颜色数，能够显著减少文件大小。常用的图片压缩工具和方法包括：

• TinyPNG/TinyJPG：在线图片压缩工具，支持PNG和JPEG格式，能够在不明显影响质量的情况下压缩图片。
• ImageOptim：一款本地图片优化工具，能够批量压缩多种格式的图片。
• WebP压缩：使用工具如‘cwebp‘将JPEG或PNG图片转换为WebP格式，能够减少图片大小。

• cwebp -q 80 image.png -o image.webp

响应式图片

        使用响应式图片技术，可以根据用户设备的屏幕分辨率、网络状况等动态加载合适的图片资源，避免加载过大的图片导致性能问题。

• ‘srcset‘与‘sizes‘属性：可以在‘<img>‘标签中使用‘srcset‘和‘sizes‘属性，指定不同分辨率的图片资源供浏览器选择。

  <img src="image-480w.jpg"
          srcset="image-480w.jpg 480w,
                  image-800w.jpg 800w,
                  image-1200w.jpg 1200w"
          sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
          alt="Responsive Image">

• ‘<picture>‘元素：通过‘<picture>‘元素，可以提供多种格式的图片资源，浏览器会根据支持情况选择最佳格式。

  <picture>
      <source srcset="image.webp" type="image/webp">
      <source srcset="image.jpg" type="image/jpeg">
      <img src="image.jpg" alt="Optimized Image">
  </picture>

图片懒加载

        对于页面中不在初始可视区域的图片，可以使用懒加载技术来延迟加载图片资源，减少页面初始加载时间。HTML5原生的‘loading‘属性以及JavaScript懒加载库都可以实现这一功能。

<img src="image.jpg" alt="Lazy Loaded Image" loading="lazy">

字体优化的重要性

        字体文件也可能占用较大的资源，尤其是当网页使用多个自定义字体或字体权重时。未经优化的字体文件会增加HTTP请求次数和文件体积，影响网页的性能。

字体优化策略

选择合适的字体格式

        不同的字体格式有着不同的兼容性与文件大小：

• WOFF/WOFF2：目前最常用的网页字体格式，具有较好的压缩率和兼容性。WOFF2相比WOFF体积更小，优先使用WOFF2。
• TTF/OTF：传统字体格式，兼容性较好，但文件体积通常较大。尽量转换为WOFF或WOFF2格式使用。

字体子集化

        对于大多数网页来说，并不需要加载字体文件中的所有字符（如某些字体包含完整的Unicode字符集）。通过字体子集化工具（如Font Squirrel的子集生成器），可以只包含网页中实际需要的字符，减少字体文件的体积。

@font-face {
    font-family: 'CustomFont';
    src: url('customfont-subset.woff2') format('woff2');
}

字体懒加载

        类似于图片的懒加载，字体也可以延迟加载。通过‘font-display‘属性，可以控制字体加载的行为，避免阻塞页面渲染。

• ‘font-display: swap;‘：允许使用系统字体作为占位符，直到自定义字体加载完成。

@font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff2') format('woff2');
    font-display: swap;
}

减少字体权重的使用

        尽量避免在网页中使用过多的字体权重（如‘bold‘、‘italic‘等），因为每一个权重通常对应着独立的字体文件。可以通过CSS中的‘font-weight‘、‘font-style‘属性灵活调整样式，减少字体文件的数量。

压缩与优化字体文件

        使用工具如‘Fontmin‘或‘Glyphhanger‘等，可以对字体文件进行压缩和优化，进一步减少体积。

fontmin --text "Hello World" --fontpath fonts/ --dest fonts/min/

总结

        图片与字体的优化是提高网页性能的核心步骤，通过合理选择格式、压缩、懒加载等技术手段，开发者可以显著减少资源加载时间，提升网页的整体用户体验。在实际项目中，应该根据页面的需求选择合适的图片和字体优化策略，以构建更加高效的网页。