使用$Content_Width进行图像优化的好方法是什么?

时间:2013-02-14 作者:Wyck

这个$content_width WordPress中的GLOBAL通过限制图片大小和嵌入帖子来影响许多主题甚至一些插件,这是提交给WordPress的主题的要求。组织。

可通过以下方式进行设置:

$content_width = 584; // Twenty Twelve example
如果在帖子中插入大图像(默认1024x1024),则会导致:

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" 
删除全局图像并插入大图像,这是非常常见的,在我看到多个图像的页面中,通常会节省2倍多的图像hundreds of KB 页面加载时保存。

正在使用add_image_size 删除插入全尺寸图像的功能不是更好的选择吗?

附:我写过it here 数据更准确

2 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

请记住$content_width global不仅用于图像,还用于嵌入对象,如视频。因此,任何解决方案都不仅仅是停止使用/支持$content_width 它本身

通常,主题会通过以下几种方式约束内容区域图像:

  1. Large 图像大小:定义$content_width 适合主题设计的东西Original/Full 图像大小:定义CSS规则#content img { max-width: XXX; height: auto; } 确保插入的全尺寸图像不会破坏布局Thumbnail 图像大小:调用set_post_thumbnail_size() 定义特色图像/后期缩略图默认值thumbnail 大小(注意:我个人不建议使用此方法。为特征图像定义特定于给定位置的自定义图像大小,然后在特定模板位置调用该自定义大小,通过the_post_thumbnail( $size ).)
正如您所发现的,由于WordPress选择中间图像大小以用于任何给定图像请求的方式,该请求可能会导致浏览器缩放图像。

大图像的主题定义值一个选项是重新定义大图像尺寸的设置。(请谨慎操作。这对于您自己的网站来说很好,但一个公开发布的主题会干扰用户配置设置,充其量是…灰色区域。)

大图像尺寸设置存储为:

$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 );
(当然,您可能希望对此进行一些故障保护/错误检查,视情况而定。)

删除插入全尺寸图像的选项

如果您只是想阻止用户插入全尺寸图像(再次:小心操作;这可能是插件领域),您可以筛选\'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\' );
再次强调:您可能需要在此处添加一些sane故障保护,因为此过滤器用于多个位置。

为全立柱宽度图像定义自定义图像大小

与上一选项相关,您可以定义\'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\' );

SO网友:sanchothefat

是的,我想是的。绕过$content_width 对于提交给回购的主题,我使用选项过滤器强制选择我为设计选择的大小。

add_filter( \'option_large_size_w\', function( $opt ) { return 1024; } );
add_filter( \'option_large_size_h\', function( $opt ) { return 0; } );
add_filter( \'option_embed_size_w\', function( $opt ) { return 1024; } );
add_filter( \'option_embed_size_h\', function( $opt ) { return 0; } );
// ...etc...

结束

相关推荐

我如何才能让Taxonomy Images与‘orderby’参数一起工作?

我正在使用分类法图像插件,并试图对分类法进行排序,但分类法图像效果不佳。这项工作:$terms = get_terms( \'work_cat\', $args ); 但事实并非如此:$terms = apply_filters( \'taxonomy-images-get-terms\', \'\', $args ); 有什么想法吗?以下是完整的查询:<?php $args = array( \'taxonomy\' =>