Сделайте изображение, которое видят при отправке вашей ссылки

Сделайте изображение 1200 x 630, которое показывается, когда кто-то делится вашей страницей.

Отправленная ссылка рисуется как карточка, и изображение занимает большую её часть. Платформы хотят это изображение примерно в 1200 x 630, обрезают его от центра и сильно уменьшают, прежде чем его кто-то увидит, поэтому скриншот или логотип на белом квадрате редко переживает такой путь. Этот инструмент рисует изображение нужного размера. Введите заголовок, выберите цвет фона, градиент или собственное фото, добавьте логотип, если он есть, а направляющие обрезки покажут, что останется видимым на телефоне. Сохраните в PNG или в JPEG, достаточно лёгком для платформ, которые отказываются от больших файлов. Всё происходит в вашем браузере, и ни одно изображение никуда не отправляется.

Шрифт
Выравнивание
Цвет текста
Фон
Цвета
Фотография
Перетащите фотографию сюда
Она читается в вашем браузере и никуда не отправляется.
Перетащите фотографию, чтобы выбрать, какая часть останется в кадре.
Логотип необязательно
Перетащите логотип сюда
Угол логотипа
Здесь ничего не сохраняется и не загружается. Изображение рисует и сохраняет ваш собственный браузер, поэтому при закрытии страницы оно пропадает.
1200 × 630 · PNG ·
WhatsApp хочет файл меньше 600KB, иначе показывает маленькое превью. Остальные платформы допускают гораздо больше, так что берите PNG, если в изображении нет фотографии.

Почему скриншот не подходит

У скриншота неподходящая форма и полно деталей, которые исчезают. Карточка отображается маленькой, на телефоне часто шириной в пару сотен пикселей, и платформа обрезает от центра, чтобы получить 1.91:1. Текст интерфейса, тонкие линии и всё, что у края, к этому моменту уже пропало. В таком размере выживает короткая строка крупным шрифтом и одна сильная форма, и именно поэтому изображения для ссылок выглядят так, как выглядят.

Обрезка берёт середину

Платформы используют разные пропорции, поэтому они режут изображение под себя. Рез идёт от центра наружу, а значит под угрозой верх, низ и оба боковых края. Направляющие здесь отмечают область, которая переживает самую тесную из распространённых обрезок. Держите заголовок и логотип внутри неё, и изображение будет читаться везде, а не только там, где вы его проверили.

Размер файла это реальное ограничение

WhatsApp документирует потолок в 600KB, а X отклоняет всё тяжелее 5MB. Фон-фотография в размере 1200 x 630 легко превышает 600KB в формате PNG. Сохранение в JPEG с включённым ограничением снижает качество, пока файл не поместится, и в том размере, в котором показывается карточка, это почти всегда незаметно. Берите PNG, когда фон это сплошной цвет или градиент: они сжимаются до совсем небольшого объёма и остаются идеально чёткими.

Ничего не покидает ваш браузер

Холст рисуется на вашей собственной машине, и файл создаётся там же. Добавленная фотография читается с вашего диска и никуда не отправляется, а готовое изображение сохраняется прямо со страницы. Нет ни учётной записи, ни загрузки на сервер, ни копии вашей работы где-либо, а это значит и то, что после закрытия страницы здесь ничего не восстановить.

Что он делает

Один холст того размера, которого хочет любая платформа.

Нужный размер
  • 1200 x 630 при сохранении
  • Безопасная область отмечена
  • Так, как показывают платформы
Фон
  • Сплошной цвет или градиент
  • Ваше собственное фото
  • Затемнён, чтобы текст оставался читаемым
Текст
  • Заголовок и вторая строка
  • Пять шрифтов, размер и насыщенность
  • Слева, по центру или справа
Файл
  • PNG или JPEG
  • По запросу остаётся меньше 600KB
  • Никогда не загружается
Как пользоваться
1
Напишите заголовок
Держите его коротким. Карточку читают мельком, а длинные заголовки платформа обрезает ещё до того, как изображение начнёт что-то значить.
2
Выберите фон
Сплошной цвет или градиент надёжнее всего и даёт самый маленький файл. Поставьте вместо него фотографию, если она есть, и поднимайте затемнение, пока текст не станет читаться легко.
3
Проверьте направляющие
Отмеченная область это то, что переживает самую тесную обрезку. Всё за её пределами на некоторых платформах может быть срезано.
4
Сохраните и добавьте на страницу
Сохраните файл, загрузите его на свой сайт, затем укажите в og:image его адрес. Адрес должен открываться без входа в учётную запись.
Что означают эти слова
og:image
Мета-тег в head вашей страницы, который называет адрес изображения. Без него платформа возьмёт что-нибудь со страницы или не покажет изображения вовсе.
Безопасная область
Середина изображения, которая переживает обрезку на любой платформе. То, что за её пределами, под угрозой на платформах с более тесными пропорциями.
1.91:1
Отношение ширины к высоте при 1200 x 630 и форма, в которой большинство платформ рисует большую карточку.
Вопросы