21 августа 2017

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

Создавайте профессиональные электронные письма

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

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

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

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

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

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

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

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

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

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

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

Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
0 комментариев
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.