Электронные письма являются удобным средством для общения. Их популярность не спадает и во многом благодаря всевозможным способам написания текста. Например, вы можете добавить в письмо одну или несколько анимационных картинок, чтобы сделать его более красочным и уникальным.
Инструкция
Выберите подходящую анимационную картинку в интернете или создайте ее самостоятельно. Популярным и простым форматом анимационных изображений является GIF. Файлы данного формата не занимают много места и поддерживаются большинством почтовых сервисов и программ. Скачайте понравившийся GIF-файл на компьютер с подходящего сайта, например, Mirgif. Если у вас имеются навыки работы с изображениями, воспользуйтесь одним из специальных сервисов для создания анимационных изображений, к примеру, Gifmaker, который позволяет быстро создать открытку прямо на сайте и сразу скачать на компьютер либо отправить другу.
Зайдите на ваш электронный почтовый ящик под логином и паролем и выберите создание нового сообщения. Прикрепите анимационную картинку в формате GIF, кликнув по соответствующей ссылке на панели инструментов. Если вы хотите добавить изображение с другого сайта, скопируйте соответствующую ссылку или код в текст письма, предварительно перейдя в режим редактирования HTML. Чтобы проверить, как будет выглядеть изображение в письме, попробуйте сначала отправить его самому себе.
Помните, что некоторые почтовые программы и сервисы не поддерживают отправку анимационных изображений. В этом случае получатель сможет увидеть в письме лишь ссылку на картинку, которую он может открыть в отдельной странице браузера. Если вы прикрепляли открытку отдельным файлом, при получении ее нужно будет скачать на компьютер. Лучше не применять данный способ добавления анимации в том случае, если получатель обычно использует для чтения писем мобильный телефон.
Обратите внимание
Некоторые сервисы, например, Google Mail поддерживают отправку анимационных картинок и в других форматах, к примеру, SWF, который позволяет использовать более качественные изображения и добавлять в них по желанию звуковые эффекты.
Здравствуйте. Любой пользователь в интернете наверняка хоть раз в жизни отправлял или получал письма электронной почтой. Мы можем вести личную или деловую переписку, получать сообщения от интересных интернет-ресурсов, на которые оформили подписку, уведомление различного характера и многое другое. Одним словом, переписка путем электронных сообщений играет одну из важных ролей в жизни пользователя интернета.
И бывают такие случаи, когда нам нужно в текст письма вставить картинку, будь то поздравительная открытка или просто фото (картинка). Не прикреплять к письму фото как файлы, а именно вставить в текст письма, чтобы как-то украсить внешний вид письма. Этим мы сегодня и займемся.
Мы рассмотрим этот процесс на популярных почтовых сервисах, а также в почтовых клиентах: The Bat и Mozilla Thunderbird. По последнему вы найдете несколько статей на нашем сайте в категории Полезный софт -> Для компьютера .
Как вставить картинку в тело письма на yandex.ru
Предлагаю вам начать с сервиса Яндекс. Заходим в свой почтовый ящик. Как его создать, . Нажимаем кнопку Написать
Далее откроется окно для написания нового письма. Заполняем стандартные поля: кому, тема. Пишем любой текст, какой вам нужно. И в середину письма хотим вставить картинку. Как это сделать? Если мы просто перенесем картинку в тело письма, то она загрузится как прикреплённый файл
А нам нужно, чтобы картинка встала в текст. Для этого перейдем в режим оформления. Для перехода в этот режим нажмите справа от поля текста письма «Оформить письмо »
Теперь в окне письма появилась панель для форматирования текста: выделения жирным, курсивом, расположение по левому, правому краю, по середине. Можно задать цвет текста, цвет фона и т.д. Очень похожа на стандартную панель Word
Попробуем теперь поставить нашу картинку в текст письма. Ставим сначала курсор в то место, куда будем ставить изображение, затем открываем папку с фотографией и просто перетаскиваем в око письма, в место, где стоит курсор. И как видим, картинка успешно установилась.
Теперь выделяем наше изображение, щелкнув по ней мышкой. Вокруг картинки появились маркеры, двигая за которые мы можем ее уменьшать или увеличивать в размере. Однако, помните, при увеличении размера картинки ухудшается ее качество.
Также мы можем выставить фотографию по середине письма, по левому краю, в таком случае, текст будет обтекать ее справа. Или мы сделаем выравнивание по правому краю, текст соответственно будет обтекать с левой стороны. Также мы можем поставить на изображение ссылку, нажав на соответствующую кнопку.
Таким образом, вы сможете добавить несколько картинок в письмо. И затем нажать на кнопочку «Отправить » для отправки письма получателю. Как видим, нет ничего сложного. Идем дальше.
Как вставить картинку в письмо на сервисе Почта от Google
Открываем свой почтовый ящик на google. Если у вас еще нет там почты, тогда вам . Нажимаем на кнопку «Написать », вводим текст, затем устанавливаем курсор в нужное место, открываем папку с фото и спокойно переносим ее в письмо.
Изображение встало туда, куда мы и хотели. Тут, как оказалось, намного проще вставить картинку, чем в Яндекс.
Здесь тоже есть возможность изменения размера картинки. Для этого выделяем ее и при помощи маркеров изменяем размеры.
Или же воспользоваться панелью, на которой можно указать нужный размер: маленький, оптимальный или исходный.
Для выравнивания картинки по середине, правому краю, откройте панель форматирования и выберите нужный вариант выравнивания.
К сожалению, почему-то здесь картинка не обтекается текстом при выравнивании по левому или правому краю. После этого можно отправлять письмо адресату. Идем дальше.
Как вставить картинку в письмо на mail.ru
Зайдя в почтовый ящик от mail.ru, нажимаем Написать письмо.
Во время добавления изображений в письмо на этом сервисе обнаружилась такая интересная картина. Если добавляем, используя при этом браузер Mozilla Firefox, то все нормально. Картинка встает в нужное место.
А вот при использовании браузера Google Chrome и Яндекс Браузер, картинка загружается автоматически на ваш компьютер и открывается в новой вкладке браузера. Как быть?
1 способ - зайти в браузер Firefox и оттуда добавить в письмо картинки.
2 способ - прикрепить эти картинки к письму как файлы, тогда получатель увидит сам текст, а под ним и картинки.
3 способ - написать письмо с картинками в редакторе Word, сохранить в файл, а затем прикрепить файл к письму.
4 способ - чуть сложней. Заходим в Мой мир, раздел Фотографии, загружаем в любой альбом нужную фотографию, открываем ее, щелкаем правой кнопкой по ней и из контекстного меню выбираем Копировать изображение
После этого заходим в свою почту, создаем новое письмо и в нужное место вставляем наше изображение, используя контекстное меню или сочетание клавиш Ctrl + V
Все, наше изображение успешно встало в письмо. Только помните , если вы удалите картинку из Моего Мира, она исчезнет и из вашего письма.
Мы с вами рассмотрели, как вставить изображение в письмо в популярных почтовых сервисах. Сейчас посмотрим, как вставить картинки в письма, используя почтовые клиенты The Bat и Mozilla Thunderbird.
Вставка картинок в письмо клиента The Bat
Кто использует данный почтовый клиент для получения и отправки писем, наверное, заметили, что вставка картинок в письмо тоже невозможно - картинки сохраняются как прикрепленные файлы. Нам это не совсем подходит. Для того, что изображение вставлялись в письмо, нужно лишь изменить формат письма. Для этого, в нижней части окна создания нового письма меняем формат письма на HTML/Простой текст
После этого картинки будут свободно вставляться в письмо.
Также можно изменять размеры фотографии, менять ее расположение с помощью панели форматирования. После создания письма можно отправлять получателю.
Вставка изображений в почтовом клиенте Mozilla Thunderbird
В этом вставка картинок проста и легка. Создаем и перетаскиваем в наш текст письма нужное изображение
Вот и все, пожалуй, на сегодня. Будем заканчивать. Надеюсь, что у вас все получится. Удачи и до новых встреч!
За признание — прощение, за утайку — нет помилования. Лучше грех явный, нежели тайный.
Петр Первый
Время чтения: 5 минут
GIF (Graphic Interchange Format) – широко распространенный формат, который хорошо отображается почти везде. Что ещё более важно – GIF может быть анимирован и быстрая смена нескольких кадров создаст иллюзию движения.
На заре интернета это был самый популярный способ, чтобы добавить интерактивности на сайт. Со временем его вытеснила flash- и css-анимации, но в сфере email-дизайна gif всё так же популярен, т.к никакие другие виды анимации не дают 100% гарантии отображения на всех клиентах (на самом деле gif тоже не дает такой гарантии, но практика показывает – на большинстве клиентов всё отображается корректно).
Особенности gif
У формата есть несколько особенностей, кроме поддержки анимации. Для простоты разобьем их на плюсы и минусы.
Минусы:
- поддерживает только 256 цветов. Сочные и красивые фотографии потеряют часть своей яркости, если преобразовать их в формат gif.
- итоговый вес анимации может быть большим. Например, если много кадров или файл большой по размеру. Для email-писем это критично, поэтому чаще всего приходится жертвовать качеством ради доставляемости.
Плюсы:
- поддерживает прозрачный слой.
- идеален для изображений с небольшим количеством цветов.
Как и где использовать анимацию
Наше внимание похоже на луч прожектора – мы четко видим то, что нас заинтересовало, а остальное видим как бы размыто. Анимированное изображение по своей сути привлекает очень много внимания, т.к глаз реагирует на движение и взгляд сразу переходит туда.
Смотрите как в магазине befree выделили блок со скидкой. Несмотря на то что там есть заголовок (который больше и ярче анимированного блока), всё равно анимация захватывает внимание на дольше:
Кроме функции акцентирования внимания гифки можно использовать и в других целях:
Как сделать гифку
Есть разные степени сложности гифок. Самый топ – анимирование через Adobe After Effects или Adobe Animate. Но для создания качественной гифки нужно практиковаться не один год. Попроще будет работать с Adobe Photoshop – программа может преобразовать видео в покадровую последовательность и есть возможность редактировать кадры по вашему желанию. Пример создания подобной анимации можно найти .
Ещё один вид анимации – синемаграфия (когда один элемент на картинке двигается, а остальные как бы застыли). И как пример – одна из рассылок Амедиатеки:
Выглядит круто, скажите? Синемаграфия всегда выглядит интересно и необычно, но опять нужен фотошоп и знание его инструментов. Урок по созданию можно посмотреть .
Ну и самый простой способ, который не требует определенных навыков – использование онлайн-сервисов. Например, gifmaker.me или gifius.ru . Загружаете туда последовательность кадров (фотографий), выставляете необходимую скорость и размеры и на выходе получаете анимацию.
Какие проблемы могут возникнуть
Есть почтовые клиенты, которые не поддерживают анимацию: Outlook 2007, 2010 и 2013. Вместо этого они покажут первый кадр. Поэтому следите, чтобы первый кадр у вашей гифки был информативен. Смотрите в статистике кампаний с каких почтовых клиентов читают ваши рассылки – так вы лучше поймете свою аудиторию и сделаете письма более адаптивными.
Если вы используете слишком много анимаций, то подписчики просто перестанут обращать на них внимание либо же вообще потеряют доверие к вам, т.к письмо будет напоминать базар, где из каждого угла пытаются что-то продать и получить хоть немного внимания.
Всегда следите за весом гифки. Если он слишком большой, то велика вероятность, что подписчик её не увидит. Даже если спам-фильтр пропустит её, то почтовый клиент может просто вырезать её из письма. На этот случай выставляйте alt-текст и ссылку на веб-версию.
Пример рассылки, который недавно пришел мне на почту. То, как выглядит это в почтовом клиенте и то, как на самом деле задумывалось письмо. Красивую гифку почтовый клиент просто вырезал, т.к она весила 5Мб (!):
в моем почтовом ящике:
по задумке создателей:
Стоит помнить, что если вы поставили гифку в качестве фона для блока, то она может не отобразиться из-за ограничений со стороны почтового клиента. Поэтому гифку можно поставить, но на всякий случай подстраховаться и также добавить цвет блоку, чтобы можно было прочитать текст.
Что в итоге?
- Используйте гиф-анимацию в письмах – они цепляют и удерживают внимание и помогают акцентировать на самом главном.
- Следите за размером изображений, учитывайте ограничения почтовых клиентов.
- Используйте с умом: не делайте из письма сплошное анимационное представление.
- Используйте alt-текст (текст, который отобразится вместо картинки) и ссылку на веб-версию письма.
Нажмите Вставить видео
Вставьте ссылку на видео и нажмите Enter
После, выберите «Сгенерировать GIF».
Вы можете конвертировать часть видео, для этого нажмите «Часть видео». Потом добавьте «Время начала» и «Длительность» - до 5 секунд.
Если вы хотите, чтобы подписчики посмотрели полное видео, нажмите «Добавить наложение кнопки на изображение», и они будут перенаправлены на страницу с видео.
Также, вы можете добавить в анимацию длительность.
Выберите нужную ширину изображения.
Другой способ конвериторовать видео в GIF - использовать выбранные кадры
Используйте выбранные кадры
Выберите нужные кадры и задайте интервал между ними. Вы также можете добавить наложение кнопки на изображение и длительность.
Выберите предпросмотр и создайте GIF-изображение
Нажмите «Предпросмотр», чтобы узнать, как будет выглядеть анимация. Потом нажмите «Создать GIF-изображение». Подождите несколько секунд и добавьте GIF в шаблон.
Ваша GIF-анимация готова!
Вы когда-нибудь получали письмо с GIF-анимацией? Вы были заинтригованы его содержанием?
GIF ещё не успел стать трендом в email маркетинге, но стабильно и уверено набирает обороты.
Почему анимация привлекает ваше внимание?
У вас могут появиться такие ассоциации: загадка, любознательность, трепетное предвкушение чего-то. И это обсуловлено целью использования GIF-изображений в email маркетинге.
Почему стоит использовать GIF в email маркетинге
Зачастую мы проверяем почту в то время, как занимаемся другими вещами, или когда есть свободная минута, например, по пути на работу или на протяжении перерыва. В таком бешеном темпе мы не склонны читать длинные тексты и наслаждаться очень информативными письмами. Первое, на что мы обращаем внимание, - это картинка. Да, это определенно картинка. А если ещё и хорошо подобранная картинка, то она сможет дать представление о замысле отправителя креативным и захватывающим способом.
Конечно же, существует больше причин, почему стоит использовать GIF-анимацию в email рассылках, но перечисленные выше - самые основные.
Вы уже знаете, почему GIF так привлекательны, давайте посмотрим на хорошие примеры их использования.
Как использовать GIF в разных сферах деятельности
В разных сферах деятельности GIF можно применить по-разному, но есть и нечто общее.
День рождения клиента
Wanderlust + Co отправляли эту анимацию в письме подписчикам, у которых был день рождения. Она яркая и красивая, к тому же, есть заметный призыв к действию, значит, у них есть специальное предложение для именинников.
Специальные предложения
Это письмо от Rozetka. Они сообщают клиентам о скидках, упоминая известный мультсериал «The Simpsons».
Новые коллекции
Fred Perry отправили это письмо с GIF своим подписчикам, чтобы проинформировать о появлении новых вещей. Им удалось хорошо «вживую» продемонстрировать свой товар.
Обучение
Teavana используют анимацию, чтобы продемострировать, как работает их товар, предлагают скидку и есть 2 заметных призыва к действию. Подобное можно применить и к программному обеспечению, гаджетам, инструкциям по использованию различных онлайн-ресурсов.
Событие
GIF - чудесный способ пригласить подписчиков на вечеринку, концерт, фестиваль. Вы можете передать атмосферу веселья с помощью анимации, как в примере ниже.
Подарок
Хотите заинтриговать, удивить и порадовать подписчиков? Такая подарочная коробка лучше любого призыва к действию.
Как правильно использовать GIF-изображения в рассылках
- Не используйте анимацию в каждой рассылке, иначе она станет для ваших подписчиков всего лишь обыденностью. Используйте её раз в месяц для разнообразия, например.
- Не используйте много GIF-изображений в одном письме, иначе они будут не только отвлекать внимание клиентов от вашего посыла, но и значительно повлияют на общий размер письма. Если он слишком большой, почтовый клиент подписчика не будет поддерживать его.
- Сделайте первый кадр самым информативным и интересным. Если почтовый клиент вашего подписчика не поддерживает GIF-анимацию, то отобразится только первый слайд.
- Избегайте ярких мигающих кадров и не делайте интервал между ними слишком коротким, иначе это вызовет раздражение и снизится информативность анимации.
Теперь вы знаете, как правильно использовать GIF, а чего стоит избегать. Будьте креативны и попробуйте применить анимацию прямо сейчас!
