WordPress 图像大小解释

已发表: 2020-10-21

WordPress 图像大小有时可能有点神秘！您是否曾在管理区域中看到此媒体设置页面并想知道它是什么？

在本文中，我们将介绍 WordPress 图像大小、它们的全部内容以及这会如何影响上传时间等内容。此外，我们还将了解 WordPress 如何在网站布局中利用这些不同的图像大小。最后，我们将看看如何删除不必要的图像尺寸或添加您自己的自定义尺寸。

图像大小在 WordPress 中的作用是什么？

您网站上的图像看起来漂亮、清晰且质量高，这一点非常重要。有几个因素决定了这一点，包括图像的物理大小（尺寸和文件大小）和图像的分辨率。如果您的图像太大（例如 10,000 像素宽）并且文件太大（即超过 1mb 左右），您将开始减慢网站的加载速度。相反，如果图像尺寸太小，那么您可能会看到图像质量下降......换句话说，它可能开始看起来模糊或有颗粒感。

WordPress 试图通过根据图像位置提供最佳图像大小来达到平衡。每次您将图像上传到 WordPress 媒体库时，它都会创建 3 种不同的图像大小。这些是“缩略图尺寸”、“中尺寸”和“大尺寸”，尺寸分别为 150×150 像素、300×300 像素（最大）和 1024×1024 像素（最大）。最后，它还将存储一个“全尺寸”图像，这是上传图像的原始尺寸。

WordPress 在前端布局中的不同位置使用这些尺寸以及我们稍后将看到的其他尺寸。这样做是为了使图像既 a) 看起来不错，又 b) 加载速度很快。

更详细地检查 WordPress 图像大小

让我们通过一个示例来了解当您将图像上传到 WordPress 时，“幕后”究竟发生了什么。出于本示例的目的，我们将上传一个名为“post1-feature-image”的图像。它的大小为 294KB，尺寸为 2089×1175 像素，我们将使用默认的 WordPress 二十二十主题来执行此操作（其他主题可能会改变 WordPress 处理图像的方式）。

通过 WordPress 媒体库上传此图片后，我们可以使用 FTP 客户端连接到我们的网站，如果我们前往 Upload 文件夹，我们将看到已创建了多个版本的图片。

以红色突出显示，您将看到我们的默认图像尺寸。缩略图已被裁剪，因为这是通过媒体设置设置为默认值的。

“中号”和“大号”已调整大小，以避免改变图像的实际比例。所以，这就是为什么例如“中等尺寸”是 300×169 而不是 300×300。生成的其余图像是一些 WordPress 核心文件和二十二十主题代码的结果。

获得技术！

如果您对创建其他图像尺寸时发生的事情背后的代码感兴趣，那么本文的这一部分适合您。如果没有，请随意跳到下一章！

WordPress 正在从位于 wp-includes/ 文件夹内的名为 media.php 的文件中提取指令。前往第 4861 行，您将看到以下内容：

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg是由于 WordPress 4.4 版中添加的“medium_large”大小而创建的，以提供更好的响应式图像支持，并且可以在各种便携式设备上看到。它在文件 schema.php 第 522 行的“wp-admin/includes”文件夹中定义

// 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

并要求在第 86 行中的 image.php 文件：

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg和post1-feature-image-1980x1114.jpg是从第 53 行的 functions.php 文件中的“二十二十”主题生成的：

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

这样做是因为二十二十主题使用 1200 像素作为特色图像的图像大小。如果我们创建一个测试帖子并添加一个特色图像，然后在前端的单个帖子页面中，我们可以通过右键单击特色图像并查看浏览器的检查器来查看这个大小是如何使用的。

最后，1980px 图像是用于其他帖子模板的特色图像的大小。您可以通过将测试帖子模板更改为“封面模板”来查看这一点。然后，在封面图片的 HTML 元素的检查器 CSS 中，我们可以看到这个尺寸是如何使用的：

始终值得确保您上传的任何图像都比精选图像和封面图像宽度更宽，以使它们看起来清晰。 WordPress 可以有效地减小图像大小，但它不能放大小图像并使其看起来不错。

删除不必要的 WordPress 图像大小

正如我们所见，每当我们将图像上传到媒体库时，WordPress 都会忙于生成一系列图像大小。但是我们真的需要所有这些图像吗？实际上，不，我们没有。它不仅减慢了图像上传的速度，因为 WordPress 不得不在后台创建这些不同大小的图像，而且它还占用了我们不需要在服务器上使用的存储空间。那么，我们如何阻止 WordPress 创建我们不需要的图像大小？请仔细阅读，找出答案！

注意：除非您在演示网站上遵循这些说明，否则我们建议您在子主题的 functions.php 文件中实施下面概述的更改。 对父主题中的 functions.php 文件所做的更改将在下次更新主题时被擦除。

删除 WordPress 默认图像大小

这可以通过编辑主题的functions.php并添加以下代码轻松完成：

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

为了进行测试，让我们将新图像（在我们的示例中称为 post2-featured-image）上传到媒体库并刷新上传文件夹的 FTP 视图。

如您所见，通过我们的 functions.php 文件告诉 WordPress 删除 4 个默认图像大小，我们已经停止 WordPress 在我们的媒体文件夹中创建这些。展望未来，对我们主题代码的这个简单更新意味着我们不会用不需要的图像大小堵塞我们的服务器。这将节省空间并加快图像上传过程。

