Как регулируется размер картинок в вебпушах

Автоматическое масштабирование картинки (resize)Автоматическое масштабирование картинки (resize)

Зачем это?Зачем это?

У картинок в вебпушах есть рекомендуемые пропорции в браузере. При этом трудно уследить за тем, чтобы у всех подставляемых изображений был подходящий формат.
Как следствие - подставленное изображение не масштабируется, в пуш попадает часть картинки - может даже быть непонятно, что на ней изображено.

Для борьбы с этими трудностями, мы создали ресайз картинок в вебпушах.

Как это работает?Как это работает?

Мы определяем браузер клиента и, в зависимости от него, делаем нужные пропорции картинки. Например, для Chrome это будет 2:1, для Chrome на мобильных телефонах Android - 3:1.
Если определить браузер не получается, ставится стандартное соотношение 2:1.

Не происходит обрезки или растягивания изображения. При необходимости к картинке добавляются поля, чтобы привести её конечный вид к нужным пропорциям. Если картинка с поддержкой прозрачности, поля будут прозрачными, если без - поля будут белого цвета.

Где это работает?Где это работает?

Работает для всех картинок у получателей с браузером Chrome, Yandex и Edge.
В остальных браузерах может быть незначительное искажение.

Как включить?Как включить?

От вас не требуется прописывать никакие функции или менять настройки - ресайз происходит автоматически.

Ручная обрезка картинок (crop)Ручная обрезка картинок (crop)

Зачем это?Зачем это?

Иногда мы хотим, чтобы в рассылку попала не вся картинка, а только нужная часть - обрезать изображение можно тут же в рассылке. Функционал доступен и для иконки.

Где это работает?Где это работает?

Во всех вебпуш рассылках.

Как сочетается с автоматическим ресайзом?Как сочетается с автоматическим ресайзом?

Обрезка картинки не отключает ресайз, он всё так же работает, если браузер клиента поддерживает функционал.

Как сделать?Как сделать?

1. В разделе "добавить картинку"/"добавить иконку" загружаем изображение с компьютера:

2. Оно появляется в предпросмотре пуша, также становится активной кнопка "обрезать" - нажимаем на неё:

3. Открывается редактор:

Изначальная выделенная область имеет соотношение 2:1
Доступны кнопки:

• сдвиг картинки по редактору (1)
• выбор области с произвольным соотношением (2)
• "стандартный размер": 2:1 для картинки пуша и 1:1 для иконки

Также картинку можно увеличить или уменьшить с помощью колеса прокрутки мыши и сведением/разведением пальцев на сенсорном экране.
После внесения изменений нажимаем на "применить".

4. В рассылку вставляется обрезанная картинка:

Где ещё есть кроп?Где ещё есть кроп?

Функционал доступен и в мобильных пушах. Стандартный размер в таком случае - 3:1.