Розмір головного зображення 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 і відвідувачем.