从媒体库中删除旧图像尺寸

您可能已经注意到，虽然没有为我们上传的新图像创建 4 个默认图像大小，但之前上传的图像仍然在媒体库中保存了所有 8 个变体。很有可能，除非这是一个全新的网站，否则您将上传数十甚至数百张图像，并且在所有情况下都会创建这些“额外”尺寸。那么该怎么办？

首先要确定的是您需要这些图像吗？在继续删除 WordPress 生成的图像之前，您必须确认这些尺寸不再使用。检查您的博客文章、特色图片和网站的任何其他部分，以确保没有旧尺寸仍在使用。

处理这些不需要的旧图像文件的好方法是使用 Force Regenerate Thumbnail 插件，该插件将通过并自动删除它们。安装并激活插件，然后点击插件菜单中的“重新生成所有缩略图”按钮（工具->强制重新生成缩略图）。

刷新您的 FTP 媒体文件夹视图，您会看到默认的 WordPress 图像已经消失。好的！

为默认尺寸实现相同结果的另一种简单方法是在 wp-admin 的 Settings > Media 中将它们的尺寸值更改为“0”。然后你会看到这样的东西：

另一种方法是更改 update_option( 'SIZE_w/h', 0 ); 在functions.php中。请记住对子主题 functions.php 文件执行此操作，以便以后更新主题时您的更改不会丢失。

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

进行此更新后，您会看到将反映媒体设置中的尺寸值（来自 WP Admin）现在已更新为 0。

删除其他主题图像尺寸

我们现在已经成功处理了 WordPress 核心生成的默认图像。我们现在可以继续处理由主题创建的图像（在本例中为二十二十）。如果像我们的默认图像尺寸一样，您认为这些不是必需的，那么您可以对您的主题代码进行一些更改，以阻止 WordPress 将来生成这些尺寸。

为此，我们将使用 init 钩子和 remove_image_size 核心函数。复制下面的代码并将其粘贴到您的 functions.php 文件中。如果您没有像我们在这里一样使用二十二十个主题，那么将“post-thumbnail”和“twentytwenty-fullscreen”名称替换为您的活动主题的名称。

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

如果我们现在上传一张新图片并通过我们的 FTP 客户端检查我们的上传文件夹，我们将看到除了“post-thumbnail”和“twentytwenty-fullscreen”之外的所有尺寸都已生成。

添加您自己的自定义图像大小

现在我们学习了如何在 WordPress 中删除多余的图像大小，让我们看看如何根据模板的需要添加自己的自定义图像大小。

我们如何决定我们需要什么样的图像尺寸？

假设您有一个网站，其主列的宽度为 960 像素，其中特色图片位于顶部，帖子内容位于下方。您想要的图像大小将是 960 像素。如果有的话，不要忘记计算 CSS 填充。例如，如果父元素的内边距总和为 20 像素，则图像的正确宽度将为 920 像素。左边距为 960 像素减去 20 像素，右边距为 20 像素。

注册新的图像尺寸

注册新尺寸的一种简单方法是使用 WordPress 提供的内置 add_image_size() 函数。函数结构为：

 add_image_size( name, width, height, crop )

这些选项中的大多数都是不言自明的。最后一个选项（裁剪）决定了 WordPress 在调整大小时是否尊重我们图像的比例，或者是否裁剪我们的图像。如果裁剪选项设置为“真”，则图像将被裁剪并且比例将不被考虑。如果裁剪选项被跳过或设置为 false，那么我们的图像比例将受到尊重。

让我们尝试一下，并使用 2089×1175 像素的测试图像监控结果。

首先让我们添加这段代码：

 add_image_size( 'new-post-thumb', 220, 180 );

这将在我们的上传文件夹中生成一个post2-feature-image-220x124.jpg而不是 220×180，因为没有设置裁剪 (false)。如果您插入以下内容，也会发生同样的情况：

 add_image_size( 'new-post-thumb', 220, 180, false );

但是，如果您像这样将裁剪设置为 true，则将保存图像post2-feature-image-220x180.jpg 。

 add_image_size( 'new-post-thumb', 220, 180, true );

最后，您可以指定作物的定位方式。而不是 'true' 只使用像 'left' 或 'top' 或两者的选项：

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

该数组指定裁剪位置。可以使用的值是：

对于 x_crop_position：“左”、“中心”或“右”。
对于 y_crop_position：“顶部”、“中心”或“底部”。

每种情况下的输出都将是原始图像的不同部分。这里有些例子：

通过向我们的主题添加代码来手动执行此操作的替代方法是使用插件，例如 Simple Image Sizes。尽管如此，即使您确实使用了这样的插件，了解幕后发生的事情也是有帮助的。

结论

在 WordPress 中使用正确的图像尺寸很重要——它不仅可以通过向网站查看者呈现清晰、高分辨率的图像来确保高质量的用户体验，而且还会显着影响加载时间和服务器使用率。希望本文能帮助您了解图像大小在 WordPress 中的重要性，以及您可以覆盖、删除或扩展图像大小以满足您网站需求的方法，以及如何通过停止 WordPress 来节省大量服务器空间为您上传的每张图片生成不必要的尺寸。