如何优化图像以提高性能
图片是网页的重要组成部分。它们不仅占据大量的屏幕空间，而且还占网页总大小的很大一部分。
截至 2021 年 1 月，图片平均占页面总重量的 45%（桌面端）和 48%（移动端）（HTTP Archive）。
因此，优化图像可以大幅减小页面总大小，从而提高页面性能。
☑️ 使用正确的图像格式
为图像选择合适的格式，就像工匠为工作选择合适的工具一样。
他可以用普通锤子盖房子，但如果改用射钉枪，就能大大加快盖房子的速度。
图片也是如此。如果你想显示一张猫的图片，可以使用PNG格式，但更好、更快捷的方法是使用JPG格式。
我们来了解一下几种最常见的图像格式以及何时使用它们。
JPEG / JPG（联合图像专家组）
自 1992 年推出以来，JPEG 格式一直主导着网络。
JPEG 使用有损压缩，这意味着随着图像质量的降低，文件大小也会减小。
JPEG格式不支持透明度——它必须具有纯色背景。
注意：JPG 和 JPEG 是同一种图像格式。“E”被移除是为了兼容早期 Windows 版本中三个字符的限制。
JPEG格式适用于：照片和艺术作品。
PNG（便携式网络图形）
与 JPG 相比，PNG 显示更高的颜色深度（意味着数百万种颜色），并且还支持透明度。
PNG 使用无损压缩，这意味着压缩不会影响图像质量。
PNG 格式非常适合用于插图和带有文字的图像（例如漫画），因为它不像 JPEG 那样会出现像素化。
注意：由于 PNG 是无损格式，文件大小可能会非常大。
PNG 格式适用于：透明图形、插图、带有文字的图像。
GIF（图形交换格式）
GIF 的历史可以追溯到 1987 年。它在 2000 年代几乎消亡，但由于其动画支持，随着表情包文化的爆发，它迎来了复兴。
它很快融入了流行文化，现在动画 GIF 无处不在（例如，几乎所有即时通讯应用都有一个 GIF 专区，你可以在其中发送动画 GIF）。
由于 GIF 图像仅支持 256 种颜色，因此通常看起来有像素化（这可以通过调整来实现）。
注意：动画 GIF 实际上只是一组单独的图像；因此，文件大小可能会非常大。
GIF 也使用了无损压缩。
GIF 适用于：动画和简单的图形。
SVG（可缩放矢量图形）
SVG 是一种基于 XML 的矢量格式，这意味着它可以自动缩放。您可以将其放大 1000 倍，而不会影响分辨率或文件大小。
它非常适合用于徽标、图标和文本，而且通常比 JPG 或 PNG 文件大小更小。
通过添加一些代码，您还可以为 SVG 添加动画效果并使其具有交互性。
SVG 适用于：插图、徽标和图标。
WebP（网络图片格式）
WebP是图像处理领域的新秀。它由谷歌开发，旨在呈现更小巧、更丰富的图像，从而提升网络速度。
WebP 文件大小比 JPEG 和 PNG 小 25-35%，支持无损和有损压缩、动画以及有损压缩时的透明度。
那为什么它没有普及呢？因为浏览器不支持。
尽管支持率稳步增长，但截至2021年2月，仍然“只有”92%。不过，我们正在朝着目标前进。
但这并不意味着你不能使用 WebP——你只需要一个备用图像。
通过使用<Picture>`<image>` 标签，您可以提供一个备用图像，例如，如果用户的浏览器不支持 WebP 格式，则可以使用 JPEG 图像。如果您使用的是 WordPress，可以使用ShortPixel之类的插件来实现此功能。
WebP格式适用于：照片、插图等。
🎥 使用视频代替动画 GIF
如前所述，动画 GIF 的文件大小可能非常大——有些甚至达到两位数兆字节。
幸运的是，将 GIF 转换为视频文件相对容易，而且由于 -tag 中的“autoplay”属性<video>，它仍然可以具有与 GIF 相同的外观和感觉。
您可以使用CloudConvert等服务将 GIF 转换为 MP4 格式。
🗜️ 压缩，压缩，压缩
压缩图片是减小页面大小最简单快捷的方法之一。
什么是图像压缩？
“图像压缩是数据压缩的一种应用，它用少量比特对原始图像进行编码。图像压缩的目的是减少图像的冗余信息，并以高效的方式存储或传输数据。”
-来源：《图像压缩入门》。
市面上有很多优秀的图像压缩工具——包括网页版和插件。大多数情况下，你从图像质量上看不出图像被压缩过，但节省的文件大小却说明了一切。
您可以使用的一些工具：
- TinyPNG（PNG 和 JPG 格式）
- 挤压
- Kraken.io（Web 和 WordPress / Magento 插件）
- Compressor.io
- ShortPixel（WordPress插件）
- Smush（WordPress插件）
- Crush.pics（Shopify插件）
- 压缩机或死亡
- ……还有更多
🤏 缩小规模
越大并不一定越好。虽然上传图片时，你可能很想尽可能提高图片的分辨率，因为你想让用户看到尽可能清晰的图片。
不。
你向用户提供过大的图片，浪费了用户的带宽，损害了网站的性能。
我们之前见过宽度为 3000 像素到 4000 像素的图片，这完全不合理。如果您使用的是 WordPress，可以使用像Imsanity这样的插件自动将图片缩放到合适的尺寸。
所以请确保您的图片尺寸正确。
如果您使用图标，最好检查一下它们上传时的尺寸。如果您显示图标的最大尺寸是 32×32 像素，那么您应该将大于此尺寸的图标缩小。
📱 保持响应迅速
以前，当我们都在用 800×600 分辨率浏览网页时，由于大家的屏幕尺寸大致相同，所以提供图片比较容易。
如今情况已大不相同。屏幕尺寸从屏幕宽度仅为 320 像素的小型安卓手机到尺寸惊人的 49 英寸显示器，种类繁多。
因此，与其对图片采用“一刀切”的方式（所有设备都显示同一张图片），不如使用响应式图片。
通过向较小的设备提供缩减版的内容，可以节省 2-4 倍的数据。
那么应该提供多少个版本呢？这个问题没有标准答案，但通常会提供 3 到 5 种不同尺寸的图片。
我们不会深入探讨如何针对不同分辨率提供不同尺寸的图片，但Mozilla 在这里提供了一个很好的资源来解释这一点。
您还可以使用Cloudinary等云服务（他们也有WordPress 插件）来提供响应式图像。
😴 图片懒加载
我们已经知道图片会占用页面总大小的很大一部分。但是，如果不用立即下载所有图片呢？
延迟加载正是实现这一功能。启用后，图片在用户可见之前不会下载或渲染。
这实际上意味着你可以在首屏下方放置无限数量的图片——而不会影响你的性能。
过去，你需要自定义 JavaScript 才能启用它，但从 2020 年初开始，它已成为一项 Web 标准，这意味着你只需在你的<img><head> 标签中添加 loading="lazy" 即可启用它。是不是很棒？
此外，自WordPress 5.5起，所有图片默认都会延迟加载。
可惜的是，情况并非尽如人意。由于这是一个相对较新的功能，并非所有浏览器都支持该属性。例如，总是慢半拍的 Safari 目前还不支持。您可以在这里查看浏览器对 loading-attribute 属性的支持情况。
🔍 使用 Alertdesk 分析您的内容
在我们的性能报告中，您将找到所有内容的详细分类，包括图片。
更好地了解它如何影响您的性能，并快速识别负载过重者。
立即使用 Alertdesk 开始分析您的内容。免费试用 14 天。
文章来源：https://dev.to/kaspera/how-to-optimize-your-images-for-performance-24pn