网站速度对其成功至关重要，因为47%的访问者可能会离开加载时间超过两秒的网站。
虽然有几个因素会影响您的网站性能，但图像需要特别注意。除了使用适应不同屏幕尺寸的图像外，您还应该提供缩放图像。
提供缩放图像涉及通过将图像重新调整为完美尺寸来优化图像——不要太小，也不要太大。使用正确缩放的图像将对网站速度和性能产生积极影响，从而改善您网站的SEO（搜索引擎优化）。
本文将解释如何在您的WordPress网站上提供缩放图像。我们还提供了插件推荐，以帮助您自动提供缩放图像。
- 什么是缩放图像？
- 如何提供缩放图像？
- 步骤 1-分析网站
- 步骤 2-使用检查工具找出最大显示尺寸
- 步骤 3-重新缩放图像
- 步骤 4-替换图像
- 5个提供缩放图像支持的插件
- 1. Smush
- 2. Optimole
- 3. EWWW Image Optimizer
- 4. ShortPixel
- 5. Perfect Images
什么是缩放图像？
缩放图像是经过调整以适合网站所需的确切尺寸的图像。
如果您使用小图像填充较大的区域，则放大时会变得模糊。另一方面，如果你使用过大的图像，浏览器会缩小它们以适应给定的尺寸，但图像尺寸会保持不必要的大。
例如，如果您将500 x 500像素的图像用于50 x 50像素的缩略图，则浏览器必须先下载并缩小图片，然后才能将其显示给访问者。此过程效率低下，并且会减慢网站加载时间。
但是，如果您通过提供缩放图像来优化图像，则不会出现此问题。
如何提供缩放图像？
现在是时候学习如何在您的WordPress网站上正确提供缩放图像了。有两种方法可以做到这一点——手动或使用插件。本节将向您展示如何手动缩放图像。
步骤 1-分析网站
如果您想在完全优化整个媒体库之前尝试使用少量图像，请尝试缩放在您网站的多个页面上重复出现的图像。例如，网站徽标或标题图像。
首先，您需要在网站上找到需要重新缩放的图像以及要使用的适当尺寸。为此，我们将使用GTMetrix。
1. 打开GTMetrix并输入您的WordPress网站URL。单击Test Your Site按钮。
2. 完成网站分析后，转到“Structure”选项卡并单击“Properly size images”部分。
3. 本部分将显示您网站中的哪些图像需要优化。Potential Savings列将显示提供缩放图像后的潜在节省。保存图像的URL以备后用。
步骤 2-使用检查工具找出最大显示尺寸
WordPress已经包含一个名为srcset的用于图像优化的本机功能，它可以使您的图像具有响应性。
srcset为上传到站点的每个图像创建多种尺寸。例如，如果您上传2000 x 2000像素的图片，WordPress会自动创建其他几种尺寸的副本，例如：
- 中等尺寸– 400 x 400 像素
- 缩略图– 200 x 200 像素
然后，它向浏览器提供这些不同的尺寸，浏览器只会下载最优化的尺寸。
但是，完全依赖 srcset并不能像提供缩放图像那样显着提高站点性能。为了进一步优化您的WordPress网站，仍然需要找出显示图像的最大尺寸。
例如，如果最大显示尺寸为500 x 500像素，则无需上传2000 x 2000像素的图像。因此，要找出图像的最大显示尺寸，请使用检查工具：
1. 在Chrome中，右键单击图像并单击Inspect。如果您使用Firefox，请选择Inspect Element，或者在Edge中选择Developer Tools。在本例中，我们将使用Chrome。
2. DevTools面板将显示在浏览器窗口的右侧。在那里，图像代码将突出显示。将鼠标悬停在代码上以查看图像的Rendered size和Intrinsic size。
3. 记下Rendered size，因为它是最大显示尺寸。同时，Intrinsic size是图像的实际尺寸，是用户浏览器下载的尺寸。
步骤 3-重新缩放图像
下一步是重新调整大小不正确的图像。有多种方法可以做到这一点：使用图像编辑器、WordPress媒体库或媒体设置。让我们看看他们中的每一个。
通过图像编辑器
在WordPress网站中缩放图像的第一种方法是使用图像编辑器。有大量可用的在线和离线图像编辑器工具。
用于编辑图像的离线工具的示例包括Photoshop和GIMP。在本教程中，我们将使用在线图像编辑器PicResize。
1. 打开PicResize并选择From URL。
2. 粘贴您要编辑的图像的URL，然后单击Continue to Edit Picture。
3. Select a new size for your picture选项下有一个下拉菜单。选择Custom Size。
4. 对于新的图像尺寸，根据检查工具建议的渲染尺寸输入Width和Height。
5. 向下滚动并点击I'm Done, Resize My Picture! 按钮。
6. 通过单击Save to Disk来保存图像。立即执行，因为PicResize会在20分钟后自动删除图像。
7. 通过删除文件名开头的rsz_将图像重命名为其原始名称。
通过WordPress媒体库
要使用此方法提供缩放图像，您将使用WordPress媒体库裁剪图像。这样做的方法如下：
1. 在WordPress仪表盘上，转到文章选项卡。
2. 找到包含您要重新缩放的图像的文章，然后点击编辑。
3. 在文章上，单击要缩放的图像。选择替换->打开媒体库。
4. 将出现一个媒体库弹出窗口。在那里，导航到右列，然后单击编辑图像链接。
5. 在Scale Image部分下，您将看到原始图像的大小。在其下方的字段中输入新的缩放尺寸 – 基于上一步中的Rendered size。请注意，当您键入水平尺寸时，垂直尺寸会自动调整。单击Scale。
图像现在已成功缩放。
通过管理媒体设置
最后一种方法是通过直接调整媒体设置来缩放图像：
1. 在WordPress站点仪表盘上，导航到Settings -> Media。
2. 您将看到“Media Settings”页面，其中设置了默认图像尺寸。它包括中等和大的尺寸，以及缩略图设置。
3. 设置每个图像尺寸的最大宽度和高度。设置首选图像尺寸后，单击保存更改按钮。
这些设置将提示 WordPress 自动缩放您将来上传的图像。
步骤 4-替换图像
要手动缩放图像，您还必须替换现有图像。在这个例子中，我们将使用一个名为Enable Media Replace的WordPress插件。
1. 从插件菜单安装并启用插件Enable Media Replace。
2. 导航到Media -> Library并将布局从Grid更改为List。
3. 将鼠标悬停在要替换的图像上，然后选择Replace Media。
4. 单击Choose File按钮以选择您保存的缩放图像。
- 设置Replacement和Date选项，然后单击Upload。
对于Replacement Options ，如果缩放的版本使用相同的格式，请选择Just replace the file 。同时，对于Date Options，建议保留原来的日期。
5个提供缩放图像支持的插件
现在您已经学会了如何手动缩放图像，让我们来看看如何使用 WordPress 插件来做到这一点。
虽然手动过程允许更高的精度，但这种方法可以更轻松、更快速地提供缩放图像，因为插件将自动执行该过程。
以下是我们挑选的五个在WordPress中提供缩放图像的最佳插件。
1.Smush
Smush是用于WordPress图像优化目的的最受欢迎的插件之一。它有助于在不影响图像质量的情况下调整图像大小和压缩图像。
该插件有助于在您的WordPress网站上提供缩放图像，具有以下功能：
- 批量压缩 – 一次为多达50张图像提供高质量的图像压缩和优化，以帮助节省时间。
- 尺寸不正确的图像检测– 查找会降低站点速度的未优化图像。
- 指定目录压缩 – 压缩位于WordPress媒体库之外的目录中的图像。这包括来自其他WordPress插件和主题包的图像，以便您可以在整个站点上有效地提供缩放图像。
- 内置懒加载– 仅提供网站访问者正在查看的图像，同时延迟页面下方的其他图像。懒加载功能有助于显着提高网站速度，尤其是在网站有大量图像的情况下。
- Smush配置– 只需单击几下即可保存您首选的Smush配置设置并将其应用到站点，从而改进您的工作流程。
Smush的免费版本提供了出色的工具来在WordPress网站中提供缩放图像。它优化无限图像，只要每个图像大小不超过5MB。
同时，高级计划具有许多附加功能，例如与免费版本相比优化速度提高200%以及保持EXIF数据完整的选项，这对于摄影师来说是理想的选择。
2.Optimole
Optimole是另一个在WordPress中提供缩放图像的优秀插件。设置完成后，它将自动调整图像大小以适应各种屏幕尺寸。
借助以下工具，使用Optimole缩放图像非常简单：
- 基于格式的优化– 根据访问者浏览器支持的格式优化无限图像。例如，如果访问者使用支持WebP的浏览器，Optimole会将图像文件转换为WebP。
- 水印添加– 自动为图像添加水印。这对于保护图像免遭未经授权的使用非常有用，特别是如果您打算在网站上上传原始图像，例如您自己的插图或照片。
- 为较慢的连接降级质量– Optimole在检测到较慢的网络时会将图像大小减少到多达40%。
- 云库支持– 将您的站点图像保存在Optimole Cloud上，这将有助于节省服务器存储空间并在多个Optimole连接的网站之间交叉共享图像。
- 视网膜支持——检测视网膜屏幕并在适用时自动加载视网膜图像。
使用Optimole的免费计划，为每月最多5,000名访问者的WordPress网站缩放图像。要在流量较高的网站上使用它，必须订阅高级计划。
3. EWWW Image Optimizer
EWWW Image Optimizer是一种图像优化工具，可帮助您在WordPress网站上缩放图像。
通过使用EWWW Image Optimizer的一系列出色功能来提供缩放图像，例如：
- 无限文件大小优化– 优化所有大小的图像。如果您想优化比EWWW Image Optimizer测试过的尺寸更大的图像，只需联系他们。
- 批量优化– 通过优化单个页面上的所有图像（包括媒体库目录之外的图像）来更有效地工作。
- 删除元数据——从不必要的数据中去除图像。
- 自适应转换——EWWW图像优化器支持JPG、PNG、GIF和WebP图像格式。它的智能转换会自动检测最佳图像格式，例如，将PNG转换为JPG或WebP格式（如果适用）。
- 与其他插件的兼容性 – 该插件与数百个 WordPress 插件和主题兼容，例如Perfect Images Retina，可在上传过程中自动优化视网膜图像。
EWWW Image Optimizer的核心插件是免费的，但付费计划提供更强大的功能。他们可以处理多个网站上的图像优化，并增加带宽限额。
4.ShortPixel
Shortpixel通过提供高质量的图像压缩来有效地提高WordPress网站的性能。
该插件将通过使用以下功能来帮助提供缩放图像：
- 自动调整图像大小– 在您上传图像时自动调整图像大小，以实现更有效的工作流程。
- 光泽优化——这种类型的图像压缩提供一流的图像质量，但可能会导致页面加载速度略有下降。这对摄影师很有用，因为它有利于图像质量而不是页面速度。
- 保留或删除 EXIF 数据– 非常适合摄影师仅提供所选图像的必要数据，从而优化网站性能。
- 跳过优化的图像——ShortPixel不会过度优化站点图像，因为它会跳过任何已经优化的图像。
- 批量优化– 只需单击一下即可优化媒体库选项卡或其他站点目录中的图像。
它的免费版本每月优化多达150张图像。同时，其付费版本包括具有各种图像配额的月度和一次性计划。此外，ShortPixel为非营利组织提供免费的优化积分。
5.Perfect Images
Perfect Images有助于优化WordPress的视网膜显示图像。该插件的功能包括：
- 高清缩放图像——自动生成视网膜图像，为超高分辨率屏幕提供优化图像。
- 媒体库视图– 更容易查看需要将哪些图像转换为视网膜图像。对于具有大量图像的网站特别有用。
- 缩略图再生– 帮助为每次图像更改重新生成缩略图。这可以批量完成以节省时间。
- 图像阈值控制——WordPress可能会自动调整大图像的大小，而视网膜图像会故意在分辨率和大小上保持较大。Perfect Images可让您通过禁用图像阈值来控制此功能。
- 图像替换– 使用视网膜版本快速轻松地替换图像。
除了免费计划外，这个WordPress插件还提供付费版本，支持延迟加载、自动调整站点媒体库中的图像大小，并可在多个网站上使用。
小结
提高WordPress网站性能的最佳方法之一是提供缩放图像。这意味着调整站点图像的大小以适合放置它们的区域的确切尺寸。
优化图片可以显着改善您网站的加载时间和在搜索引擎结果中的排名，从而增加网站流量并降低跳出率。
此外，在WordPress网站中提供缩放图像并不难。您可以手动完成，也可以使用 WordPress 插件。
如果您选择遵循手动方法，则步骤包括：
- 分析网站——在网站上找到需要重新缩放的图像。
- 找出图像的最大显示尺寸——使用检查工具找出图像的最大显示尺寸。
- 缩放图像——通过使用图像编辑器或通过媒体设置指定最大图像尺寸，将图像缩放到适当的尺寸。或者，通过WordPress媒体库裁剪图像。
- 替换原始图像– 用正确缩放的图像替换现有图像。
如果您更喜欢使用更实用的方法提供缩放图像，请使用插件。这样做会自动在WordPress网站中提供缩放图像，这样您就可以专注于其他重要的网站方面。
原文地址：https://www.wbolt.com/serving-scaled-images.html
