在 Google PageSpeed Insights 上运行性能审核时，您是否收到“适当大小的图像”警告？如果 Lighthouse 识别出页面上任何尺寸不合适的图像，则会触发此问题。
正确调整图像大小可以大大缩短页面加载时间并减少带宽消耗。在本文中，我们分享了一些您可以遵循的优化技术来优化 WordPress 网站的图像。
适当大小的图像意味着什么？
正确调整图像大小意味着图像 URL 不应大于它们在访问者屏幕上呈现的大小。你不应该提供比需要的更大的东西——它会浪费字节并使页面变慢。
是什么触发了灯塔警告
Lighthouse 会比较渲染图像的大小（设备像素比）和实际图像的大小。如果渲染的大小比实际大小至少小 4KiB，则会触发“正确大小的图像”警告。
尺寸不当的图像对性能的影响
如果图像大小不正确，浏览器将在向访问者显示它们之前“决定”调整它们的大小，从而浪费时间和资源。太大的图像会损害页面体验，迫使用户下载超出需要的数据。
| 高分辨率图像=巨大的文件大小=极大地影响网络性能=消耗更多的蜂窝数据 |
浏览器端解析尺寸不正确的图像时将花费更多时间下载文件和调整图像大小，从而增加消耗的带宽。
在 WordPress 上正确调整图像大小的 3 个技巧
要在 WordPress 上正确调整图像大小，您可以遵循三个简单的图像优化技巧：
- 调整图像大小以正确尺寸
- 使用响应式图像
- 使用基于矢量的图像格式
1.调整图像大小以正确尺寸
使用软件和在线工具正确调整图像大小
您可以使用许多免费和高级软件将图像调整为正确的尺寸。我们在 Mac 和 Windows 上分享两个免费选项：
- Preview（Mac 上免费）
- GIMP – 一款免费的编辑软件，非常方便地编辑图像并调整图像大小
当然，您也可以选择使用两个著名的 Photoshop 和 Lightroom 软件，但它们可能学起来时间成本比较高。
重要提示：如果您要调整多个图像的大小，您可能会发现使用Smush Pro等插件来自动执行该过程会更方便。
使用图像 CDN 正确调整图像大小
图像 CDN 可以帮助您正确调整 WordPress 网站的图像大小。他们专注于图像的转换、优化和交付。它们就像 API，可以根据用户设备访问网站上使用的图像并对其进行排序。
它是如何工作的？
从图像 CDN 加载的每个图像都有一个 URL，指示要加载的图像以及大小、格式和质量。然后它可以“转换”图像，以最佳优化的格式提供服务。
图像 CDN 还为不同的用例创建图像的变体，并将图像字节消耗减少至少 40%。
2.使用响应式图像
提供优化图像的最佳策略之一称为“响应式图像”，这意味着调整宽度和高度以适应任何屏幕（移动设备、平板电脑或台式机）。所有图像都将被优化并提供到正确的屏幕，从而减少带宽消耗并加快浏览器执行速度。
您需要为每个图像生成多个版本，然后使用视口尺寸、媒体查询等指定在 HTML 或 CSS 中使用哪个版本。
重要提示：图像大小将根据站点的布局断点（响应式设计的构建块）而变化。
如果您想遵循 Bootstrap 标准，您可以使用以下媒体查询来确保您的图像具有响应能力：
- 纵向手机为 576 像素
- 平板电脑 768 像素
- 笔记本电脑 992 像素
- 大型设备为 1200 像素
既然我们知道了应该为每个屏幕指定的尺寸，那么我们如何告诉浏览器根据访问者屏幕选择哪一个呢？
您可以使用src、 srcset和sized属性在移动设备或桌面设备上为不同的图像提供不同的显示密度（质量）。在下面的示例中，我们使用 src 属性告诉浏览器花朵图片可以使用不同的尺寸：
把
<img src="flower-large.jpg">改成
<img src="flower-large.jpg" srcset="flower-small.jpg 480w,flower-large.jpg 1080w" size="50vw">要在 WordPress 网站上自动提供响应式图像，您可以使用Cloudinary（无需设置）。它是适用于网站和移动应用程序的端到端图像和视频管理解决方案。您可以轻松地将图像和视频上传到云端，并自动对这些媒体进行智能操作（优化等），而无需安装其他编辑软件。
优化后，Cloudinary 通过这三个 CDN 提供图像：Akamai、Fastly 和 CloudFront。如果您想连接自己的 CDN，则需要联系他们。
想测试您的网站是否使用响应式设计？转至Google Search Console > 移动友好并输入您的网址。
3.使用基于矢量的图像格式
正确调整图像大小的另一个策略是使用基于矢量的图像格式（如 SVG）。SVG 图像可以使用有限数量的代码无限缩放，而不会损失质量。
调整图像大小对于网络性能至关重要，但您可以遵循许多其他高级优化技术来为您的网站提供额外的速度提升。
您是否听说过编码、压缩和使用下一代格式来提高您的 WordPress 网站速度？
总结
避免适当大小的图像警告的最佳方法是了解网站不同区域的测量（徽标、侧边栏、滑块、特色图像等）。一旦您知道每个部件需要哪些尺寸，为任何设备显示正确的尺寸将是小菜一碟！
调整图像大小并不是优化图像的唯一方法。您还需要压缩（或编码）它们并以 WebP 等下一代格式提供它们。
所有这些策略都将显着减小图像文件的大小，从而为访问者提供更快的下载时间。
发表回复