Размер миниатюры записи WordPress: 1200×630 + как найти свой

Коротко: если вы ещё не знаете размер своей темы, используйте 1200 x 630 пикселей (около 1.91:1). Это размер превью ссылки, который рекомендует Facebook, а SEO-плагины обычно берут миниатюру записи как изображение для соцсетей.

В самой записи важен размер, который выводит ваша тема. WordPress сохраняет каждый загруженный файл в нескольких размерах, а тема выбирает, какой из них показать. Классические темы задают это через set_post_thumbnail_size() или add_image_size(), блочные темы в блоке «Изображение записи». Если тема обрезает до 16:9 или квадрата, у изображения 1200 x 630 может пропасть часть слева и справа. Узнайте размер своей темы (четыре способа ниже), а потом загрузите изображение не меньше него или примерно вдвое шире, чтобы картинка была чёткой на экранах с высокой плотностью пикселей.

Чтобы увидеть все размеры, которые WordPress создаст из конкретного изображения, загрузите его в инструмент размеров изображений WordPress.

Какой размер нужен в зависимости от места показа

Где показывается изображение	Какой размер загружать	Примечания
Ваши записи, размер темы пока неизвестен	1200 x 630 или 2400 x 1260 для большей чёткости	Подходит и для превью ссылок, пока вы выясняете размер своей темы
Ваши записи, размер темы известен	Примерно вдвое больше ширины миниатюры записи в вашей теме, с тем же соотношением сторон	WordPress делает из загруженного файла копии меньше, но никогда больше
Превью ссылок в Facebook	Не меньше 1200 x 630 (около 1.91:1); 1200 x 628 почти той же формы	По рекомендациям Facebook по шерингу
Google Discover	Ширина не меньше 1200 px, 16:9 (например, 1200 x 675)	По рекомендациям Google для Discover

Размеры изображений WordPress кратко

Каждое загруженное изображение получает уменьшенные копии для каждого зарегистрированного размера. Вот размеры, которые регистрирует ядро WordPress, со значениями по умолчанию из Theme Handbook и справочника функций ядра:

Название размера	Размеры по умолчанию	Можно изменить в «Настройки > Медиафайлы»?	Примечания
thumbnail	150 x 150, с обрезкой	Да	Есть флажок «обрезать до точных размеров»
medium	до 300 x 300	Да	Масштабируется пропорционально
medium_large	ширина 768, высота не ограничена	Нет	Используется в основном в srcset
large	до 1024 x 1024	Да	Масштабируется пропорционально
1536x1536	до 1536 x 1536	Нет	Добавлен в WordPress 5.3 для экранов высокой плотности
2048x2048	до 2048 x 2048	Нет	Добавлен в WordPress 5.3 для экранов высокой плотности
post-thumbnail	Задаёт тема	Нет	Существует, только если тема вызывает set_post_thumbnail_size()
full	Ваш исходный файл	Нет	Очень большие файлы сначала уменьшаются (см. ниже)

«До» означает, что WordPress вписывает изображение в этот прямоугольник и сохраняет пропорции. Фото 2000 x 1000 в размере large станет 1024 x 512, а не 1024 x 1024.

Темы и плагины часто добавляют свои размеры через add_image_size(). Например, WooCommerce добавляет собственные размеры для товаров, о них наше руководство по размеру изображений товаров WooCommerce.

Ещё одно правило касается больших файлов. Начиная с WordPress 5.3, если изображение шире или выше 2560 пикселей, WordPress уменьшает его и использует уменьшенную копию как самый большой доступный размер. Этот порог задаёт фильтр big_image_size_threshold, его значение по умолчанию 2560. Если вы видите -scaled в именах файлов и хотите понять, стоит ли это отключать, прочитайте, как отключить масштабированные изображения в WordPress.

Откуда на самом деле берётся размер миниатюры записи

Миниатюра записи это любое изображение, которое вы выбрали в панели «Изображение записи» в редакторе. Что увидят посетители, зависит от того, как тема его выводит.

Классические темы

Классическая тема включает миниатюры записей и регистрирует размер в своём functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() регистрирует размер с именем post-thumbnail. Третий аргумент управляет обрезкой. При false (по умолчанию) WordPress масштабирует изображение так, чтобы оно поместилось в 1200 x 675. При true он обрезает изображение ровно до 1200 x 675 от центра, и всё, что не попало в рамку 16:9, теряется. Можно также передать массив, например array( 'center', 'top' ), чтобы выбрать, какая часть останется.

