Как настроить изображения записей в теме Kadence и оптимизировать их в WebP
Разбираем, какие размеры изображений использовать в теме Kadence, как настроить миниатюры в архиве и отдельной записи, а также оптимизировать файлы через WebP Converter или TinyPNG
Изображение записи в WordPress используется сразу в нескольких местах:
- в блоге и архивах рубрик;
- в карточках последних записей;
- в результатах поиска;
- внутри отдельной статьи;
- в блоке похожих материалов;
- при публикации ссылки в социальных сетях.
Если загружать изображения разных размеров и пропорций, карточки получаются неодинаковыми, а на странице статьи фотография может занимать половину экрана. Разберём, как настроить единый стандарт для темы Kadence.
Рекомендуемый стандарт
Для большинства блогов на Kadence подойдёт следующая схема:
| Параметр | Рекомендация |
| Размер исходного изображения | 1600 × 800 px |
| Соотношение сторон | 2:1 |
| Формат | WebP |
| Качество WebP | 80–85 % |
| Желательный вес | 100–250 КБ |
| Архив записей | 16:9 |
| Отдельная запись | 2:1 |
| Размер изображения в архиве | Medium Large |
| Размещение важного объекта | Ближе к центру |
Размер 1600 × 800 пикселей достаточно большой для современных мониторов, но изображение при этом не становится чрезмерно высоким.
Чем размер отличается от пропорции
Это два разных параметра. Размер изображения — количество пикселей:
1600 × 800 px Пропорция — отношение ширины к высоте:
2:1 Например, одинаковую пропорцию 2:1 имеют:
1600 × 800
1200 × 600
1000 × 500
800 × 400 Если исходник имеет пропорцию 2:1, а в Kadence выбрано 2:3, тема будет показывать его в высоком вертикальном контейнере. Изображение окажется сильно обрезанным и займёт слишком много места. Именно несовпадение пропорций чаще всего становится причиной чрезмерно высоких изображений в статьях.
Как добавить изображение записи
Откройте: Записи → Все записи → Редактировать В правой панели редактора найдите раздел: Запись → Изображение записи Нажмите «Установить изображение записи» и выберите подготовленный файл. Перед загрузкой желательно переименовать файл. Вместо:
IMG_4587.webp лучше использовать понятное название:
kak-spravitsya-s-trevogoy.webp Используйте:
- строчные латинские буквы;
- дефисы между словами;
- краткое описание содержания;
- без дат, случайных цифр и набора ключевых слов.
Как заполнять атрибут Alt
Alt должен кратко описывать то, что показано на изображении. Хороший вариант:
Женщина выполняет дыхательное упражнение для снижения тревоги Плохой вариант:
психолог консультация тревога психолог онлайн помощь психолога Alt нужен прежде всего для доступности и понимания изображения поисковыми системами, а не для перечисления ключевых слов.
Настройка изображений в архиве Kadence
Архив — это страница блога, рубрики, метки и другие страницы со списком записей. Откройте: Внешний вид → Настроить → Макет записей/страниц → Макет архива В английском интерфейсе:
Appearance → Customize → Posts/Pages Layout → Archive Layout Kadence позволяет отдельно настроить количество колонок, элементы карточки, пропорцию и используемый размер изображения. Это подтверждается в официальной документации Kadence.
Количество колонок
Для обычного блога рекомендую:
- компьютер — 3 колонки;
- планшет — 2 колонки;
- телефон — 1 колонка.
При трёх колонках изображение не должно быть слишком высоким, иначе оно визуально вытесняет заголовок и отрывок.
Пропорция изображения в архиве
В разделе элементов карточки откройте настройки изображения записи: Элементы записи → Изображение → Соотношение изображения Для компактных карточек выберите:
16:9 Если хочется немного более высоких изображений:
3:2 Не рекомендую для обычного блога:
1:1
4:5
3:4
2:3 Эти пропорции делают изображения квадратными или вертикальными, из‑за чего карточки становятся слишком высокими. Kadence предлагает пропорции 1:1, 4:3, 3:2, 16:9, 2:1 и вертикальные варианты. При выборе фиксированной пропорции часть исходника может обрезаться.
Какой размер выбрать в архиве
В настройке Размер изображения доступны:
- Thumbnail;
- Medium;
- Medium Large;
- Large;
- Full.
Для сетки из трёх колонок оптимально:
Medium Large Обычно это версия шириной около 768 пикселей. Её более чем достаточно для карточки шириной 350–450 пикселей, включая экраны с повышенной плотностью. Если архив состоит из одной или двух широких колонок, можно использовать:
Large Выбирать Full для небольших карточек обычно не нужно. Иначе браузеру может быть предложен слишком большой исходный файл.
Настройка изображения внутри отдельной записи
Откройте: Внешний вид → Настроить → Макет записей/страниц → Макет отдельной записи В английском интерфейсе:
Appearance → Customize → Posts/Pages Layout → Single Post Layout В нижней части настроек найдите:
- «Показывать изображение записи»;
- «Положение изображения»;
- «Соотношение изображения».
Эти параметры предусмотрены непосредственно в настройках отдельной записи Kadence.
Положение изображения
Обычно доступны варианты:
- над заголовком;
- за заголовком;
- под заголовком.
Для информационного блога я рекомендую:
Под заголовком или стандартное расположение над основным текстом статьи. Вариант «за заголовком» подходит для эффектного баннера, но требует особенно тщательного выбора фотографии и цветов текста.
Пропорция изображения отдельной записи
Чтобы изображение не занимало половину экрана, установите:
2:1 Для исходника 1600 × 800 это идеальное совпадение: Kadence практически не придётся обрезать фотографию. Если выбрать 16:9, изображение будет немного выше:
1600 × 900 Если выбрать 3:2, оно станет заметно выше:
1500 × 1000 Для компактного оформления статьи лучше использовать именно 2:1.
Можно ли отключить изображение в статье
Да. Изображение записи может использоваться в архиве, но не отображаться внутри самой статьи. Для этого отключите:
Показывать изображение записи Карточки блога при этом сохранят изображения. Такой вариант подходит, если в начале каждой статьи уже вручную добавляется собственный графический блок.
Какие размеры загружать
Универсальный вариант
1600 × 800 px Подходит для:
- архива;
- отдельной записи;
- похожих записей;
- широких экранов;
- дисплеев с повышенной плотностью.
Более компактный вариант
1200 × 600 px Подходит, если максимальная ширина контента не превышает 900–1000 пикселей.
Для классической пропорции 16:9
1600 × 900 px или:
1280 × 720 px Изображение для социальных сетей
Для Open Graph обычно используется:
1200 × 630 px Если основное изображение записи имеет размер 1600 × 800, социальная сеть слегка обрежет его. Поэтому важные лица, текст и объекты нельзя размещать у краёв. Если SEO-плагин позволяет назначить отдельное изображение для социальных сетей, лучше подготовить дополнительный файл 1200 × 630.
Почему WordPress создаёт много копий изображения
После загрузки одного файла WordPress может создать версии:
150 × 150
300 × 150
300 × 300
600 × 300
768 × 384
1024 × 512
1536 × 768 Это нормальная работа WordPress. Браузер не загружает все файлы одновременно. WordPress формирует атрибут srcset, после чего браузер выбирает подходящую версию:
- телефону — маленькую;
- планшету — среднюю;
- большому монитору — крупную.
Поэтому устанавливать все размеры в разделе Настройки → Медиафайлы в ноль не следует. Это уменьшит количество файлов на хостинге, но ухудшит адаптивную загрузку изображений. Оставьте стандартные размеры WordPress. Дополнительные копии обычно занимают значительно меньше места, чем исходник, особенно если используются WebP и нормальное сжатие.
Вариант 1. Оптимизация через WebP Converter
Первый способ — подготовить изображение перед загрузкой в WordPress через сервис: WebP Converter от WebMarketing Lab Сервис поддерживает преобразование:
HEIC, JPG, PNG, SVG, BMP, GIF → WebP В нём можно:
- изменить качество;
- уменьшить размер;
- обрезать изображение;
- сравнить результат до и после;
- обработать несколько файлов;
- скачать готовые изображения.
Обработка происходит непосредственно в браузере.
Рекомендуемый порядок
- Откройте WebP Converter.
- Загрузите исходное изображение.
- При необходимости включите изменение размера.
- Установите ширину:
1600 px - Сохраните пропорции изображения.
- При необходимости откройте обрезку и задайте:
1600 × 800 - Установите качество примерно:
80–85% - Сравните изображение до и после.
- Убедитесь, что лица, надписи и важные детали не размылись.
- Скачайте WebP.
- Переименуйте файл понятным латинским названием.
- Загрузите его в WordPress как изображение записи.
Преимущества этого способа
- не требуется устанавливать ещё один плагин;
- нет зависимости от API;
- нет ежемесячных лимитов;
- можно заранее выбрать точные размеры;
- на сервер сразу загружается готовый WebP;
- полный контроль над обрезкой и качеством.
Недостатки
- каждое изображение нужно обрабатывать вручную;
- старые изображения не оптимизируются автоматически;
- редактор может забыть выполнить конвертацию.
Этот вариант я рекомендую для небольшого сайта или авторского блога, где изображения загружаются не каждый день.
Вариант 2. Автоматическая оптимизация через TinyPNG
Второй вариант — официальный плагин: TinyPNG — JPEG, PNG & WebP image compression Плагин умеет:
- автоматически сжимать новые изображения;
- преобразовывать файлы в WebP или AVIF;
- оптимизировать существующую медиатеку;
- уменьшать слишком большие исходники;
- выбирать, какие размеры WordPress нужно обрабатывать;
- показывать статистику экономии.
Установка TinyPNG
Откройте: Плагины → Добавить новый Найдите:
TinyPNG – JPEG, PNG & WebP image compression Проверьте, что автором указан TinyPNG, затем установите и активируйте плагин. После этого откройте: Настройки → TinyPNG Создайте бесплатный аккаунт или вставьте API-ключ.
Рекомендуемые настройки
Сжатие новых изображений
Выберите:
Сжимать новые изображения в фоновом режиме Это рекомендуемый разработчиками вариант. Если возникнет конфликт с другим плагином обработки изображений, переключитесь на сжатие непосредственно во время загрузки. Официальная инструкция TinyPNG описывает оба режима.
Изменение размера оригинала
Установите максимальную ширину:
1600 px Максимальную высоту можно не ограничивать либо установить:
1200 px Но плагин только уменьшает изображение — он не создаёт композиционно правильную обрезку 1600 × 800. Исходник желательно заранее кадрировать в нужной пропорции.
Формат
Для предсказуемого результата выберите:
Конвертировать в WebP Режим автоматического выбора между WebP и AVIF может дать меньший файл, но WebP проще контролировать и он полностью подходит для обычного WordPress-сайта.
Какие размеры оптимизировать
Если бесплатные кредиты нужно расходовать экономно, включите:
- Original;
- Medium Large;
- Large.
При необходимости добавьте:
- Medium;
- Thumbnail — если миниатюры реально используются на сайте.
Снятие галочки в TinyPNG не запрещает WordPress создавать этот размер. Оно лишь отключает его обработку сервисом TinyPNG.
Важный нюанс лимита
TinyPNG предоставляет 500 бесплатных кредитов в месяц, но это не означает 500 исходных фотографий. Каждый размер считается отдельно. Например, если WordPress создаёт девять файлов из одного исходника:
9 размеров × 1 операция сжатия = 9 кредитов Если одновременно включено преобразование в WebP:
9 размеров × 2 операции = 18 кредитов В таком случае 500 кредитов хватит примерно на:
500 ÷ 18 ≈ 27 исходных изображений Сам TinyPNG указывает, что на стандартной установке лимита обычно хватает примерно на 100 изображений при одном сжатии или примерно на 50 при сжатии и конвертации. Фактическое количество зависит от темы и плагинов, которые регистрируют дополнительные размеры.
Оптимизация старых изображений
Откройте: Медиафайлы → Bulk TinyPNG Перед запуском плагин покажет приблизительное количество необходимых кредитов. Сначала сделайте резервную копию папки:
wp-content/uploads После этого запускайте массовую оптимизацию.
Какой из двух способов выбрать
Используйте WebP Converter, если:
- изображения загружаются редко;
- вы хотите обходиться без дополнительного плагина;
- требуется точная ручная обрезка;
- нужно полностью контролировать качество;
- вы не хотите зависеть от ежемесячных кредитов.
Используйте TinyPNG, если:
- изображения загружают клиенты или редакторы;
- публикации выходят регулярно;
- ручная обработка часто забывается;
- нужно оптимизировать существующую медиатеку;
- требуется автоматизация.
Не нужно обрабатывать один файл сначала через WebP Converter, а затем повторно сильно сжимать его через TinyPNG. Повторное сжатие может ухудшить качество без заметной дополнительной экономии. Для одного изображения выбирайте один основной сценарий:
Исходник → WebP Converter → WordPress или:
Исходник JPG/PNG → WordPress → TinyPNG → WebP Готовая конфигурация для сайта на Kadence
Я рекомендую следующий итоговый вариант:
Исходные изображения
Размер: 1600 × 800 px
Формат: WebP
Качество: 82%
Вес: желательно до 200–250 КБ Архив блога
Колонки: 3
Пропорция: 16:9
Размер: Medium Large Отдельная запись
Показывать изображение: да
Положение: под заголовком
Пропорция: 2:1 Мобильная версия
Отдельное изображение загружать не нужно. WordPress выберет уменьшенную копию через srcset.
Что делать с уже загруженными изображениями
Если изображения имеют разные пропорции, менять каждый файл необязательно. Сначала установите единые пропорции в Kadence:
- архив — 16:9;
- отдельная запись — 2:1.
Kadence поместит изображения в одинаковые контейнеры и обрежет лишнее. После изменения настроек:
- сохраните настройки кастомайзера;
- очистите кеш Kadence Performance;
- очистите кеш CDN или Cloudflare, если используется;
- откройте блог в режиме инкогнито;
- проверьте компьютер и телефон.
Если были изменены именно размеры миниатюр WordPress, новые параметры применятся только к будущим загрузкам. Для старых файлов понадобится регенерация миниатюр.
Частые ошибки
Загрузка огромных фотографий
Файл 5000 × 3500 пикселей для изображения записи не нужен. Он занимает место, дольше обрабатывается и может вызвать нехватку памяти на слабом хостинге.
Разные пропорции исходников
Если одна фотография квадратная, другая вертикальная, а третья панорамная, Kadence будет обрезать их по‑разному. Используйте один шаблон, например 1600 × 800.
Важный объект у края
При адаптивном отображении края могут обрезаться. Лицо или главный объект лучше размещать в центральных 60–70 % изображения.
Использование Full в маленьких карточках
Полный исходник не нужен для карточки шириной 350 пикселей. Для такого архива достаточно Medium Large.
Отключение всех размеров WordPress
Это уменьшает количество файлов, но лишает браузер адаптивных вариантов. В результате телефон может загружать тот же крупный файл, что и компьютер.
Двойная оптимизация
Не стоит одновременно конвертировать изображения несколькими плагинами или сервисами. Выберите один ответственный инструмент и отключите дублирующую обработку.
Итог
Для аккуратного блога на Kadence важнее всего соблюдать три правила:
- Загружать изображения одного размера — желательно 1600 × 800 пикселей.
- Настроить в Kadence пропорцию 16:9 для архива и 2:1 для отдельной записи.
- Загружать уже подготовленный WebP через WebP Converter либо автоматизировать обработку с помощью TinyPNG.
Тогда карточки записей будут одинаковыми, изображение внутри статьи не займёт половину экрана, а WordPress сможет подставлять подходящий файл для каждого устройства.
