Что является хорошей альтернативой использованию $ content_width для оптимизации изображений?

В $content_widthГЛОБАЛЬНОЙ в WordPress эффекты многие темы и даже некоторые плагины, ограничивая размер изображений и вкладывается в должности, это требование тем , представленных wordpress.org.

Это устанавливается с помощью:

$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 раза. На страницах с несколькими изображениями я вижу сотни КБ, сохраненные при загрузке страницы.

Является ли использование add_image_sizeи удаление возможности вставки полноразмерных изображений не лучшим вариантом?

пс. Я написал об этом здесь с более точными данными

Имейте в виду, что $content_widthглобальный используется не только для изображений, но и для встроенных объектов, таких как видео. Таким образом, любое решение не будет просто прекращением использования / поддержки самого $content_widthсебя.

Обычно тема ограничивает изображения области содержимого несколькими способами:

1. Большой размер изображения: определение $content_widthчего-то подходящего для дизайна темы
2. Размер оригинала / полного изображения: определение правила CSS для #content img { max-width: XXX; height: auto; }обеспечения того, чтобы вставляемые полноразмерные изображения не нарушали макет
3. Размер миниатюрного изображения: вызов 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' );

Опять же: вы можете захотеть добавить некоторые нормальные сбои здесь, так как этот фильтр используется более чем в одном месте.

Определите пользовательский размер изображения для изображений полной ширины

Относительно предыдущего варианта, вы можете определить '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' );

Да, я так думаю. Чтобы обойти $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...