Многие темы регистрируют дополнительные именованные размеры для разных шаблонов:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Шаблон затем выбирает один из них по имени:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Без имени the_post_thumbnail() использует post-thumbnail. Значит, реальный размер миниатюры записи в классической теме это размер, указанный в шаблоне, и архив блога может использовать не тот размер, что страница отдельной записи.

Блочные темы

Блочные темы, включая бесплатные темы на этом сайте, выводят миниатюру записи блоком «Изображение записи». В справочнике блоков ядра перечислены его настройки, в том числе sizeSlug (какой зарегистрированный размер загружать), aspectRatio, width, height и scale.

Это меняет место, где нужно искать. Откройте «Внешний вид > Редактор», отредактируйте шаблон отдельных записей и выделите блок «Изображение записи». Боковая панель показывает, какой размер изображения загружает блок и задано ли соотношение сторон. Соотношение сторон применяется в браузере через CSS: файл остаётся тем же, меняется только видимая рамка. Если блок требует рамку 16:9, а изображение квадратное, часть его будет скрыта. Шаблоны архива и главной страницы могут иметь другие настройки, чем шаблон отдельной записи, поэтому проверьте каждый.

Как узнать размер миниатюры записи в вашей теме

Пробуйте по порядку. Достаточно первого способа, который даст ответ.

1. Посмотрите документацию темы. Хорошие темы указывают рекомендуемый размер миниатюры записи. Если он указан, используйте его.

2. Выведите зарегистрированные размеры через WP-CLI. Если у вас есть доступ к командной строке, wp media image-size покажет каждый зарегистрированный размер с шириной, высотой, настройкой обрезки и соотношением сторон:

   wp media image-size

3. Поищите в файлах темы. В классической теме найдите в functions.php (и подключаемых им файлах) set_post_thumbnail_size и add_image_size, затем посмотрите в single.php или частях шаблона, какое имя передаётся в the_post_thumbnail(). В блочной теме проверьте блок «Изображение записи» в редакторе сайта, как описано выше.

4. Проверьте опубликованную запись. Щёлкните правой кнопкой по миниатюре записи, выберите «Просмотреть код» и прочитайте имя файла в src. WordPress добавляет размеры к уменьшенным копиям, так что my-photo-1200x675.jpg говорит о том, что тема загрузила копию 1200 x 675. Посмотрите и на srcset, потому что на узких экранах браузер может выбрать копию поменьше. Если в имени нет размеров, использовался полноразмерный файл.

Когда целевой размер известен, прогоните пример изображения через инструмент размеров изображений, чтобы до загрузки целой партии увидеть, как будет выглядеть каждая копия.

Как выбрать размер загружаемого файла

Когда размер темы известен, результат зависит от четырёх решений.

• Ширина. Загружайте файл не уже той ширины, которую выводит тема. Чтобы изображение было чётким на экранах телефонов и ноутбуков высокой плотности, ориентируйтесь примерно на двойную ширину. Для места шириной 1200px это 2400px. WordPress делает из вашего файла копии меньше и никогда не делает больше, поэтому слишком маленький оригинал самая частая причина размытого изображения после загрузки.
• Соотношение сторон. Подгоните его под обрезку темы. Если тема обрезает до 16:9, дайте ей 16:9 и держите главный объект ближе к центру, чтобы жёсткая обрезка не срезала головы или текст.
• Вес файла. Фото шириной 2400px, сохранённое в JPEG с разумным качеством, обычно весит несколько сотен килобайт. Загрузка файла с камеры шириной 6000px только добавляет работы: WordPress всё равно уменьшает всё, что больше 2560px, а лишние пиксели до посетителей не доходят.
• Формат файла. WordPress принимает загрузку WebP с версии 5.8 и AVIF с версии 6.5, если их поддерживает библиотека обработки изображений на вашем сервере. Оба формата при сопоставимом качестве обычно дают файл меньше, чем JPEG.

Изображение для соцсетей это отдельная задача

Когда кто-то делится вашей записью в Facebook, LinkedIn или других сетях, превью берётся из тега og:image, который SEO-плагины обычно заполняют миниатюрой записи. Документация Facebook по шерингу рекомендует изображения не меньше 1200 x 630 пикселей, как можно ближе к соотношению 1.91:1.

