WordPress Image Sizes: Recommended Dimensions & Resolutions

在 WordPress 中优化图像大小是维护快速加载和用户友好的网站的重要组成部分。

图像文件是导致网站性能不佳的最大因素之一。您拥有的图像越多，它们越大，您的网站加载速度就越慢。适当大小的图像不仅可以提高网站速度，还可以减少不必要的存储使用并提高搜索排名。

本指南涵盖了 WordPress 中各种图像类型的推荐尺寸和分辨率、图像优化技术以及管理图像文件以保持媒体库整洁的技巧。

默认 WordPress 图像大小

当您上传图片时，WordPress 会自动生成多个不同大小的副本，以适应您网站中的各种位置。默认图片大小为：

缩略图：150×150 像素（裁剪为方形纵横比）。非常适合用于小预览或图库图像。
中：300×300 像素。适用于内容内图像。
大：1024×1024 像素。用于全宽内容或特色图像。
完整尺寸：上传图片的原始尺寸。

可以通过导航到 WordPress 控制面板中的“设置”>“媒体”来调整这些大小。修改这些设置将影响未来的上传，但现有图像将保持不变。

针对特定用途的推荐图片尺寸

选择合适的图片尺寸可确保清晰度和最佳加载时间。以下是常见图片类型的一些建议尺寸：

页面和帖子

推荐尺寸：1200×800 像素或 1200×628 像素
用法： 确保一般页面和帖子内容的清晰、高质量的视觉效果，平衡美学和性能。1200×628 像素大小与社交媒体平台最兼容。

特色图片

推荐尺寸：1200×628 像素
用法：在帖子或页面顶部突出显示;确保与社交媒体共享的兼容性。

页眉或背景图像

推荐尺寸：1920×1080 像素
用法：为标题、主图部分或背景图像提供高分辨率的全宽视觉对象。

徽标图像

推荐尺寸：250×100 像素
用法：确保在页眉或页脚中显示时清晰锐利。请记住，您的确切徽标大小和尺寸会根据其纵横比而有所不同。

缩略图图像

推荐尺寸：150×150 像素
用法：用于小型预览，例如在画廊或帖子摘录中。

您的模板或插件还可能包含分配给某些帖子类型、页面模板或其他自定义内容的特定建议图片大小。例如，热门活动日历插件 The Events Calendar 使用 1280×720 像素的特色图片大小。

如何自定义默认图像大小

虽然 WordPress 提供默认图像大小，但您可能需要自定义尺寸以适合您的主题或设计偏好。要添加自定义图像大小，请编辑 functions.php 文件。

编辑 functions.php 文件：

访问主题的 functions.php 文件：建议使用子主题，以防止在更新期间覆盖更改。
添加 add_image_size（） 函数：插入以下代码，将 'custom-size-name' 替换为您的首选名称，并指定所需的宽度和高度（以像素为单位）：

add_image_size( 'custom-size-name', 600, 400, true );

true 参数允许硬裁剪到指定的确切尺寸。
重新生成缩略图：添加自定义大小后，使用 Force Regenerate Thumbnails 等插件为现有图像重新生成缩略图。此插件将删除所有以前的缩略图图像大小，并根据您定义的图像大小重新生成新图像。

此过程可确保您的图像根据您网站的特定需求量身定制。

如何优化图像以提高 Web 性能

有几种方法可以为您的网站创建优化的图像。您使用的方法在很大程度上取决于您的特定需求、访问您网站的人以及您如何在场外使用图像。

让我们来看看您可以采取的不同步骤来优化您的图像。

1. 分析您的图像

如果您尚未将图片上传到您的网站，您可以在上传之前检查文件大小并优化图片。但是，如果您已经将图片上传到媒体库怎么办？在 WordPress 仪表板中或使用 SFTP 滚动浏览图片可能很耗时。

发现哪些图像文件可以从调整大小和压缩中受益的最快方法是使用 Jetpack Boost 插件。它包括一个图像分析器，可扫描您的网站并识别需要优化的图像。

2. 压缩图片

您可以使用桌面应用程序、基于浏览器的工具或插件来压缩图像。最佳做法是在上传图像之前对其进行优化。与使用在线选项相比，您可以更好地控制图像的大小和质量。

有免费的桌面应用程序，如 PhotoBulk（Mac 和 Windows）或 ImageOptim（仅限 Mac），或者如果您已经在使用 Adob e 软件，Photoshop 具有出色的图像压缩功能。

如果在线工具对您来说更实用或更方便，TinyPNG 和 Imagify 都是减小文件大小而不会明显质量损失的绝佳选择。

TinyPNG 和 Imagify 都有 WordPress 插件，允许您连接他们的服务并通过 API 连接直接在您的网站上处理图像。

3. 使用适当的文件格式

WebP 和 AVIF 文件在保持图像质量的同时提供最大的图像压缩。两者都允许透明图像，而 WebP 支持动画文件（如 GIF）。大多数主要浏览器和大多数社交媒体平台也支持这些文件类型。

这两种文件类型的缺点是电子邮件不支持它们。因此，如果您将内容直接从您的网站导入到电子邮件软件中（例如，WooCommerce 集成将产品直接从您的网站提取到您的电子邮件中），您的图像将不会显示在收件箱中。

更普遍可读的文件类型是 JPG 和 PNG。JPEG 由于其压缩功能而适用于照片，而 PNG 更适合需要透明度或颜色较少的图像。

