Одна обложка 1200x630: почему PNG еще не конец

Значимый прорыв формирует отрасль ИИ: pavelzotikov только что Одна обложка 1200x630: почему PNG еще не конец Простой 7 мин 0 Веб-разработка * WordPress * Обзор Из песочницы Я начал эту заметку как обычное сравнение сервисов для генерации картинок. Хотел взять одну обложку, повторить ее в разных местах и посмотреть, где удобнее. Без большого исследования рынка, без таблицы на двадцать пунктов.

Просто один понятный макет: темный фон, Хабр сверху, две строки заголовка на голубой подложке, Практика снизу. Размер обычный для соцсетей: 1200x630. Референсная обложка для проверки сервисовРеференс: повторяю общую композицию, не официальный шаблон.

Технические детали

План был простой: сделал картинку, поменял заголовок, получил новую картинку. Потом я понял, что это плохой план. Потому что нормальный финиш для такой картинки — не PNG в загрузках браузера.

Финиш — это запись в WordPress, у которой в коде страницы стоит правильный og:image. Чтобы Telegram, VK и остальные площадки взяли именно эту обложку, а не первую попавшуюся картинку из записи. С этого места сравнение стало менее веселым, зато более честным.

Что я вообще пытался повторитьМне нужна была картинка:1200x630;Хабр сверху;две строки заголовка: Сервисы для OG-картинок:генерируем одну обложку везде;Практика снизу;русский текст без сюрпризов. На первый взгляд задача глупая. Почти любой редактор умеет поставить текст на фон.

Отраслевые последствия

Но в этой обложке есть мелочь, из-за которой все становится интереснее: голубая подложка под заголовком. Она должна идти за текстом. Заголовок стал длиннее — подложка стала длиннее.

Заголовок стал короче — подложка тоже стала короче. Если после каждой новой статьи надо руками тянуть прямоугольник под строкой, повторяемости тут нет. Это просто ручная верстка с красивой вывеской.

Первый заход: собрать картинку прямо в адресеCloudinary я взял первым, потому что там давно умеют делать картинки из параметров в ссылке. Сначала все идет приятно. Берешь базовую картинку, накладываешь текст, задаешь шрифт, цвет, координаты.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.