Какого размера должна быть миниатюра записи в WordPress?
Число, которое ищет большинство, — 1200 x 630 пикселей: соотношение 1.91:1, которое Facebook, LinkedIn и X используют для превью ссылок. Но это не тот размер, который
Опубликовано
Число, которое ищет большинство, — 1200 x 630 пикселей. Это соотношение, которое Facebook, LinkedIn и X используют для превью ссылок (1.91:1), и именно таким должно быть изображение Open Graph. Если вы задаёте миниатюру записи в основном для того, чтобы ссылки при расшаривании выглядели правильно, используйте 1200 x 630 и на этом остановитесь.
Но это число — не то, что ваша тема реально показывает в самой записи. WordPress почти никогда не выводит миниатюру записи в исходном размере. Тема запрашивает конкретный зарегистрированный размер изображения, а WordPress отдаёт тот заранее сгенерированный кроп, который под него подходит. Именно поэтому изображение, которое идеально смотрится в Facebook, может выглядеть мыльным, растянутым или неправильно обрезанным внутри шаблона одиночной записи. «Правильный» размер зависит от темы, а не от какого-то универсального правила.
Почему тема переопределяет это число
Когда вы загружаете изображение, WordPress не хранит один файл. Он запускает wp_generate_attachment_metadata() и создаёт производную для каждого зарегистрированного размера: три размера по умолчанию (thumbnail, medium, large), размер блочного редактора medium_large (шириной 768px), плюс любой размер, зарегистрированный темой или плагином через add_image_size().
Тема, которой нужен широкий hero-блок в формате 16:9, сделает в functions.php примерно следующее:
add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );
Четвёртый аргумент, true, означает жёсткую обрезку (hard crop). WordPress обрежет ваше изображение ровно до 1200 x 675, выбросив всё, что не влезает в рамку 16:9. Если объект съёмки находится ближе к верхней или нижней части кадра, его срежет. При значении false (или без него) изображение масштабируется пропорционально, и итоговые размеры могут отличаться от запрошенных.
Затем шаблон решает, какой размер подтянуть:
the_post_thumbnail( 'hero-featured' );
Какое бы имя ни передавалось в the_post_thumbnail(), именно этот кроп и отрисуется. Так что реальный размер миниатюры записи на вашем сайте задаётся в двух местах, которые писали не вы: в вызове add_image_size() и в вызове the_post_thumbnail() в теме. Загрузка файла большего размера не меняет ни то, ни другое.
Есть ещё один слой. WordPress отдаёт srcset, поэтому на экранах поменьше браузер может загрузить производную medium или large вместо полноразмерного кропа. Размер, который вы видите в DevTools, зачастую не тот, что вы загружали.
Как это исправить, по порядку
1. Выясните, что именно запрашивает ваша тема. Прежде чем гадать, посмотрите на все размеры, которые WordPress генерирует из вашего изображения, и определите, какой из них — обрезанный hero. Загрузите своё изображение в инструмент размеров изображений WordPress — он показывает каждую производную, которую создал бы WP, в точных пиксельных размерах, чтобы вы могли подогнать исходник под реальную цель, а не под мифические 1200x630.
2. Загружайте достаточно большой файл, чтобы покрыть самый большой кроп. Если hero темы — 1200 x 675, загружайте как минимум столько, а в идеале 2x для retina (2400 x 1350). WordPress аккуратно уменьшает изображения; увеличивать он не умеет. Слишком маленький исходник — самая частая причина размытой миниатюры записи.
3. Приведите соотношение сторон в соответствие с кропом темы. Если тема жёстко обрезает под 16:9, подавайте ей 16:9. Компонуйте кадр с объектом по центру, чтобы жёсткая обрезка никому не отрезала голову.
4. Если зарегистрированный размер неверный, поменяйте его и пересоздайте. Отредактируйте значения add_image_size() в дочерней теме, затем перестройте существующие миниатюры — новые размеры применяются только к будущим загрузкам, пока вы этого не сделаете:
wp media regenerate --yes
Нет WP-CLI? Плагин Regenerate Thumbnails делает то же самое из панели управления.
Чего делать не стоит
Не загружайте просто изображение 1200x630 в расчёте на то, что всё само разрулится. Если зарегистрированный размер темы — 16:9, WordPress жёстко обрежет ваше изображение 1.91:1, и вы потеряете верх и низ. Число для Open Graph и число для отображения — это разные задачи.
Не отключайте размеры изображений WordPress ради «сохранения оригинала». Люди находят советы выставить промежуточные размеры в 0 или отцепить the_post_thumbnail. Тогда тема откатывается к отдаче полноразмерного файла, уменьшенного средствами браузера, — JPEG на 4000px, отправленный на телефон. Это убивает скорость загрузки и Core Web Vitals. Производные существуют не просто так.
Не доверяйте «рекомендуемому размеру» плагина больше, чем реальному зарегистрированному размеру вашей темы. SEO-плагины рекомендуют 1200x630 для OG-тега, и для этого тега это верно. Но это ничего не говорит о том, под какой кроп обрезает ваш шаблон одиночной записи.
Не пропускайте wp media regenerate после изменения размеров. Редактирование add_image_size() никак не влияет на уже загруженные изображения. Это тот шаг, который люди забывают, а потом делают вывод, что код не сработал.
Всё ещё не получается?
Если после подгонки размеров и пересоздания миниатюр изображение по-прежнему выглядит неправильно, проблема обычно в режиме обрезки (true против false) или в srcset, который отдаёт производную меньше, чем вы ожидаете. Загрузите файл в инструмент размеров изображений, чтобы увидеть, какие именно кропы производит ваша настройка, а затем сравните это с тем, что браузер реально загружает в DevTools. Совместите эти два — и гадать больше не придётся.