即使压缩后，JPG 和 PNG 通常仍会比类似质量的 WebP 和 AVIF 文件占用更多空间，但如果您的网站与各种其他软件集成，或者如果优先考虑最大的可访问性，它们可能会更实用，因为 WebP 和 AVIF 无法在较旧的浏览器上运行。

4. 利用响应式图像

WordPress 自动在图像标签中包含 srcset 属性，允许浏览器根据设备的屏幕选择合适的图像大小。确保您的模板支持此功能。

大多数现代的、基于块的主题都将支持 srcset 属性，但可能有一些较旧的主题不支持。如果您不确定您的主题是否支持此属性，您可以使用浏览器的检查器工具进行检查。

加载您网站上包含图像的任何页面。然后，右键单击图像并选择 Inspect。找到元素并查找 srcset。如果您在那里看到它，那么您就会知道您的主题支持它。

实施这些做法有助于在图像质量和网站性能之间保持平衡。尝试使用你的图像优化技术，以获得适合你需求的平衡。不要忘记对你上传到网站的所有图像使用这些方法——而不仅仅是在你第一次创建它时。

管理主题和插件中的其他图像大小

主题和插件可能会引入额外的图像大小，从而导致不必要的文件占用服务器空间。要管理这些大小：

识别已注册的图像大小

使用 Media Hygiene 等插件查看和管理您网站上注册的所有图像和尺寸。检查以查看正在使用的图像大小，并决定是否要删除它们。

禁用未使用的图像大小

如果不需要某些大小，您可以使用 Media Hygiene 等插件或将以下代码添加到模版的 functions.php 文件中来删除它们：

function remove_default_image_sizes( $sizes ) {

    unset( $sizes['thumbnail'] );

    unset( $sizes['medium'] );

    unset( $sizes['large'] );

    return $sizes;

}

add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

修改未设置的行以定位要删除的特定大小。

定期审核和管理图像大小有助于维护井井有序的媒体库并节省服务器资源。

注意：在禁用或删除任何图像大小之前，请备份您的网站。理想情况下，您应该在暂存站点或本地测试任何此类重大更改，而不是在实时站点上测试。

如何确保与高分辨率显示器的兼容性

随着高分辨率屏幕（如 Retina 显示屏）的普及，提供在所有设备上看起来清晰的图像至关重要。为此，请执行以下作：

上传较大的图片：提供两倍于预期显示尺寸的图片。例如，对于 300×300 像素的显示区域，请上传 600×600 像素的图像。
利用 srcset 属性：如前所述，只要您的主题支持此功能，WordPress 中的响应式图像功能就会根据设备的功能自动提供适当的图像大小。

管理 WordPress 图片的最佳实践

为了使您的 WordPress 媒体库保持优化和高效，请考虑以下最佳实践：

使用描述性文件名：在上传之前重命名图片文件，以包含相关关键词（例如，blue-sneakers-running.jpg 而不是 IMG1234.jpg）。
组织媒体库：利用文件夹或媒体管理插件，如 Media Library Assistant。
实施延迟加载：WordPress 包括图像的原生延迟加载，通过仅在图像进入视图时加载图像来减少初始页面加载时间。
优化图像大小：使用插件、桌面应用程序或基于浏览器的工具来分析和优化图像以获得最佳性能。
安装图像 CDN：Jetpack Boost 提供了一个图像 CDN，可以调整图像大小并以页面速度友好的格式（如 WebP）提供图像。

关于 WordPress 图像优化的最终想法

优化 WordPress 网站的图像是提高性能和用户体验的重要一步，但这只是维护高效和轻量级网站的一部分。为了进一步提高网站的速度和可用性，请考虑集成专为全面优化而设计的工具。

使用 Jetpack Boost 增强站点的性能

Jetpack Boost 是一个功能强大的插件，可简化加速 WordPress 网站的过程。它提供了一套功能，旨在改善加载时间和整体性能，而无需高级技术知识。

Jetpack Boost 的主要功能包括：

优化 CSS 加载：此功能将关键 CSS 移动到页面代码的顶部，从而使内容显示得更快。通过优先考虑基本样式，您的网站可以更快地变得具有交互性，从而增强用户体验。
延迟非必要的 JavaScript：Jetpack Boost 会将非关键 JavaScript 的加载延迟到主内容加载之后。这种方法减少了阻止渲染的资源，从而加快了页面加载速度。
站点性能分数：借助 Jetpack Boost，您可以通过移动和桌面分数来评估站点的性能。此功能使您能够监控优化的影响并做出明智的决策以提高站点的速度。
图像 CDN：Jetpack Boost 包括一个图像内容交付网络（CDN），该网络可自动调整图像大小并以 WebP 等现代格式提供图像。通过从全球服务器网络交付图像，它可以确保更快的加载时间和优化的性能。

通过在您的 WordPress 网站上安装 Jetpack Boost，您可以毫不费力地实现显着的性能改进。其用户友好的界面和强大的优化工具使其成为旨在为访问者提供更快、更高效体验的网站所有者的绝佳选择。

珍·斯威瑟

Jen 是 Jetpack 的客户体验专家。她使用 WordPress 和 Jetpack 已有十多年。在加入 Automattic 之前，Jen 帮助小型企业、当地非营利组织和财富 50 强公司为其客户打造引人入胜的 Web 体验。她热衷于教他人如何无所畏惧地在 Web 上进行创作。