Який розмір має бути в головного зображення WordPress?

Число, яке потрібне більшості, — 1200 x 630 пікселів. Це те співвідношення (1.91:1), яке Facebook, LinkedIn і X використовують для попереднього перегляду посилань, і саме таким має бути зображення Open Graph. Якщо ви задаєте головне зображення переважно для того, щоб посилання гарно виглядали при поширенні, використовуйте 1200 x 630 і на цьому зупиніться.

Але це число — не те, що ваш шаблон насправді показує в записі. WordPress рідко відображає ваше головне зображення в оригінальному розмірі. Шаблон запитує конкретний зареєстрований розмір зображення, і WordPress віддає той заздалегідь згенерований кроп, який йому відповідає. Ось чому зображення, яке ідеально виглядає у Facebook, може виглядати нечітким, розтягнутим або неправильно обрізаним усередині шаблону окремого запису. «Правильний» розмір залежить від шаблону, а не від якогось універсального правила.

Чому шаблон перекриває це число

Коли ви завантажуєте зображення, WordPress не зберігає один файл. Він запускає wp_generate_attachment_metadata() і створює похідне зображення для кожного зареєстрованого розміру: три стандартні (thumbnail, medium, large), medium_large для блокового редактора (шириною 768px), а також будь-який розмір, який шаблон чи плагін зареєстрував через add_image_size().

Шаблон, якому потрібне широке 16:9 головне зображення, зробить у functions.php щось на кшталт:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Четвертий аргумент, true, означає жорсткий кроп. 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 генерує з вашого зображення, і який із них є обрізаним головним зображенням. Перетягніть своє зображення в інструмент розмірів зображень WordPress — він показує кожне похідне, яке створив би WP, з точними розмірами в пікселях, щоб ви могли підігнати джерело під реальну ціль, а не під міфічні 1200x630.

2. Завантажуйте достатньо велике, щоб покрити найбільший кроп. Якщо головне зображення шаблону — 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. Підженіть ці два — і вгадування закінчиться.