如何在 WordPress 中轻松提供缩放图像（一步一步）

您是否曾经访问过一个网站，并在几秒钟内离开，因为图片加载不够快？这正是如果您没有在WordPress站点上提供缩放图片时，您的访客可能会经历的情况。. 

当您的图像尺寸超过显示大小时会出现此问题，这会导致站点加载缓慢，并对用户体验产生负面影响。.

但别担心，我们已经为您准备好！请按照下面的快速教程，轻松学习如何提供合适尺寸的图像！

为什么必须提供合适尺寸的图像？

缩放后的图像是已调整大小以匹配在网页上显示的精确尺寸的图像。这不同于原始上传的图像，后者通常尺寸和分辨率要大得多。.

例如，您的原始特色图像可能是4000 x 3000像素，但您的网站仅以800 x 600像素显示。如果使用原始图像而不是缩小后的版本，网站加载速度会更慢。.

当图像未正确缩放时，浏览器必须实时手动调整其大小。这会减慢页面加载速度，迫使用户等待，并可能增加跳出率。.

'使用已缩放的图像很重要，因为不这样做可能导致多个问题：

• 不必要的加载时间，因为用户必须下载比需要更大的文件。
• 像素化或模糊的图像，如果图像太小并被拉伸。
• 增加的处理时间，因为浏览器必须实时调整图像大小，导致内容显示延迟。

分步指南

1. 使用图像编辑工具

此方法通过使用编辑工具提供更快的图像缩放。您可以使用诸如 Adobe Photoshop 等工具创建适当缩放的图像。Photoshop 允许广泛的自定义，您可以根据尺寸要求决定像素尺寸。.

如果您'正在寻找免费替代方案，像 PhotoPea 这样的在线工具是一个不错的选择。但对于本教程，我们将专注于 Photoshop，因为它功能全面。.

在上传之前调整图像大小，请遵循以下教程：

• 在 Photoshop中打开您的图像。
• 点击 Image 选项卡并选择 Image Size

• 在出现的对话框中，根据网页'的显示要求更改图像大小。. 

例如，如果您的原始图像为 1281 x 493 像素，且您想将其缩放至 3600 x 2400 像素，请输入新的尺寸。. 

• 将 分辨率更改为 72 PPI 以用于网页，或如果需要高质量打印则使用 300 PPI。
• 然后，选择一种重采样方法。最适合网页优化的两种选项是：

• 点击 确定以应用更改。您的图像已重新调整大小。
• 要保存图像，请打开 文件 选项卡并选择 导出。

• 点击 另存为 并选择任意文件格式，并调整设置以在不显著降低图像质量的情况下实现尽可能小的文件大小。

2. 利用 WordPress 的内置图像尺寸

如果您不想安装任何第三方软件，您可以使用 WordPress 内置的图像编辑器。使用此工具，您可以执行基本的图像编辑任务，例如裁剪、翻转和调整大小。.

您可以通过点击文章或媒体库中的任意图像来访问此功能。此外，您还可以通过修改主题中的 functions.php 文件来定义自定义图像尺寸。.

为了保持简洁，让'我们从下面的基础指南开始：

• 将您的图片上传到您的 WordPress 帖子。. 

• 选择图片，然后点击 替换 并选择 打开媒体库 从菜单。

• 在侧栏中，点击 编辑图片。

• 系统将带您进入图片编辑器。点击 缩放 以调整图片大小

• 输入新尺寸 为您的图像。 例如，将其从1198 × 744 像素 到 805 x 500 像素。纵横比受到约束，因此另一个值将根据您输入的宽度或高度自动调整。

• 点击 缩放 按钮以应用更改。
• 您的图像已缩放并可在您的帖子中使用。.

3. 使用插件

• 在您的 WordPress 网站上安装并激活 WP Meta SEO 。.

• 在您的 WordPress 仪表板中，前往 WP Meta SEO > 图像编辑器。.

• 打开 Image SEO 与 HTML 调整大小设置。.

• 启用动态图像调整大小选项，以允许 WP Meta SEO 根据显示尺寸自动调整图像大小。.

• 定义最大宽度和高度值，以控制前端图像的调整大小方式。.

启用后， WP Meta SEO 将自动调整图像尺寸，当它们在您站点上显示时，确保在无需人工干预的情况下获得最佳图像大小。此方法可提升页面速度，增强 SEO 性能，并提供更好的用户体验—尤其是图像密集型网站。. 

欲了解更多详情，您可以查阅官方文档和功能概述：

• WP Meta SEO 图像 SEO 与 HTML 调整功能
• 动态 图像调整文档

4. 使用 srcset 属性实现响应式图像

该 srcset属性 用于 HTML 中的 标签，以提供针对不同屏幕分辨率的不同图像来源。通过添加此属性，浏览器可以根据用户的设备选择最合适的图像。

例如，如果用户在低分辨率显示的移动设备上访问您网站，浏览器将加载低分辨率图像以提供更流畅的体验。.

如果您想了解如何手动提供缩放图像，请遵循以下说明：

• 通过代码编辑器打开网站的 HTML 文件。.
• 定位 标签以优化您想要的图像。

• 编辑标签并添加 srcset 属性，如图所示。. 

在此示例中，100w 和 400w 表示每个图像的实际宽度。浏览器将使用此信息决定为用户的设备加载哪张图像。.

• 保存更改并重新加载您的网站以查看结果。.

如何识别未缩放的图像

学习了如何优化图像后，'也很重要的是识别哪些图像仍需缩放，哪些已经优化。.

检查未缩放图像有两种常见方法，可以使用工具或进行常规站点审计。请参阅以下教程：

1. 使用 Google PageSpeed Insights

这是一款重要的工具，提供建议帮助加快您网站的速度。这些建议是通过使用 Google Lighthouse 进行深入分析生成的。一个常见的建议是对标记为未缩放的图像进行适当的缩放。.

要进行快速检查，您可以按照以下说明操作：

• 打开 Google PageSpeed Insight 于 https://pagespeed.web.dev。

• 将完整的 网页 URL粘贴到输入字段中。
• 点击 分析开始该过程。
• 请等待完成。PSI 将随后为您提供性能报告。.
• 向下滚动以查找标记为 正确尺寸的图像。
• 如果存在，您将看到站点上未缩放图像的列表。.

如果您的某张图像被标记为未缩放，Google PageSpeed Insights 可能会提供多项建议，包括：

• 提供下一代格式的图像，如 WebP、AVIF、JPEG XR 或 JPEG2000。
• 正确调整图像大小以满足不同尺寸需求，例如将产品详情页的图像调整为 1000 x 1000 像素，或将产品列表页的图像调整为 400 x 400 像素。.
• 使用 lazy loading，这样只有用户屏幕上可见的图像会立即加载。.

2. 进行定期站点审计

进行定期站点审计可为您提供对站点健康和性能的深入洞察。.

审计时，尝试优先审查站点架构和用户体验，以发现潜在问题。.

此过程还可以发现图像优化的机会。请确保在不同设备上（如手机、平板和桌面）测试您的站点，以确保一致的体验。.

另外，请注意图像是否已正确缩放。如果没有，请别忘了遵循上面的教程。.

总结

使用已缩放的图像对于优化站点性能至关重要，尤其是在移动设备上。它有助于页面加载更快并降低跳出率。.

然而，批量缩放大量图像可能会耗费时间。考虑使用类似于WP Media Folder，它可以让您自动调整大小、组织和替换图像，同时确保它们保持性能优化。