WordPress 使用 $content_width 进行图像优化有什么好的选择？

问题描述

WordPress 中的 $content_width GLOBAL 通过限制图像的大小和嵌入到帖子中来实现许多主题甚至一些插件，这是向 wordpress.org 提交的主题的要求。

它是通过使用：

$content_width = 584; // Twenty Twelve example

如果您将大图像 (默认 1024×1024) 插入到一个帖子中，则会导致：

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

如果相反，您删除此全局设置并插入实际的图像大小，请使用 add_image_size 设置它导致：

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328"

删除全局和插入大图像，这是非常常见的，通常会导致超过 2x 的保存，在具有多个图像的页面中，我看到页面加载时保存了数百 KB 。

使用 add_image_size，并删除插入全尺寸图像的能力不是更好的选择？

PS 。我写了关于 it here 与更准确的数据

最佳解决方案

请记住，$content_width 全局不仅用于图像，还用于嵌入式对象，如视频。因此，任何解决方案不仅仅是使用/支持 $content_width 本身的一个例子。

通常，主题将以几种方式限制 content-area 图像：

大图像尺寸：定义适合主题设计的 $content_width
原始/完整图像大小：为 #content img { max-width: XXX; height: auto; }定义 CSS 规则，以确保插入的 full-size 图像不会破坏布局
缩略图图像大小：调用 set_post_thumbnail_size()来定义精选图像/Post Thumbnail 默认 thumbnail 大小。 (注意：我个人建议不要使用此方法。为特征图像定义特定位置的自定义图像尺寸，然后通过 the_post_thumbnail( $size )在特定模板位置调用该自定义尺寸。)

如您所发现的那样，由于 WordPress 选择具有中间图像大小的方式用于任何给定的图像请求，因此该请求可能会导致 browser-scaled 图像。

Theme-Defined 大图像的值

一个选择是重新定义大图像尺寸的设置。 (请谨慎行事，对于您自己的网站来说，这是一个很好的选择，但公开分发的主题与用户配置设置混淆是最好的灰色区域。)

大图像尺寸设置存储为：

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

因此，您可以根据 $content_width 值设置这些值：

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(当然，你想在这个周围放置一些故障保护/error-checking) 。

删除选项插入 Full-Sized 图像

如果你只是想阻止用户插入 full-size 图像 (再次：请谨慎行事; 这可能是插件区域)，可以过滤'image_size_names_choose'：

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

再次：您可能想在这里添加一些合理的失败，因为这个过滤器在多个地方使用。

为 full-post-width 图像定义自定义图像大小

与上一个选项相关，您可以定义'full-post-width'图像大小：

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

然后，将其添加到可用选项列表中：

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

参考文献

What is a good alternative to using $content_width for image optimization?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 使用 $content_width 进行图像优化有什么好的选择？