Денис Инешин

Например вот так: matthew.wagerfield.com/parallax

В данном вопросе поможет здравый смысл и тестирование.

Допустим у нас есть абстрактное фоновое изображение как часть UI. В большинстве случаев для подобных изображений достаточно будет иметь коэффициент 1х - 1.5х.

Если изображение более детальное - ставим для начала коэффициент 2х и смотрим как это выглядит на живом смартфоне. Обычно коэффициента 2х более чем достаточно для детальных изображений или фотографий.

Коэффициента больше чем 2х могут потребовать разве что схемы с тонкими линиями.

Воспользуйтесь range slider. Вот например демо:
jsfiddle.net/IonDen/wsk7y08a - оттолкнитесь отсюда, добавьте свой дизайн.

Много способов:
1. Разместить на своем сервере. В письме, в img указать абсолютный адрес
2. Приложить к письму. В img указать относительный адрес
3. Кодировать в Base64.

Начните отсюда:

paperjs.org
https://greensock.com/tweenmax

Ну а если анимация очень простая то вообще на CSS:
https://daneden.github.io/animate.css/

И начните изучение:
https://habrahabr.ru/post/135816/
https://habrahabr.ru/company/odnoklassniki/blog/158917/
https://habrahabr.ru/company/nordavind/blog/209462/

Не просто можно, а нужно.

<div class="header">
    <div class="header__top">
        <div class="logo"></div>
    </div>
    ...
</div>

Ion.RangeSlider
Позицию блоков с цифрами легко настроить через CSS, так чтобы они были поверх полоски.

Пример: jsfiddle.net/IonDen/tLzou080

Еще пример, тут блоки не выходят за границу ползунка: jsfiddle.net/IonDen/c8n8oynd