图片优化入门：前端工程师的图片效率指南
▼ 关注「之家前端共享」，获取更多技术干货 ▼
在当今互联网时代，网站性能已经成为用户体验的关键之一。据 httparchive 最新提供的 2024年4月 Page Weight（页面权重）相关数据展示：图片资源占据了整个网页资源的 57%。比其他资源类型如 CSS、JavaScript、字体 等资源类型的总和还要多。
在Web开发中，“Page Weight（页面权重）”是指网页的总体大小，通常以字节（bytes）或者更常见的是以“千字节”（kilobytes，KB）或“兆字节”（megabytes，MB）来衡量。Page Weight 是一个重要的性能指标，它直接影响到网页的加载速度和用户体验。
与此同时，根据过去一年内的图片请求量与图片字节的数据显示，图片请求量在几乎不变的情况下，图片字节却在不断增加。虽然网页内的平均图片请求量几乎不变，网页内的 图片的大小却增加了约 `5%`。
这意味着，随着硬件设备与网络速度的不断提升，网页的图片正在变得越来越大，在提高网站的性能的过程中,优化图片资源应作为我们的首要任务之一。在本文中，我们将讨论图片格式、压缩技术以及评估图片性能的指标。
一、优先考虑替代方案: CSS、SVG 及 WEB Font
在Web开发中，有时候我们可以使用其他替代方案来替代图片，这样可以减少页面的加载时间。以下是一些常见的替代方案：
替代方案 1：CSS
使用 CSS 可以轻松地创建简单的图形和图案，如纯色背景、渐变和形状。这些样式可以通过 CSS 属性直接应用到 HTML 元素上，而无需额外的图片资源，从而减少了 HTTP 请求和页面加载时间。
替代方案 2：SVG
SVG 是一种矢量图形格式，它以 XML 格式存储图形信息，可以通过 CSS 和 JavaScript 进行控制和动态修改。SVG 图形可以无限放大而不失真，适用于各种分辨率和屏幕尺寸，因此非常适合用于图标、简单的图形和动画。
替代方案 3：WEB Font
使用 Web 字体可以将特定字体应用到网页文本中，而无需将文本呈现为图片。这样可以节省带宽，并允许文本保持清晰度和可选的可访问性。常见的 Web 字体格式包括 WOFF（Web Open Font Format）和WOFF2，它们支持多种字体样式和语言，并能够与 CSS 配合使用。
替代方案 4：Icon Fonts
Icon Fonts 是一种将图标呈现为字体形式的替代方案。它们通常是包含了各种图标的字体文件，可以通过 CSS 控制在网页中显示。
二、图片格式
在Web开发中，选择合适的图片格式至关重要。不同的图片格式具有不同的特点和适用场景，正确选择可以提高页面加载速度、优化用户体验并减少带宽消耗。
APNG(image/apng)
动态可移植网络图形，是无损动画序列的良好选择（GIF 性能较差）。AVIF 和 WebP 性能更好，但浏览器支持较少。以下浏览器支持：Chrome、Edge、Firefox、Opera、Safari。
AVIF (image/avif)
AVIF 图像档案格式，由于其性能高，且无需版税，是图像和动画图像的理想选择。与 PNG 或 JPEG 相比，它的压缩效果更好，支持更高的色深、动画帧、透明度等。请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（也就是说，要使用 <picture> 元素）。以下浏览器支持：Chrome、Firefox（只支持静态图，动态图尚未实现）、Opera、Safari。
GIF (image/gif)
图像互换格式，是简单图像和动画的不错选择。无损和有索引的静态图像首选 PNG，动画序列可考虑 WebP、AVIF 或 APNG。以下浏览器支持：Chrome、Edge、Firefox、IE、Opera、Safari。
JPEG (image/jpeg)
联合图像专家小组图像，静态图像有损压缩的理想选择（目前最流行）。如果需要更精确地再现图像，则首选 PNG；如果需要更好的再现效果和更高的压缩率，则首选 WebP/AVIF。以下浏览器支持：Chrome、Edge、Firefox、IE、Opera、Safari。
PNG (image/png)
便携式网络图形，与 JPEG 相比，PNG 能更精确地再现源图像，或在需要透明的情况下更受青睐。WebP/AVIF 可提供更好的压缩和再现效果，但浏览器的支持比较有限。以下浏览器支持：Chrome、Edge、Firefox、IE、Opera、Safari。
WebP (image/webp)
Web 图像格式，是静止图像和动画图像的绝佳选择。WebP 的压缩效果比 PNG 或 JPEG 好得多，而且支持更高的色深、动画帧和透明度等。AVIF 的压缩效果稍好，但在浏览器中的支持度不高，而且不支持渐进式渲染。以下浏览器支持：Chrome、Edge、Firefox、Opera、Safari。
信息来源：
[MDN Web Docs]
(https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types)
三、图片压缩
在Web开发中，图片压缩是一种重要的优化技术，它可以减少图片的文件大小，从而减少页面的加载时间。
图片压缩前后对比：
390KB
120KB
有损压缩
有损压缩是指在压缩过程中会丢失部分图像信息，从而减小文件大小。这种压缩方式适用于对图像质量要求不是特别高的场景，例如网页上的大部分图片。常见的有损压缩算法包括JPEG、WebP（有损模式）等。有损压缩可以显著地减小文件大小，但可能会导致图片出现轻微的失真。
无损压缩
无损压缩是指在压缩过程中不会丢失图像信息，从而保持图片质量的同时减小文件大小。这种压缩方式适用于对图像质量要求较高的场景，例如图标、线条图等。常见的无损压缩算法包括PNG、WebP（无损模式）等。虽然无损压缩无法达到有损压缩那样极致的压缩效果，但能够保持图像质量的完整性。
压缩工具
在Web开发中，有很多优秀的图片压缩工具可以帮助我们压缩图片，从而减小文件大小。以下是一些常用的图片压缩工具：
TinyPNG (https://tinypng.com/)：这是一款在线图片压缩工具，可以将 PNG 和 JPEG 图片压缩到更小的文件大小，而不影响图像质量。它提供了简单易用的界面，让用户可以快速上传和压缩图片。
Squoosh (https://squoosh.app/)：Squoosh 是 Google 开发的一款图片压缩工具，可以在浏览器中快速压缩图片。它支持多种压缩算法和参数设置，用户可以根据需要调整压缩质量和文件大小，以实现最佳的压缩效果。
imagemin (https://www.npmjs.com/package/imagemin): imagemin是一个用于压缩图片的npm包，它支持多种图片格式，包括PNG、JPEG、GIF、SVG等。通过使用不同的插件，可以轻松地集成到构建流程中，实现自动化压缩图片的目的。
tinify (https://www.npmjs.com/package/tinify)：tinify是一个用于压缩JPEG和PNG图片的npm包，它提供了简单易用的API，可以通过Node.js代码调用Tinify的服务进行图片压缩。虽然它是一个付费服务，但提供了免费的API配额，适合小型项目和个人开发者使用。
四、性能评估指标
在Web开发中，我们可以使用一些工具来评估图片的性能，从而优化图片资源。以下是一些常用的图片性能评估指标：
文件大小
图片文件大小直接影响了网页的加载速度。较大的图片文件需要更长的时间下载，从而延长了网页的加载时间。因此，尽量减小图片的文件大小是优化图片性能的首要任务之一。通常情况下，我们可以通过压缩图片、选择适当的图片格式以及优化图片质量来减小文件大小。
图片尺寸
除了文件大小外，图片的尺寸也会影响加载速度。过大的图片尺寸可能会导致页面内容的不必要的展示延迟，尤其是在移动设备上。因此，确保图片尺寸适合在网页中的显示是至关重要的。通过调整图片尺寸，可以减少不必要的像素数量，从而降低图片文件的大小和加载时间。
加载时间
图片加载时间是指从请求发送到图片完全呈现在用户浏览器中所需的时间。优化图片加载时间可以提高用户体验，并减少用户的等待时间。常用的方法包括使用图片懒加载技术、延迟加载以及使用 CDN 加速图片加载等。
图片格式
选择合适的图片格式对于优化图片性能至关重要。不同的图片格式具有不同的压缩算法和透明度支持，因此在选择图片格式时需要根据具体情况进行权衡。例如，JPEG 格式适用于照片和复杂图像，而 PNG 格式适用于带有透明背景的图像。最新的图片格式如 WebP 和 AVIF 可以提供更好的压缩率和质量，但在浏览器支持方面可能存在一些限制。
视觉质量
除了优化图片的加载速度外，还需要注意保持图片的视觉质量。过度压缩可能会导致图片失真或模糊，从而影响用户体验。因此，在优化图片性能时，需要在保证文件大小的前提下尽量保持图片的清晰度和细节。
兼容性
最后，还需要考虑图片在不同设备和浏览器上的兼容性。确保所选择的图片格式和优化策略在各种浏览器和操作系统上都能正常显示和加载，以提供一致的用户体验。
五、性能评估工具
Network
在浏览器的开发者工具中，可以通过 Network 面板查看网站中的图片请求情况，包括请求时间、文件大小、加载时间等信息。通过分析这些数据，可以了解图片的加载性能，并进行相应的优化。
Lighthouse
Lighthouse 是一款由 Google 开发的网页性能评估工具，可以帮助开发者评估网页的性能、可访问性、最佳实践等方面。在 Lighthouse 中，可以查看网站中的图片性能指标，包括图片文件大小、加载时间、格式选择等信息。通过 Lighthouse 的评估报告，可以了解网站中的图片优化情况，并提出相应的优化建议。
PageSpeed Insights
PageSpeed Inights (https://developers.google.com/speed/pagespeed/insights/)是另一款由 Google 开发的网页性能评估工具，可以帮助开发者评估网页的性能，并提供优化建议。在 PageSpeed Insights 中，可以查看网站中的图片性能指标，包括图片文件大小、加载时间、格式选择等信息。通过 PageSpeed Insights 的评估报告，可以了解网站中的图片优化情况，并提出相应的优化建议。
六、总结
在当今互联网时代，图片优化已经成为网站性能优化的重要环节。通过选择合适的图片格式、压缩图片文件、优化图片加载时间等方法，可以有效提高网站的性能，优化用户体验。在Web开发中，我们应该重视图片优化，不断学习和掌握图片优化的最佳实践，以提高网站的性能和用户体验。
▼ 关注「之家前端共享」，获取更多技术干货 ▼