Время чтения: 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-текст (текст, который отобразится вместо картинки) и ссылку на веб-версию письма.
Предположим, что получатели электронной почты, вероятно, будут просматривать электронную почту в браузере Интернета, вы можете вставить анимированный GIF-образ в электронном письме ради визуального описания или других. Здесь в этой статье будут представлены способы вставки анимированных изображений GIF в электронные письма Outlook и просмотра анимированных изображений GIF в полученных письмах в Outlook.
Быстрый поиск и удаление повторяющихся писем в Outlook
С помощью Kutools для Outlook Повторяющиеся письма
вы можете быстро найти и удалить их из нескольких почтовых папок или найти и удалить все дубликаты из выбранных с двумя щелчками мыши в Outlook.
Нажмите для бесплатной пробной версии 60-дня без ограничений!
Kutools for Outlook
: 100 + Новые расширенные инструменты
для Outlook.
Office Tab
: Включить редактирование вкладок и просмотр в офисе
, Just Like Chrome, Firefox, IE 8 / 9 / 10.
Классическое меню
: Принесите старые меню и панели инструментов назад
для Office 2007, 2010, 2013, 2016 и 2019.
Вставьте анимированный GIF-образ в исходящее письмо в Outlook
Фактически, вы можете вставить анимированный GIF-образ так же просто, как вставить любое обычное изображение в составное письмо в Outlook.
1 . В почта просмотреть, создать новое электронное письмо с нажатием Главная > Новая Электронная почта .
2
, В новом окне сообщения поместите курсор в тело сообщения, в которое будет вставлено анимированное изображение GIF, и нажмите Вставить
> Картинки
, Смотрите скриншот:
3
, В открывшемся диалоговом окне «Вставить рисунок» найдите и выберите анимированный GIF-образ, который вы вставляете, и нажмите Вставить
кнопка. Смотрите скриншот:
Внимание
: Вставленный анимированный GIF-образ будет статичным в составном электронном письме.
4 , Составьте электронное письмо и отправьте его.
Внимание : Когда получатели просматривают электронную почту в браузерах, изображение GIF анимируется; Если получатели просматривают электронную почту в Outlook, они могут просматривать анимированный GIF-образ с помощью нижеуказанных методов.
Просмотр анимированного GIF-изображения в полученном электронном письме в Outlook
Например, вы получаете электронное письмо с анимированным GIF-изображением в Outlook, вы можете просмотреть изображение GIF, как показано ниже:
1 . В почта просмотрите, откройте почтовую папку, содержащую письмо с анимированным изображением GIF, а затем дважды щелкните, чтобы открыть его.
2
, В открывшемся окне сообщения нажмите Сообщение
> Действия
> Просмотр в браузере
, Смотрите скриншот:
3
, В появившемся диалоговом окне Microsoft Outlook нажмите OK
Кнопка.
И теперь содержимое электронной почты отображается в вашем браузере, а изображение GIF - анимировано.
Просмотр анимированного изображения Gif в полученном электронном письме с помощью Kutools for Outlook
Если у вас установлен Kutools for Outlook, вы можете просмотреть электронное письмо с анимированным GIF-изображением Расширенный Печать функцию.
1 . В почта просмотрите, откройте почтовую папку, содержащую письмо с анимированным изображением GIF, а затем нажмите, чтобы выбрать письмо.
2
. Щелчок Kutools
> Расширенный Печать
.
И теперь вы можете увидеть, как изображение GIF анимируется в области «Просмотр».
Внимание : С Kutools для Outlook Расширенный Печать вы можете легко распечатать электронное письмо без заголовка сообщения, без имени пользователя вверху. BTW, эта функция будет распечатывать электронные письма, включая фоновые изображения. Нажмите, чтобы скачать Kutools for Outlook , 60-day free tiral без ограничений!
отображает не (3)
Microsoft считает, что изображения.gif являются активным контентом, и по соображениям безопасности Outlook не разрешает активному контенту работать в сообщениях.
Все версии Outlook после 2007 года
При составлении или чтении электронной почты нет поддержки анимированных gif-файлов. Если вы хотите увидеть анимацию, вам нужно будет открыть сообщение в браузере.
Для этого дважды щелкните сообщение, чтобы открыть его в своем окне. Затем выберите (Другие) Actions-> View в браузере. Это откроет сообщение в Internet Explorer.
Примечание. Несмотря на то, что gif-файл не будет отображаться при составлении, когда получатель получит ваше сообщение в почтовом клиенте, который поддерживает gif-анимацию, gif-анимация все равно будет работать.
Так что это говорит о том, что Outlook покажет первый кадр изображения.gif . Если вы добавите.gif используя электронную почту в Outlook, и отправьте электронное письмо на устройство, которое может отображать.gif , скажем, iPhone, там будет оживляться.gif .
В Outlook версии до 2007 года они имеют ограниченную поддержку. Это связано с тем, что в 2007 году Microsoft перешла от использования Internet Explorer (который может отображать.gif) для рендеринга электронной почты в Microsoft Word (который блокирует.gif).
Из-за этого изменения Outlook не поддерживает множество последних стандартов HTML5, включая анимацию HTML5. Таким образом, в настоящее время нет возможности для Outlook (по крайней мере, для рабочего стола) показывать любой тип анимации.
Здравствуйте. Любой пользователь в интернете наверняка хоть раз в жизни отправлял или получал письма электронной почтой. Мы можем вести личную или деловую переписку, получать сообщения от интересных интернет-ресурсов, на которые оформили подписку, уведомление различного характера и многое другое. Одним словом, переписка путем электронных сообщений играет одну из важных ролей в жизни пользователя интернета.
И бывают такие случаи, когда нам нужно в текст письма вставить картинку, будь то поздравительная открытка или просто фото (картинка). Не прикреплять к письму фото как файлы, а именно вставить в текст письма, чтобы как-то украсить внешний вид письма. Этим мы сегодня и займемся.
Мы рассмотрим этот процесс на популярных почтовых сервисах, а также в почтовых клиентах: 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
В этом вставка картинок проста и легка. Создаем и перетаскиваем в наш текст письма нужное изображение
Вот и все, пожалуй, на сегодня. Будем заканчивать. Надеюсь, что у вас все получится. Удачи и до новых встреч!
За признание — прощение, за утайку — нет помилования. Лучше грех явный, нежели тайный.
Петр Первый