Встречается и рекомендация 1200 x 628. Это почти ровно 1.91:1, а 1200 x 630 даёт около 1.90:1. Разница по высоте всего 2 пикселя, так что подойдёт любой из двух размеров.

Если размер вывода в вашей теме тоже близок к 1.91:1, один файл 1200 x 630 (или 2400 x 1260) подойдёт для обоих случаев. Если тема обрезает до 16:9 или квадрата, держите важное подальше от левого и правого краёв или задайте отдельное изображение для соцсетей в SEO-плагине.

У Google Discover свои рекомендации по изображениям. Рекомендации Google для Discover советуют изображения шириной не меньше 1200 px, в сумме больше 300 000 пикселей, с соотношением 16:9, например 1200 x 675. Крупным изображениям также нужна настройка robots max-image-preview:large, которую WordPress добавляет по умолчанию начиная с версии 5.7, если только сайт не настроен так, чтобы просить поисковые системы его не индексировать.

Как изменить размер миниатюры записи

Где вносить изменения, зависит от размера и от вашей темы.

Размеры ядра (thumbnail, medium, large). Откройте «Настройки > Медиафайлы» и измените ширину и высоту. Документация экрана настроек медиафайлов описывает эти поля, включая флажок обрезки для миниатюр.

Размеры темы в классической теме. Не редактируйте родительскую тему: обновление темы перезапишет ваше изменение. Добавьте новые значения в functions.php дочерней темы. Повторная регистрация размера с тем же именем заменяет его, а настройка дочерней темы должна выполняться после родительской:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

Приоритет 11 заставляет этот код выполниться после родительской темы, подключённой с приоритетом по умолчанию 10. Проверьте код родительской темы и поменяйте значение, если там используется более поздний приоритет.

Блочные темы. Измените размер изображения и соотношение сторон блока «Изображение записи» в шаблоне в редакторе сайта. Код не нужен, а изменение применится ко всем записям с этим шаблоном.

Одно изображение без кода. Чтобы выбрать, что останется после обрезки на конкретном изображении, откройте его в «Медиафайлы > Библиотека» и нажмите «Редактировать изображение». Обрежьте его до соотношения сторон вашей темы (инструмент обрезки принимает соотношение, например 16:9) или масштабируйте, затем сохраните. WordPress применит изменение ко всем размерам этого изображения и сохранит исходный файл, так что позже правку можно отменить кнопкой «Восстановить исходное изображение».

Пересоздайте существующие миниатюры

Изменённый размер действует только для новых загрузок. Изображения, которые уже есть в медиабиблиотеке, сохраняют старые копии, пока вы их не пересоздадите. Это делает команда wp media regenerate:

wp media regenerate --yes

Полезные параметры из документации WP-CLI:

• --image_size=hero-wide пересоздаёт только этот размер. Повторите флаг для нескольких размеров.
• --only-missing создаёт размеры, которых ещё нет, и не трогает существующие файлы. Это быстрее после добавления нового размера.
• --skip-delete сохраняет старые файлы миниатюр. Используйте его, если другие сайты, рассылки или фиды ссылаются прямо на эти файлы.

Без доступа к командной строке то же самое из админки сделает плагин Regenerate Thumbnails из каталога плагинов WordPress.org. При большой медиабиблиотеке сначала сделайте резервную копию, потому что пересоздание перезаписывает много файлов.

Частые ошибки

• Остановиться на 1200 x 630. Это хорошая отправная точка, и для превью ссылок этот размер подходит, но если тема обрезает до 16:9 или квадрата, часть изображения будет срезана. Проверьте размер своей темы, прежде чем загружать партию изображений.
• Отключить генерируемые размеры, чтобы «сохранить оригинал». Если у темы нет уменьшенных копий, она может загружать полный файл на любом экране, и страница будет тормозить на телефонах. Уменьшенные копии существуют как раз для того, чтобы этого не было.
• Изменить код размеров изображений и пропустить пересоздание. Код работает, но только для новых загрузок. Именно поэтому многие решают, что изменение размера «ничего не дало».
• Изменить размер в родительской теме. Следующее обновление темы его удалит. Используйте дочернюю тему или редактор сайта.

Если после подбора размера, соотношения сторон и пересоздания изображение всё ещё выглядит не так, сравните имя файла, который загрузил браузер, с размерами, которые, по данным инструмента размеров изображений, должен создать WordPress. Если они не совпадают, часто свою версию отдаёт плагин оптимизации или ресайзер изображений в CDN между WordPress и посетителем.