Май

Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние

Заходя в раздел настроек админки «Медиафайлы» многие новички, наверное, с недоумением смотрели на представленные там размеры изображений и не совсем понимали, что именно все это значит. Сегодня постараюсь прояснить некоторые аспекты, связанные с этими параметрами: расскажу зачем они нужны, как убрать лишние и добавить свои значения. Данная информация пригодится не только для общего развития, но и позволит немного оптимизировать/ускорить ваш веб-проект.

Оптимальный размер изображений напрямую зависит от того, в каком месте оно будет размещено. Допустим, вы подбираете на сайт красивую графику и выполнили поиск по картинке в интернете, а затем хотите загрузить ее на свой веб-проект. При этом изображения в шапке должно быть максимально качественное и большое, тогда как к миниатюрам требования куда более скромные – для превьюшек не обязательно использовать крупные фото. Более того, если на странице у вас будет много больших тяжелых медиафайлов, то это значительно замедлит ее загрузку.

Логика работы системы WordPress с размерами изображений

Исходя из изложенных выше умозаключений, становится понятно зачем разработчики WordPress предусмотрели в системе несколько разных размеров изображений (см. на картинку выше) со следующими дефолтными значениями:

Миниатюры (Thumbnail) — квадрат 150x150px;
Средний (Medium) – с максимальным значением ширины/высоты 300px;
Большой размер (Large) — 1024px максимум по высоте/ширине;
Полный оригинальный размер загруженного вами файла.

Сразу после загрузки файла через админку в Медиабиблиотеку, система создаст несколько его копий на хостинге в соответствующих размерах. Если зайдете в папку /wp-content/uploads то сможете их увидеть:

Здесь для оригинального файла menu-account2.jpg созданы еще 3 новых JPG. Причем, если посмотреть на первый скриншот, то увидите, что для превью у меня включен параметр “обрезать миниатюру”, поэтому итоговая картинка получится квадратной. В то же время для средних/больших пропорции сохраняются, а один из размеров (ширина/высота) будет фиксированный, а второй нет.

В другом своем сайте с более новой версией WordPress, я обнаружил, что файлов создается еще больше:

Дело в том, что в WordPress 4.4 к базовым параметрам добавили значение “medium_large” для лучшей адаптивности и совместимости с другими устройствами. Плюс в коде media.php из папки wp-includes можно найти еще 2 значения (на скриншоте видим только 2xmedium_large, т.к. загружаемый файл был меньше 2000px):

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 );
}

Вообще этих копий на FTP можно встретить и больше, т.к. помимо самой системы новые форматы могут добавлять и разработчики шаблонов. Либо, когда картинка достаточно маленькая изначально, то большой формат не будет создан.

В целом, с помощью данного механизма Вордпресс создатели шаблонов и сайтов могут выбирать какой формат картинки использовать, например, для списка постов в сайдбаре и фотки в самой статье. При этом сама графика будет выглядеть абсолютно нормально, а веб-страничка загружаться быстрее.

Как изменить базовые размеры и добавить свои

Если по каким-то причинам вас не устраивают стандартные параметры или вы, например, поменяли тему на другую, то внести правки достаточно легко. Переходите в админке сайта в раздел “Настройки” – “Медиафайлы” и указываете там свои значения.

В конце не забудьте сохранить изменения.

Регистрируем новый параметр

А что делать, когда вы хотите добавить в шаблон какую-то новую уникальную величину фоток, например, для галереи, виджетов, баннеров и т.п.?

Для этого используем функцию add_image_size, которая добавляется в файл functions.php. Ее синтаксис следующий:

add_image_size( name, width, height, crop );

Здесь есть:

имя нового параметра размера картинки;
ширина;
высота;
опция обрезать изображение или нет (по умолчанию false).

Например пишете что-то в стиле:

add_image_size( 'our-new-size', 400, 200 );

Если нужно четкое соответствие размеру, то указываем “true” для последнего параметра:

add_image_size( 'our-new-size', 400, 200, true );

Кстати, вы можете выбирать с какой стороны фотка будет обрезана. Следующий код убирает часть изображения сверху справа:

add_image_size( 'our-new-size', 400, 200, array( 'right', 'top' ) );

Доступные значения для массива crop: center, top bottom, left, right.

Дополнительные нюансы

1. В названиях нельзя использовать стандартные имена: large, medium, thumbnail, thumb и post-thumbnail.

2. Если будете создавать свой шаблон для WP каталога тем, то в параметре используется имя темы + название, что-то вроде: newtheme-smallimg.

3. Теоретически пример выше можно записать и с проверкой для лучше совметимости:

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'our-new-size', 400, 200 );  
}

4. Чтобы использовать какой-то размер для миниатюры необходимо его добавить с помощью функции:

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails', array( 'post', 'event', 'page' ) );
		set_post_thumbnail_size( 250, 250 ); // размер миниатюры поста по умолчанию
}

Для вывода нового типа картинок в качестве миниатюр пишете:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( ' our-new-size ' ); 
}

Как удалить лишние размеры

Как вы уже поняли из скриншотов, в системе генерируется от 4 и более файлов на хостинге только дня одной(!) картинки. Думаю, в среднем их число может быть около 5-6 файлов (даже на стандартных шаблонах). Все это занимает лишнее место на диске. Если у вас сайт богат на разную графику + тариф хостинга имеет определенные ограничения, то лучше ненужные объекты удалять.

Вот как можно избавиться от стандартных размеров – пишете в functions.php код:

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

В сети находиле еще такой код, но, думаю, первый более логичный:

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 );

Внимание! Если верхние 2 варианта не помогают (у меня для дочерней темы не получилось), то попробуйте этот альтернативный подход. Он позволяет удалить размеры, добавленные в установленном шаблоне, но и с дефолтными тоже хорошо справляется:

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

Здесь “post-thumbnail” и “our-new-size” – это имена новых параметров размеров, которые хотите убрать.

Плагин Regenerate Thumbnails

Чтобы выполнить “полную очистку” хостинга от лишних фалов вам пригодится специальный плагин — Regenerate Thumbnails. С помощью хаков, указанных выше, мы выключили механизм создания новых копий, но для всех старых (уже обработанных картинок) они остались.

Скачиваете/устанавливаете плагин Regenerate Thumbnails. После этого найдете одноименный пункт меню в разделе админки “Инструменты”

Тут, кстати, вы можете видеть все доступные и зарегистрированные на вашем сайте размеры медиафайлов. Это позволяет легко понять сколько их всего и какие можно удалить.

На выбор у вас будет несколько опций, с помощью которых можно:

пропустить миниатюры, что уже существуют и соответствуют вашим новым правилам размеров (нет смысла создавать их повторно);
удалить не используемые файлы – в этом случае следует действовать очень аккуратно, т.к. если в проекте или шаблоне должны выводиться изображения, которые собираетесь удалить, то это приведет к ошибкам;
пересоздать миниатюры для всех объектов или только тех, что добавлены в записи/посты.

Лично я перед запуском модуля рекомендовал бы делать бекап, то есть скопировать все прошлые файлы на локальный компьютер. Если очистка FTP пройдет успешно и на веб-сайте не вылезет никаких ошибок, то этот бекап можно будет удалить.

Все дополнения/уточнения по теме размеров картинок в WordPress пишите нише.