如何优化 Web 图像：提高站点性能的分步指南
已发表: 2023-02-12毫无疑问，图像是万维网的宝贵资产。 从可视化数据到拆分文本段落，再到展示您的作品集，照片和图形是大多数网站设计的重要组成部分，可帮助用户获得出色的在线体验。
然而，拥有出色的视觉效果会对您的网站造成影响。 分辨率越高，文件越大，这也意味着加载时间越慢。 又名，图像通常是网站性能不佳的原因。 请记住，将图片添加到您的网站的全部目的是为您的用户创造更好的体验（或者甚至可能增加销售和转化！），这对于速度慢的网站来说很难做到。
那么，您如何平衡网站性能与视觉设计？
通过优化图像。
在整个图像创建过程中，您可以做很多小事来优化文件大小，特别是考虑到您的网站。
在这个图像优化分步指南中，我将介绍：
- 什么是图像优化？
- 为什么图像优化很重要？
- 为网络优化图像的 7 种方法
什么是图像优化？
一般来说，图像优化是在不降低质量的情况下减小文件大小的行为。 您可以在创建阶段优化您的图像（通过使用 Photoshop 中正确的“导出”选项）或直接在您的网站上（通过使用延迟加载在您的网站上显示媒体）。 目标是减少用户必须下载的数据量，这样他们就可以在不牺牲质量的情况下更快地获得他们正在寻找的内容。
为什么图像优化很重要？
人们对网络的注意力持续时间很短，这就是为什么让您的网站在两秒或更短时间内加载很重要。 使您的网站变慢的最常见因素之一是您的图片。 （即使您的网站运行在最好的服务器上，就像您使用托管 WordPress 主机一样，图像也可能会降低性能。）
通过利用图像优化最佳实践，您将保持较小的文件大小和较快的加载时间，从而为您的站点访问者创造更好的体验。
图像优化很重要的另一个原因是，它直接关系到您的业务底线。 除了减慢您的网站速度之外，图像还会占用为您的网站提供支持的服务器上的磁盘空间。 大多数托管服务提供商对每个计划实施带宽限制，这意味着您没有无限的资源——您的图像将很快占用该空间。
虽然如果您超过该限制还不是世界末日，但您可能会被收取超额费用，或者更糟糕的是，您的网站将被关闭。
通过优化您的图像，您将能够充分利用您的站点存储并避免带宽限制。
现在您知道图像优化的重要性，让我们谈谈如何去做吧！ 本分步指南将涵盖从 Photoshop 技巧到开发实践的所有内容。
如何为网络优化图像
本分步指南将涵盖您可以为优化图像所做的一切，从 Photoshop 开始到您的网站结束。
请按照以下步骤优化图像以获得更好的网站性能：
- 对您当前的站点速度进行基准测试。
- 了解如何选择最佳图像文件类型。
- 导出前调整图像大小。
- 压缩图像以减小文件大小。
- 使用 WordPress 插件自动优化图像。
- 使用“模糊”技术首先加载较低质量的图像。
- 使用延迟加载。
1. 对您当前的站点速度进行基准测试
在你做所有这些工作来优化你的图像之前，首先在你的网站上运行速度测试！ 到最后，您将能够看到您所产生的影响（此外，您还可以与您的团队或老板分享，以获得额外的荣誉）。 一些流行的速度测试工具是：
- 谷歌 PageSpeed 洞察力
- Pingdom 工具
- GTMetrix
- 网页测试
这些基于浏览器的工具彼此之间的工作方式非常相似：打开链接，然后输入您的 URL 以获得有关您网站速度和性能的快速报告。
2.知道如何选择最佳图像文件类型
创建完图像后（从相机保存或从 Photoshop 等工具导出），您可以选择指定文件类型。 Web 上最常用的文件类型是 JPEG、PNG 和 GIF。 而且我相信您可以猜到，将它们放在您的网站上时，它们都有自己的优点、缺点和最佳实践。
JPEG文件
JPEG 图像最适合在您的网站上展示复杂的彩色照片，因为它们允许以较小的文件大小获得更高质量的图像。 这种文件类型可能适用于您要在网站上使用的大多数图像，但有一个主要例外：具有透明背景的图像。 （对于那些，请参阅下一节关于 PNG 的内容！）
当您的网站使用 JPEG 图像时，请考虑将其导出为“Progressive”。 这允许浏览器在将完整分辨率完全加载到站点之前立即加载图像的简单版本。
如果您在 Photoshop 中工作，您会在导出为“存储为 Web 格式”时找到此设置。
PNG
如果您的图像中没有大量颜色（如平面插图或图标），或者希望它具有透明背景，我建议导出为 PNG。 确保您的图像尺寸正确，并寻找另存为 PNG-24（或 8，如果没有质量损失）的选项。
动图
第三种最常见的网络图像格式是 GIF。 它们仅支持 256 色，因此您必须对这种文件类型有所选择！
要为您的网站优化 GIF，请认真考虑它们的持续时间、是否需要循环以及您在给定页面或网站上真正需要多少。
3.上传前调整图片大小
为网络优化图像的最简单方法之一是在将图像上传到您的站点之前调整它们的大小。 尤其是当您处理来自 DSLR 相机的原始图像时，尺寸通常比您实际需要的要大得多。
例如，假设您要将图像添加到您网站上的博客文章中。 如果您的 WordPress 主题以 500 x 500 显示图像，但您上传的图像分辨率为 1024 x 1024，那么所有这些额外的像素只会增加文件大小并降低站点速度，而不会提供真正的好处。
通过在上传前裁剪或调整图像大小，您将减小文件大小，这将有助于您的网站加载速度稍微快一点，并节省磁盘空间以容纳更多图像。
要调整图像大小，只需打开您选择的图像编辑软件即可。 Photoshop 效果很好，或者您也可以使用更简单的工具，例如 Preview（适用于 Mac）、Paint（适用于 Windows）或 Canva（一种浏览器工具）。
4.压缩图像以减小文件大小
一旦您获得最终图像，以正确的格式保存并裁剪为合适的尺寸，在上传到您的网站之前您还可以采取一个步骤来优化它：压缩它。
此过程将帮助您缩小文件大小而不会明显降低图像质量。 有两种主要的压缩类型：有损和无损。
无损压缩将在压缩前后保持相同的质量水平。 有损压缩会丢弃照片的某些元素，但通常是以人眼不会注意到的方式。 要了解有关这些压缩类型的更多信息，我推荐 Imagify 的本指南。
如果您在站点上看到特定图像加载并慢慢进入视野，这可能表明它需要压缩、调整大小或两者兼而有之。
要压缩图像，您只需要一个图像压缩工具。 我的最爱包括：
- TinyPNG：一种基于浏览器的免费工具，用于压缩 PNG 和 JPEG 图像。
- ImageOptim：用于压缩图像的免费开源应用程序。
- JPEGmini：适用于 Mac 和 Windows 的照片再压缩应用程序。
- RIOT：用于优化图像的免费 Windows 应用程序。
- Image Optimizer：一个免费的 Local 插件。
小PNG
这个基于浏览器的工具使用智能有损压缩优化图像，通过减少使用的颜色数量来减小文件大小。 （但别担心，您甚至不会注意到！）它免费且快速用于 PNG 和 JPEG。
图像优化
这是一款免费的 Mac 应用程序，可通过消除不必要的膨胀来压缩图像，同时尽可能保持图像质量。
JPEG迷你
JPEGmini 是一个功能强大的付费选项，可帮助您减小文件大小，同时保持质量和格式。 它确实有免费试用版，因此您可以在购买前试运行。
暴动
Radical Image Optimization Tool (RIOT) 是一款免费的 Windows 应用程序，用于减小图像文件的大小。 它具有并排视图，因此您可以比较压缩前后的图像质量。
Image Optimizer，一个免费的 Local 插件
如果您使用 Local 作为您的本地开发环境，您可以使用 Image Optimizer Add-on 自动离线压缩图像。 它会扫描您的站点以查找所有图像文件，从而节省您单独压缩它们并在此过程中加快站点速度的时间。
5. 使用 WordPress 插件自动优化图像
在这一点上，您可能会开始认为图像优化是一项繁重的工作——而且确实如此！ 但也有一种简化其中一些步骤的简单方法，那就是在您的 WordPress 网站上安装图像优化插件。
我有一些建议，它们各有特色。 但通常，图像优化插件会在您上传到 WordPress 网站时压缩图像并调整其大小。 这意味着您可以跳过这些步骤而不是手动执行它们，从而节省大量时间。
如果您正在为客户构建站点，这种方法也很不错。 尝试记住图像优化过程的每一步对于最终用户和内容创建者来说压力很大。 通过安装一个将为他们完成大部分工作的插件，您将有助于确保您所构建网站的速度和性能，一旦您将其移交。
要优化 WordPress 网站上的图像，我推荐这些插件：
- EWWW 图像优化云
- 小PNG
- 克拉肯.io
- 想像
EWWW 图像优化云
当您将图片上传到您的网站时，此 WordPress 插件会自动优化您的图片，或者它还可以优化您过去上传的图片。 如果您正在使用具有未优化图像的现有站点，这将非常有用。
小PNG
TinyPNG 团队的这个 WordPress 插件可以在上传时优化 JPEG 和 PNG 图像。 如果您是基于浏览器的工具的粉丝，可以使用他们的免费插件简化流程！
克拉肯.io
Kracken.io 插件可以优化 WordPress 网站上的新图片和现有图片。 它还支持无损和有损压缩模式，让您可以充分控制最终结果。
想像
这个 WordPress 插件将帮助优化您的图像而不会降低质量。 如果您使用的是 WooCommerce 和 NextGen Gallery，它也与这些插件兼容。
注意：在选择插件之前，一定要看看它们是如何运作的。 一些使用服务器征税操作可能会导致您的站点出现问题，而另一些则使用 FTP 选项来减轻您的 Web 服务器上的负载。
6.使用“模糊”技术首先加载质量较低的图像
即使在前面的所有优化步骤之后，在某些情况下，您仍然可能在页面上处理大文件或大量图像，从而降低您的网站速度。 在这些情况下，有时不仅可以优化图像，还可以优化加载体验，这样网站访问者就会认为您的媒体文件加载速度比实际速度要快。
这就是接下来两个步骤的全部内容——提供更快加载图像的外观，这样用户就不会在加载文件时盯着空白页面。
一种方法是先加载低质量图像 (LQI)。 通过在加载全尺寸图像之前加载较小版本的图像，它可以让用户在等待所有细节时看到一些东西。 这给人一种加载时间更快的感觉，即使从技术上讲，所有内容都以相同的速度加载。
一种流行的方法是“模糊”技术，您可以通过本 CSS-Tricks 教程了解如何实施。
7.延迟加载您的网站图片
与“模糊”技术类似，还有一个技巧可以帮助您呈现加载速度更快的图像外观：延迟加载。
当有人登陆您的网站时，他们会从页面顶部开始。 滚动整个页面可能会花费他们一些时间，尤其是当他们参与其中时。 延迟加载不是尝试一次加载所有图像，而是假设用户最关心他们可以看到的内容。 因此，他们的浏览器视图中的图像首先完全加载，而其他图像首先加载占位符，直到用户滚动到页面的该部分。
延迟加载本身就是一项很棒的技术，与这些图像优化技巧的其余部分搭配使用时会更加强大！ 而且，由于 Smush 插件，在 WordPress 网站上做起来非常容易。
我们通过优化图像获得更好网站性能的分步指南到此结束！ 要查看这对您的站点产生的影响，请运行另一个速度测试。 你好吗？
使用正确的图像优化工具，您将能够立即看到更好的网站速度和性能！