Идеально обрежьте фото для ленты Twitter (X). Горизонтальная компоновка предотвратит случайную обрезку лиц.
Twitter не единообразен в требованиях. Вот точные параметры, которые стоит держать под рукой:
Одиночное изображение в твите — оптимально 1200×675 px (соотношение 16:9). Twitter принимает картинки до 4096×4096 px, но при отображении в ленте превью показывается в пропорциях 16:9. Если загрузить квадратное фото 1:1, оно отобразится полноценно, но займёт больше места в ленте и будет сжато сильнее.
Галерея из двух изображений — каждое обрезается до 7:8 (примерно 700×800 px). Три фото: верхнее 7:8, нижние два — 4:7. Четыре фото — все в формате 2:2 (по сути, квадратные превью).
Баннер профиля (header) — 1500×500 px. Это один из самых требовательных элементов: на разных устройствах баннер отображается по-разному. На десктопе видна полная ширина, на смартфоне — обрезанная центральная часть.
Карточка ссылки (summary card with large image) — Twitter генерирует превью при расшаривании ссылок. Рекомендуемый размер для Open Graph-изображения: 1200×628 px. Если изображение на странице меньше 300×157 px, карточка не сформируется вообще.
Миниатюра статьи (summary card) — квадратное превью 144×144 px, обрезается из центра исходного изображения.
Когда вы загружаете изображение, Twitter выполняет несколько последовательных операций, каждая из которых может повлиять на итоговый результат.
Сжатие. Twitter пережимает все изображения. Даже если вы загрузите PNG без потерь весом 2 МБ, на сервере он будет конвертирован в JPEG с параметрами, оптимизированными для быстрой загрузки. Точное значение качества не публикуется, но по наблюдениям оно находится в районе 75-85%. Это значит, что мелкие детали и тонкие градиенты могут пострадать.
Масштабирование. Изображения больше 4096×4096 px уменьшаются. При этом Twitter использует алгоритм билинейной интерполяции, а не ланцошову — результат выглядит размытее, чем при ресайзе на десктопном редакторе.
Кадрирование. Это самый непредсказуемый этап. Алгоритм анализирует содержимое изображения и пытается сохранить «значимую» область. Но его представление о значимости не всегда совпадает с вашим. Лицо человека он обычно распознаёт правильно, а вот текст, логотипы и архитектурные элементы — не всегда.
Зная это, становится понятно, почему предварительная подготовка изображения критически важна: вы контролируете результат, а не алгоритм соцсети.
Загрузка фото с камеры «как есть». Современные смартфоны снимают в разрешении 4000×3000 px и выше. Загрузка такого файла не даёт преимущества в качестве — Twitter всё равно сожмёт и уменьшит. Зато время загрузки твита увеличится, а мобильный трафик потратится впустую.
Игнорирование пропорций. Загрузка вертикального портрета 9:16 в ожидании, что Twitter покажет его целиком — классическая ошибка. Соцсеть обрежет верх и низ до 16:9, и вы потеряете значительную часть кадра. Если вертикальный формат принципиален, лучше использовать галерею из нескольких фото.
Текст на краях изображения. Если на картинке есть надписи или важные элементы у самого края — при автоматическом кадрировании они могут попасть в зону обрезки. Безопасный отступ от краёв — минимум 60 px сверху и снизу, 40 px по бокам.
Использование устаревших размеров. Twitter периодически обновляет алгоритмы отображения. Рекомендации 2022 года уже неактуальны для некоторых сценариев. Ориентируйтесь на свежие спецификации, а не на старые гайды из блогов.
Баннер профиля — самый сложный элемент с точки зрения подготовки. Указанные 1500×500 px — это холст, но видимая область значительно меньше.
На десктопе баннер отображается в полном размере, но профильная аватарка перекрывает нижнюю левую часть. Текст или ключевые элементы в этом углу будут скрыты круглой маской аватара.
На смартфоне видимая зона баннера обрезается до примерно 640×360 px по центру. Это значит, что всё, что находится по бокам и в нижней части, пользователь скорее всего не увидит.
На iPad и планшетах пропорции снова другие — видимая область шире, но не на всю длину.
Практический вывод: размещайте ключевой визуальный элемент — логотип, слоган, главный объект — в центральной зоне примерно 600×300 px. Боковые 450 px слева и справа — это «буфер», который может быть виден, а может нет. Нижние 100 px тоже ненадёжны из-за аватарки.
Сохраняйте баннер в формате PNG, даже если это фотография — при растяжении на широкий десктоп JPEG-артефакты становятся заметнее. Файл размером до 2 МБ загрузится без проблем.
Twitter позволяет загружать до четырёх изображений в одном твите. Но каждое из них кадрируется по-разному в зависимости от их количества.
Два фото — каждое отображается в пропорции 7:8, то есть почти квадратное, но слегка вытянутое по вертикали. Если ваше фото горизонтальное, Twitter отрежет боковые стороны.
Три фото — первое занимает левую половину в формате 7:8, второе и третье делят правую половину вертикально (каждое в формате 4:7, заметно вертикальные).
Четыре фото — все четыре в сетке 2×2, каждое в формате 1:1 (квадрат).
Это значит, что заранее подготовить галерею единым стилем можно, только если вы знаете точное количество фотографий. Для максимального контроля:
— обрежьте каждое фото до нужных пропорций до загрузки;
— убедитесь, что главный объект находится в центре каждого кадра;
— проверьте, что цветовая палитра последовательна — Twitter не применяет фильтры, но сжатие может сдвинуть оттенки.
Когда вы расшариваете ссылку на статью или страницу, Twitter считывает метатеги og:image и twitter:image из HTML. Если мета-тег отсутствует или изображение слишком маленькое — карточка не отобразится, и ссылка будет выглядеть как обычный текст.
Summary Card with Large Image — самый распространённый тип. Требуемый размер: минимум 300×157 px, рекомендуемый — 1200×628 px. Соотношение сторон 1.91:1. Если изображение больше, Twitter уменьшит его; если меньше минимума — карточка не сформируется.
Summary Card — квадратная миниатюра 144×144 px, обрезается из центра исходного изображения. Используется реже, в основном для старых интеграций.
Player Card — для видео и мультимедиа, минимум 262×262 px, рекомендуемый размер 1200×628 px.
Проверить, как Twitter видит вашу страницу, можно через Twitter Card Validator. Если карточка не отображается — проблема в метатегах или размере изображения. Подготовить картинку нужного размера можно заранее, используя инструмент изменения размера, задав точные пиксели для Open Graph.
Twitter технически принимает JPEG, PNG, GIF и WebP. Но поведение при загрузке различается:
JPEG — самый распространённый формат для фотографий. Twitter дополнительно сжимает его, поэтому загружать файл с качеством 100% бессмысленно — разница с 85% будет незаметна, а вес отличается в 2-3 раза. Оптимальный диапазон: 80-85%.
PNG — идеален для скриншотов, инфографики, логотипов и изображений с резкими границами. Текст на PNG остаётся читаемым даже после Twitter-сжатия, в отличие от JPEG, где появляются характерные артефакты вокруг букв.
WebP — Twitter принимает, но обрабатывает его так же, как JPEG. Преимущество в размере файла (WebP на 25-30% легче при том же качестве) нивелируется тем, что Twitter пережимает изображение повторно.
GIF — поддерживается, но анимированные GIF конвертируются в видео (mp4) для оптимизации. Статические GIF обрабатываются как PNG.
Для большинства случаев JPEG с качеством 85% — оптимальный выбор. Если на изображении есть текст или тонкие линии — PNG. Вес готового файла старайтесь удерживать в пределах 1 МБ — это обеспечит быструю загрузку даже на медленном мобильном соединении.
Не каждое фото можно просто уменьшить — иногда нужна более глубокая обработка.
Вариант 1: Обрезка (crop). Выберите значимую часть изображения и отсеките остальное. Это работает, когда в кадре есть лишнее пространство — небо, фон, пустые зоны. Обрезка сохраняет все пропорции и детали нужной области.
Вариант 2: Добавление полей (padding). Если обрезать нечего — добавьте белые, чёрные или цветные поля по бокам, чтобы привести изображение к нужному соотношению. Для Twitter это менее эстетично, чем обрезка, но сохраняет весь контент.
Вариант 3: Изменение пропорций (stretch). Технически возможно, но визуально — катастрофа. Люди, предметы и текст будут сплющены или вытянуты. Допустимо только для абстрактных текстур и фонов.
Вариант 4: Генеративное расширение (outpainting). Нейросети могут дорисовать края изображения. Результат непредсказуем, но для фона — иногда лучший вариант.
Для Twitter наиболее практичны обрезка и добавление полей. Инструмент resize image for Twitter на Pixes.app позволяет в одном рабочем процессе задать целевой размер, выполнить кадрирование и скачать готовый файл — без Photoshop и регистрации.