How-to
~ 4 мин читать
22499 просмотры
оценить
21 августа 2017

Редактирование картинок для писем

Stripo / Blog / Редактирование картинок для писем

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

  1. иногда надо загрузить сразу несколько картинок;
  2. есть картинки которые загружаются в репозиторий и уже через месяц 100+ картинок приводят к бардаку, при том что большинство картинок используются один раз;
  3. если в картинке надо сделать простое редактирование (например, обрезать края) надо сохранить картинку, открыть в редакторе, отредактировать, сохранить, загрузить, заменить;
  4. по хорошему все картинки должны содержать альтернативный текст, title и ссылку, а часто ссылка указывается в отдельном контроле;
  5. иногда надо фиксировать только высоту или только ширину, чтобы картинка меняла свои размеры для поддержания адаптивности.

Случается так, что процентные показатели это все базовые потребности при работе с картинками. Мы их решаем так:

Разделяем репозиторий (Место хранения картинки) на 4 уровня:

  • картинки письма (используются один раз в этом письме и больше не нужны);
  • картинки проекта (принадлежат к проекту и дублируются от письма к письму, например: логотип компании, корпоративный бэкграунд, …);
  • общие системные картинки (те, которые обычно используют все: иконки социальных сетей, какие-то лейблы);
  • внешний репозиторий картинок. Тут мы интегрировались со стоками и можно задавать прямо в редакторе поисковой запрос, например: halloween или father’s day и использовать бесплатные стоковые картинки. Позже мы подключим возможность искать в разных стоках, в том числе и используя платные.

Мы добавили загрузку картинок в пакетном режиме или по URL, возможности растянуть по ширине, зафиксировать только одну сторону: высоту или ширину. Это нужно, когда пользователь хочет зафиксировать только один параметр, а браузер\почтовик уже вычислит второй параметр пропорционально первому. Добавили возможность скрыть картинку для мобильного устройства. НО! работать с картинками и шаблонами все равно оказалось крайне сложно.

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

Во-первых, хочется добавлять на картинку свои картинки, например, лейбл о скидке. А шапки и усики в реальной жизни практически не нужны. Оказалось, что загружать свои картинки в коллекцию «усиков» нельзя ? Связались с разработчиками — нельзя. Но даже если было бы можно — внеся изменения они сохраняются в картинку, и потом уже текст не изменишь, фон не поменяешь.

Очень хотелось бы иметь возможность писать текст на картинке, изменять ее, получать в результате новую картинку, но всегда иметь возможность изменить «исходники» с текстом и доп. картинками. Добавить несколько слоёв. Все, что надо для этого, мы нашли в классном проекте — pablo.buffer и добавляем к себе. Думаем, что через пару недель это произведет прорыв в работе с изображениями в письме без дополнительных ресурсов.

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

Если еще не пробовали как работает наш редактор — подключайтесь сейчас, так как у нас есть бесплатные тарифы.

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Earth Day Email Examples_Cover Image
9 дней назад · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
Stripo_Building AMP Emails with Stripo_Featured Image
11 мартa · 21 мин читать
Как создать AMP-письма с помощью Stripo

Динамические обновления, контент в режиме реального времени, гиперперсонализация, геймификация нового уровня, отзывы в открытых формах, бронирование встреч... — с появлением технологии AMP4Email пользователи могут делать все это и многое другое непосредственно в своих входящих. Стоит ли говорить, что такие письма оживляют ваши рассылки, выглядят свежо и инновационно, и, как следствие, способны повысить конверсию ни много ни мало в пять раз? Но как создавать такие рассылки? В гайдлайнах Gmail по созданию AMP-писем говорится, что вам нужно добавить некоторые элементы кода и...

Дизайн Шаблоны How-to AMP
Будьте всегда в курсе последних новостей в области email-маркетинга!