在 WordPress 指南，我们痴迷于网站性能。我的日常包括优化速度、Core Web Vitals 和整体性能。那些网站工作中包括 WordPress 图片尺寸优化。在 WordPress，优化图片不只是为了好看——它影响网站速度、SEO、用户体验和整体网站功能。选择正确图片尺寸、确保为 WordPress 网站优化，可以在性能上带来显著差异。这篇文章覆盖你需要知道的关于 WordPress 图片尺寸的一切，以及如何有效优化它们。
默认 WordPress 图片尺寸
WordPress 上传图片文件（如 JPEG 或 PNG）到网站时自动生成四个图片尺寸。理解这些默认尺寸帮你为内容选择正确的：
- 缩略图（150×150 像素）：用于小组件或图库；
- 中等（300×300 像素）：常用于内容内图片；
- 大（1024×1024 像素）：最适合博客文章页眉或较大图片；
- 完整尺寸：上传图片的原始尺寸。
每种尺寸服务不同目的，选择适当尺寸对保持质量和性能平衡很重要。比如，WordPress 对文章特色图片、相关文章小组件和其他显示已发布文章的小组件用不同图片尺寸。博客文章特色或页眉图片大多是大的（1024×1024 像素），而相关文章用缩略图尺寸（150×150）。不过，如果你的主题允许，你可以定制这些设置。我们稍后会讲到。
自定义 WordPress 图片尺寸
虽然 WordPress 提供默认尺寸，你可以创建适合需求的自定义图片尺寸。这对主题或特定内容要求特别有用。有几种方式在 WordPress 定制图片尺寸。先进入 WordPress 后台、从菜单列表悬停在设置上。从选项点击”媒体“。
在这个界面，你可以把默认 WordPress 图片尺寸改为适合你的特定需求。记住，你在这里设置的选项是通用的，意味着影响全站图片尺寸。除非你在页面级别更改图片尺寸设置，你在这里输入的选项会生效。在 WordPress 添加自定义图片尺寸的另一种方式是修改主题的 functions.php 文件。但这个选项不建议新手。不过，为了学习，这里有一段在 WordPress 定制图片尺寸的 PHP 代码：
add_image_size('custom-size', 600, 400, true);这段代码创建 600×400 像素、启用裁剪的自定义尺寸。基于图片将出现的位置（如博客缩略图或特色图片）使用正确尺寸很重要，确保全站一致。再次强调，使用媒体设置更直接、新手友好。我建议如果你不是熟练程序员，不要尝试主题修改选项。
为性能优化图片尺寸
除了缩放图片适应容器、让它们视觉更吸引，为性能优化 WordPress 图片尺寸也很重要。大图片会拖慢网站，负面影响用户体验和 SEO。你必须确保图片正确缩放适应容器、在不损失质量情况下减少文件大小。图片尺寸必须在预期尺寸内，浏览器才能快速加载。以下是一些为性能优化 WordPress 图片的方法：
- 压缩图片：压缩图片大小是改善加载时间的好技术，尤其对移动用户。用 TinyPNG 或 Imagify 等工具减少文件大小；
- 优化插件：Smush、Imagify 和 ShortPixel 等 WordPress 插件在上传时自动压缩图片，确保最佳性能；
- Jetpack 加速器：用 Jetpack Site Accelerator 自动缩放图片、从 Jetpack 全球 CDN 服务、为支持的浏览器转换为 WebP 格式。
保持图片小，你会改善网站速度、同时保持视觉吸引力。如果你没用 Cloudflare 等 CDN，Jetpack 图片 CDN 是值得考虑的选项。通过从全球 CDN 服务图片，Jetpack Site Accelerator 确保图片从离用户最近的服务器提供。这会显著改善页面加载时间、网站性能和用户体验。
如何发现 WordPress 中正确的图片尺寸
有时你截取网页或照片的截图、想用在 WordPress 网站。这些图片或照片通常是较大尺寸。你怎么知道这些图片或照片是否在预期尺寸、帮助改善页面速度？这就是 Jetpack Image Guide 发挥作用的地方。Jetpack Image Guide 是简单而强大的工具，作为管理员登录时让你看到网站上太大或太小的图片。这个功能有助于确保你给 WordPress 网站添加正确图片尺寸。Jetpack Image Guide 是 Jetpack Boost 工具套件的一部分；你可以随意启用或停用。要使用该功能，安装激活 Jetpack Boost 插件、启用 Image Guide 选项。
激活后，作为管理员访问网站、导航到要调查图片的页面。浏览页面/文章时，注意该特定页面/文章每个图片上的 Image Guide 气泡。然后，把鼠标光标移到气泡上显示 Jetpack Image Guide 卡片，包含图片尺寸详情和优化建议。
这个卡片上有几个有用的细节：
- 图片文件尺寸；
- 预期尺寸；
- 屏幕大小；
- 图片大小；
- 潜在节省；
- 和了解图片优化的链接。
按 Image Guide 的信息，你可以发现要上传的正确图片尺寸、如何最好优化它获得更快加载和最佳用户体验。注意，考虑在不同设备查看网站，因为 Jetpack Image Guide 基于当前查看设备显示详情。每个设备可能有不同结果和详情。比如，在移动设备查看上面文章显示不同性能结果。
这是最好用 Jetpack Site Accelerator 或 Imagify 等自动图片缩放工具的原因之一。这样你不用担心为不同屏幕尺寸缩放图片。查看这篇文章了解更多 Jetpack Image Performance Guide 如何工作。
在 WordPress 提供响应式图片
在 WordPress，响应式图片是内置功能。它们让你的网站根据用户设备提供不同图片尺寸。无论是移动设备还是桌面电脑，WordPress 自动即时生成响应式图片尺寸、不影响图片质量。也不管什么浏览器类型（Chrome、Microsoft Edge、Safari 或 Firefox），图片自动相应下载和渲染。
如果你审查上面”如何发现正确图片”板块的图片（移动和桌面），会注意到图片详情的差异。这是因为 WordPress 基于用户设备屏幕大小自动提供响应式图片。无论如何，这里是一些 WordPress 为用户显示响应式图片的方式：
- Srcset：WordPress 自动生成每个图片的多个尺寸、用 srcset 属性基于屏幕大小显示适当版本；
- Sizes 属性：这告诉浏览器图片应显示的尺寸，改善小屏幕加载时间。
用这个功能，你的图片加载更快、在任何设备看起来都很棒。
选择正确图片尺寸的最佳实践
为每种内容类型选择正确图片尺寸是关键。仅通过提供正确图片尺寸，你就可以在 WordPress 节省显著千字节（KB）。另外，网站性能是关键；提供正确图片尺寸会减少 Page Speed Insights 和其他网页测试工具中的累计布局偏移错误。它还会改善页面关键图片资产的加载，因为浏览器无需困难就能快速确定和下载适当图片尺寸。以下是一些最佳图片尺寸实践建议：
- 博客文章：用中等尺寸图片（如 300×300 或 600×400）平衡质量和加载时间。这是博客文章正文内的图片；
- 特色图片：大图片（1024×1024 或更高）最适合全宽页眉或轮播。检查主题获取最佳推荐尺寸。许多 WordPress 主题用 1200×657 像素效果最佳；
- 缩略图：不要重新发明轮子；坚持默认 150×150 尺寸用于图库视图或预览图片；
- 避免过大：总是上传前缩放图片，而不是依赖 WordPress 处理缩放，避免不必要的大文件上传。前面提到，用 Imagify 在线工具上传前缩放图片。
总结
在 WordPress 优化图片尺寸和性能不只是技术任务，它对改善网站性能、用户体验和 SEO 必不可少。通过理解默认图片尺寸、需要时添加自定义尺寸、利用优化工具，你确保 WordPress 网站好看又不牺牲速度。我分享了足够细节和有用技巧，实施后你可以发现、缩放和设置适合你网站的最佳 WordPress 图片尺寸。
常见问题解答（FAQ）
WordPress 上传图片后会自动生成哪些尺寸？
默认生成四个：缩略图 150×150、中等 300×300、大 1024×1024，加上上传图片的完整尺寸。它们各有用处，比如特色图片通常用大的，相关文章小部件用缩略图。
怎么修改默认图片尺寸？
最简单的是进后台的”设置 > 媒体”修改，注意这里改的是全站通用设置。技术方案是在主题的 functions.php 里用 add_image_size 添加自定义尺寸，但文章明确建议新手别碰这个，用媒体设置更稳妥。
图片太大对网站有什么影响？
大图片会拖慢网站加载速度，直接影响用户体验和 SEO，还会在 Page Speed Insights 这类测试工具里触发累计布局偏移错误。所以上传前最好先压缩和缩放，别把几 MB 的原图直接丢上去。
有什么工具能帮我优化图片？
文章推荐了 TinyPNG、Imagify 这类压缩工具，Smush、Imagify、ShortPixel 等插件可以在上传时自动压缩，还有 Jetpack Site Accelerator 用 CDN 自动缩放图片、为支持的浏览器转成 WebP。如果还没用 CDN，Jetpack 图片 CDN 值得试试。
怎么知道某张图片的尺寸合不合适？
用 Jetpack Boost 插件里的 Image Guide 功能，管理员登录后浏览页面，图片上会出现气泡，显示文件尺寸、预期尺寸、潜在节省等信息，按建议调整就行。注意它显示的结果跟当前查看设备有关，手机和电脑看到的不一样。
博客文章和特色图片分别用什么尺寸？
正文内的图片用中等尺寸（300×300 或 600×400）就够，能平衡质量和加载时间；特色图片用大尺寸，很多主题按 1200×657 效果最佳，可以查一下自己主题的推荐值；缩略图直接用默认的 150×150。
