Используйте размеры изображений Open Graph для планирования вариантов для Twitter/X-карт, миниатюр и встроенных изображений — чтобы они быстро загружались, выглядели чётко и повышали CTR.
Изображение может идеально смотреться на странице и при этом провалиться в социальных сетях или поиске. Причина проста: у каждой площадки — свой «бокс». Где-то широкая рамка, где-то квадрат, а где-то изображение обрежут по центру без предупреждения.
Большинство платформ не покажут ваше изображение целиком. Они изменяют его размер, обрезают под фиксированное соотношение и иногда добавляют отступы, оверлеи или скруглённые углы. Широкий хедер может превратиться в неаккуратную миниатюру, где объект отрезан, а текст становится нечитаемым.
«Изображение для поста» обычно появляется в нескольких местах:
Даже внутри соцсетей правила различаются. Open Graph-превью чаще всего предпочитают широкую прямоугольную форму, тогда как другие места могут выдать квадратную обрезку или укороченную версию того же кадра. Если объект сдвинут в сторону, автообрезка может раскрошить его пополам.
Представьте хедер: человек слева, короткий заголовок справа и чистый фон. В полный ширины он работает. В маленькой квадратной миниатюре человек превращается в плечо, заголовок исчезает, и картинка становится неясным пятном. Люди пролистывают мимо, потому что не понимают, что это.
Поэтому важны варианты изображения. «Варианты» — это просто небольшой набор версий одной и той же визуальной идеи, каждая — с определённым размером и обрезкой под конкретное использование. Цель не в создании десятков файлов, а в защите того, что делает изображение понятным:
Когда вы заранее планируете варианты, вы перестаёте бороться с неожиданной обрезкой позже, и каждое место получает шанс заработать клик.
Изображение — не просто украшение. Оно одновременно превью, миниатюра, карточка и иногда вспомогательный элемент для чтения. У каждого места разные рамки, оверлеи и размеры просмотра.
Open Graph-превью — это то, что видят люди при шаринге в мессенджерах и в лентах многих соцсетей. Бокс превью часто требует фиксированного соотношения сторон: если изображение слишком высокое или широкое, платформы его обрежут.
Проектируйте чистую центральную область: один понятный объект, короткий текст по желанию и достаточно отступов, чтобы небольшая обрезка не убрала ключовую деталь.
Макеты Twitter/X могут закрывать части изображения, особенно у краёв. Детали в углах легко исчезают, а тонкие линии внизу выглядят неаккуратно на мобильных устройствах.
Думайте в терминах «безопасной зоны», а не идеальной обрезки по краю. Держите лица, продукты и важный текст подальше от углов и ближе к центру.
Миниатюры в поиске маленькие и их легко пропустить. Они выигрывают от простых форм, сильного контраста и одного очевидного объекта. Загруженный хедер может выглядеть отлично на сайте и при этом превратиться в визуальный шум в миниатюре.
Миниатюра работает лучше, когда она строится вокруг узнаваемости, а не деталей. Если нельзя понять изображение за доли секунды, оно слишком широкое, перегруженное или содержит слишком много текста.
Встроенные картинки должны оправдывать своё место. Используйте их, чтобы объяснить, сравнить или показать пример, а не просто заполнить пространство.
Простое правило: если удаление изображения не изменит понимание текста, скорее всего оно не нужно.
Избранное изображение — ваш первый впечатляющий кадр в превью и миниатюрах. Встроенные изображения помогают пониманию при чтении. Им часто нужны разные кадры: избранные изображения должны быть смелыми и простыми, а встроенные — шире, детальнее и ближе к содержанию.
Прежде чем экспортировать что-либо, определите свой стандартный набор. Это экономит время и поддерживает визуальную согласованность для Open Graph, Twitter/X, превью поиска и собственных страниц.
Начните с одного мастер-изображения, которое оставляете нетронутым. Сделайте его достаточно большим, чтобы обрезки не делали картинку мягкой. Практическая база — мастер с минимум 2000 px по короткой стороне.
Далее выберите небольшой набор соотношений сторон, которые вы всегда будете экспортировать. Не гонитесь за каждой площадкой. Надёжный набор обычно покрывает:
Потом решите, как адаптировать мастер под каждое соотношение:
Если в изображениях есть текст, пересоставление часто единственный способ сохранить читаемость на всех размерах.
Наконец, задайте схему именования, которой можно следовать автоматически. Поддерживайте её, чтобы CMS, шаблон или рабочий поток могли надежно выбирать нужный актив, и чтобы вы могли сравнивать эффективность вариантов позже.
Начните с одного мастер-изображения максимально высокого качества. Перед изменением размера поймите, о чём изображение: главный объект, ключевой текст (если он есть) и настроение. Если объект не очевиден с первого взгляда, изменение размера не исправит это.
Сначала сделайте широкий социальный вариант. Здесь размеры Open Graph особенно важны, потому что платформы обрезают по-разному и показывают превью мельче, чем вы ожидаете. Держите объект в центре и оставляйте безопасное пространство у краёв.
Создайте версию для Twitter/X. Проверьте её в небольшом размере на экране. Если текст или важные детали находятся у нижних углов, сдвиньте их внутрь или уберите.
Соберите квадратную (или почти квадратную) миниатюру. Миниатюры не прощают загруженные фоны. Обрежьте плотнее, увеличьте объект и уберите тонкие детали. Если нужен текст, ограничьтесь несколькими словами.
Экспортируйте встроенное изображение. Оно должно поддерживать чтение. Держите комфортную ширину, избегайте крошечных встроенных подписей и следите, чтобы изображение не выглядело рекламой между абзацами.
После экспорта просмотрите варианты в реальных размерах: лента на телефоне, превью на десктопе и в колонке вашей статьи. Большинство «всё было нормально в Photoshop» проблем сразу видно при таком тесте.
Обрезка — место, где хорошие изображения теряют клики. Кадр, который кажется приемлемым в полном размере, может превратиться в неясное пятно в миниатюре. Цель проста: взглядом человек должен понять, что перед ним.
Начните с наименьшего места показа, которое вам важно (часто это миниатюра SERP или маленькое соц-превью). Если объект там неузнаваем, кадр слишком широкий или объект слишком мал.
Платформы обрезают непредсказуемо, некоторые добавляют UI-элементы. Давайте себе запас, чтобы не отрезать лбы, края продукта или ключевые объекты.
Практическая привычка, которая работает везде:
Маленький текст прямо в картинке — частая ловушка. На мониторе он читается, а после изменения размера и компрессии превращается в шум.
Если используете текст, делайте его коротким, жирным, с сильным контрастом и с воздушным отступом. По возможности экспортируйте вариант без текста для маленьких мест показа.
Сложные текстуры (трава, блёстки, мелкие узоры) часто распадаются на блочные артефакты при компрессии. Чистые фоны сохраняют резкие края и делают объект понятнее.
Пример: хедер с человеком, держащим телефон с панелью — для миниатюры обрежьте по лицу и телефону, упростите фон и не полагайтесь на мелкие детали экрана. Если нужен ярлык, оставьте его для больших социальных карт и делайте коротким.
Одна и та же картинка может выглядеть резкой на странице и размываться или тяжеле нап при шаринге. Формат, уровень компрессии и базовые метаданные часто решают, станет ли превью кликабельным.
JPEG чаще всего лучше для фотографий и градиентов — он держит файлы маленькими. PNG подходит для графики с текстом, логотипов и плоских цветов, но размер растёт. WebP и AVIF часто дают лучшее качество при меньшем размере, но разумно иметь запасной вариант для мест без их поддержки.
Компрессия не универсальна. Маленькая миниатюра может выдержать агрессивную компрессию, потому что отображается мало. Большая социальная карточка требует тщательности, так как артефакты заметны вокруг лиц и текста.
Простое эмпирическое правило:
Согласованность строит узнаваемость. Держите цвет, контраст и общий стиль похожими в постах, чтобы изображения выглядели родными в лентах и списках.
Также поддерживайте базовое в порядке:
Когда это единообразно, вы тратите меньше времени на поиск активов и больше — на тесты, которые реально повышают CTR.
Самая большая ошибка — иметь один «мастер-изображение» и позволять каждой платформе обрезать его автоматически. То, что работает как широкий хедер, может стать случайным зумом в квадратной миниатюре или отрезать главную часть в соц-превью.
Переизбыточный дизайн — ещё один тихий убийца. Большие логотипы, длинные заголовки и мелкие значки выглядят нормально на десктопе, а на телефоне превращаются в размытие. Качество падает, если экспортировать мелкие версии и потом масштабировать вверх. Увеличение размывает края и портит лица. Начинайте с большого мастера и масштабируйте вниз для каждого варианта.
Несоответствие стиля тоже важно. Если Open Graph-превью яркое и чистое, а обрезка Twitter/X — темнее и с другими цветами, пользователю кажется, что это разные вещи. Держите обработку фото и правила компоновки одинаковыми во всех вариантах.
И, наконец, не пропускайте мобильные проверки. Кадр, сбалансированный на десктопе, может скрывать ключевые детали за UI на мобильных.
Незадолго до публикации:
Сделайте финальный реальный проход: откройте статью на телефоне и на десктопе, пролистайте один раз и отметьте, что выглядит не так. Если изображение привлекает внимание по неправильной причине (слишком яркое, слишком высокое, нечитаемое, маленький объект), сначала поправьте кадр, затем настройте компрессию.
Представьте пост о новой функции. В хедере человек слева держит ноутбук, справа — скриншот продукта. В полный ширины всё отлично. При повторном использовании везде — всё разваливается.
Начните с чистого мастера (высокое разрешение, без надпечатанного текста). Затем сделайте четыре варианта с продуманными кадрами:
Для широкого Open Graph-кадра не смещайте по умолчанию скриншот в центр. Держите лицо и ключевую область продукта внутри безопасной зоны (приблизительно средние 70%). Если экран ноутбука под углом, обрежьте плотнее, чтобы основная панель UI оставалась читаемой в маленьком превью.
Для квадратной миниатюры отбросьте мелкие UI-детали. Миниатюры про узнаваемость, а не объяснение. Обрежьте по лицу и одной крупной форме продукта (график, заголовочная зона, карточка). Если скриншот — суть, подумайте о размытом фото-фоне и одной чёткой UI-панели.
Для встроенной версии выбирайте ясность вместо драматичности. Спокойный кадр, меньше фона и достаточная яркость, чтобы скриншот читался на белой странице.
Относитесь к вариантам изображений как к заголовкам. Измеряйте, корректируйте и сохраняйте то, что работает.
Начните с страниц, которые уже получают показы, но мало кликов. Если страница в выдаче, но CTR низкий, превью часто слишком тёмное, перегруженное или неправильно обрезано.
Держите тесты небольшими. Одна смена за раз — достаточно, чтобы научиться:
Если вы публикуете в масштабе, стандартизируйте набор вариантов и генерируйте их одинаково каждый раз. Инструмент вроде GENERATED может автоматизировать создание повторяемых вариантов (включая изменение размера и полировку) и помогать отслеживать, какие визуалы работают хуже, чтобы знать, где проводить тесты дальше.
Создайте небольшой набор продуманных вариантов. Практический набор по умолчанию: широкое превью для Open Graph, вариант 16:9, квадратная миниатюра, более высокий обрез 4:5 для мобильных лент и одно встроенное изображение, соответствующее ширине колонки контента.
Начните с наименьшего реального места показа (часто это миниатюра SERP или небольшой превью в ленте) и убедитесь, что объект там узнаваем сразу. Затем создайте широкую Open Graph-версию и держите ключевые элементы внутри безопасной зоны в центре, чтобы непредсказуемая обрезка платформ не урезала их.
Используйте большой, нетронутый мастер-растр, чтобы каждый вариант был уменьшением, а не увеличением. Надёжная отправная точка — минимум 2000 px по короткой стороне, чтобы можно было обрезать разные соотношения без потери резкости.
Open Graph-превью обычно предпочитают широкую прямоугольную форму, и платформы могут обрезать изображение под свою фиксированную пропорцию. Проектируйте чистую центральную область, держите важные элементы подальше от краёв и не полагайтесь на мелкие детали, которые не переживут компрессию.
Предположите, что части изображения у краёв могут быть закрыты UI или обрезаны по-разному на разных устройствах. Держите лица, логотипы и текст подальше от углов и протестируйте карточку в маленьком размере, чтобы обнаружить проблемы, которые не видны в полноразмерном виде.
Миниатюра должна быть про узнаваемость, а не про детали. Обрежьте плотнее, увеличьте главный объект, упростите фон и избегайте длинного текста; если слова нужны, ограничьтесь несколькими жирными словами с высоким контрастом.
Да. Особенно если вы используете текст в изображении. Версия без текста безопаснее для миниатюр и непредсказуемых обрезок, а текстовая версия подойдёт для больших социальных карточек, где она остаётся читаемой.
Обрезайте, когда вокруг объекта достаточно пространства и вы не теряете смысл; добавляйте паддинг, когда ничего нельзя отрезать (например, логотип или плотный товарный кадр); пересоставляйте кадр, когда в изображении несколько элементов или текст, которые должны оставаться читаемыми на разных размерах.
JPEG обычно лучше для фотографий и градиентов — он держит размер файла небольшим. PNG подходит для графики с текстом, логотипов и плоских цветов, где важны чёткие края, но размер файла растёт. WebP и AVIF часто дают лучшее качество при меньшем размере, но стоит оставить совместимый запасной вариант для мест без поддержки.
Проверьте изображение в реальных размерах на телефоне и десктопе, а также внутри вашего макета статьи. Если объект не читается как миниатюра, ключевые элементы слишком близко к краям или компрессия даёт блоковые артефакты — сначала исправьте кадр, затем подберите компрессию.