Apng та svg,; новий; формати d; зображення і d; анімація в електронному листі
«Як на землі підтримувати бездоганну якість у анімованому GIF, створеному з відео. І призначений для надсилання електронної пошти. Не маючи 20 Мб файлу? "
Середній клієнт, який атакує нас вищеЦе одне з повторюваних питань. На жаль, наскільки нам відомо, швидкого виправлення не існує. Кінець дискусії. До зустрічі !
Але наааан жартую ! Який я жартівник! Цілком можливо створити анімований gif з відео для електронного листа (а ми пропонуємо його в Badsender в іншому місці). Але якщо хтось хоче регулювати остаточний розмір файлу, це правда, що потрібно буде скоротити тривалість та/або "знизити" якість відповідного файлу. Навряд чи ми можемо зробити інакше. Ви не можете мати вершкове масло, срібне масло і ложку крему ...
Але почекайте ... У мене є ідея!
Якщо складно зменшити вагу анімованого GIF-файлу, створеного з відео та призначеного для електронної пошти, я, з іншого боку, думаю про відео типу «кінограми». Ви, безсумнівно, бачили, як вони проходили той чи інший шлях. (Ви повинні, це невелика тенденція, щоб придумати випадкове рішення для відео).
Давай, це подарунок, я пропоную тобі невеликий попередній перегляд того, що зроблено в акаунті Dior Instagram. (Зараз я ставлю “Eau Sauvage”, це залежить від мого вибору):
Коли я бачу це, я кажу собі цеочевидно є спосіб покращити ситуацію. У тому сенсі, що якщо я візьму ці відео і перекладу їх у анімований gif, я неминуче отримаю досить важкий файл. І з “відносно” посередньою якістю (оскільки, як відомо, gif підтримує максимум 256 кольорів серед палітри RGB, або 16 277 216 відтінків ...). Демонстрація на зображенні:
На цьому прикладі ми чітко бачимо, що навіть якщо якість максимальна, градації фонової текстури залишають бажати кращого. Що стосується ваги: ми все ще знаходимось у файлі розміром 674 кб.. Для такої маленької анімації це дійсно марно ...
І нарешті, коли ми детально розглянемо два наведені вище приклади, це «майже» лише фонове зображення (виріб) із анімацією променя/ореолу світла (для 1-го відео) або підпалу плаває в повітрі (для 2-го відео). І саме цю систему я хочу використовувати.
Рішення: формат apng.
Що мені скаже цей формат? APNG для анімованої портативної мережевої графіки. Іншими словами, неофіційне розширення формату PNG. З анімацією на додачу. Оскільки великими перевагами формату PNG є підтримка як прозорості/напівпрозорості, так і можливість зберігати фотографії без втрати даних (оскільки він не обмежується 256 кольорами). Якщо до цього додати анімацію, ми отримаємо формат який не страждає від втрати даних, що підтримує прозорість та анімацію: APNG.
Отже, принципом було б надати зображення продукту у форматі JPEG (для справді ідеальної якості) та вставити його як фонове зображення на клітинку. На цьому фоновому зображенні я можу вклинити свою прозору анімацію у форматі APNG, при необхідності розмістивши невелике посилання (припускаючи, що продукт повинен бути натисканим).
Підемо на практику !
Так, у реальному житті це трохи складніше, ніж це. Щоб створити файл APNG, ви можете подумати, що для Photoshop є готові плагіни ... Ну, насправді я його не знайшов. Єдине рішення, яке я знайшов на даний момент, - це завантажити невелике програмне забезпечення, яке називається apngasm.
Як тільки це буде зроблено, це необхідно підготуйте різні шари анімації. Коли я дивлюсь на створений вище gif (з ореолом світла): я фактично створюю анімацію з 10 станами. У кожному з цих станів у мене є косий лінійний градієнт, з різними положеннями кожного разу для різних ступенів непрозорості мого ореолу.
Потім я експортую ці 10 шарів у форматі png на прозорому фоні. Все, що мені потрібно зробити, це імпортувати ці файли в апнгазм і відрегулювати час відображення кожного "кадру".
І ось мій створений файл animated.png! Якщо ми подивимося на вагу, то побачимо, що файл JPEG мого продукту важить 138 кб. Мій файл animated.png важить 33,4 кб. Що загалом дає нам 171,4 кб. Вага нашого початкового файлу GIF становить 674 кб, результат є досить переконливим ! Ми ділимо вагу на 3 і покращуємо якість! Це щастя !
ОК добре. Як це працює на практиці в HTML-коді ?
Насправді я маю лише вставте виріб як фонове зображення та розмістіть файл png у цій самій комірці як нерухоме зображення. Що дасть нам щось на зразок:
Це якщо я не встановлюю патч для Outlook (який не підтримує фонові зображення). Якщо я додаю виправлення, то наш код буде таким:
Якщо ми подивимося на візуалізацію, ми отримаємо ось що:
З точки зору коду, тоді нічого дуже складного. Але як щодо підтримки ?
Більш докладно про це Вільберт Хайнен пішов у дописі на блозі "Лакмус". Файли Animated.png підтримуються в Apple Mail, Outlook 2016/2018 для Mac, Thunderbird, iOS Native Mail APP, Samsung Native Mail App, Outlook App Android для iOS.
Він також буде підтримуватися при використанні облікового запису Outlook.com на AOL, Comcast, Freenet.de, GMX.de, Libero, Mail.ru, Office365, Orange.fr, Outlook.com, T-Online.de, Web.de, Yahoo! Пошта. Однак він не підтримується в Lotus Notes, Outlook 2007 та новіших версіях для Windows, Gmail App для Android та iOS, Gsuite, Gmail.
Марк Роббінс у своїй презентації про майбутнє зображення в електронній пошті повідомляє про підтримку 66% та резервну копію 29%. Здається, жоден поштовий клієнт не стурбований інтерпретацією цього формату. Навіть якщо анімація не працює, не біда, оскільки прозорість дотримується. І так, фонове зображення завжди з'являється, жодним чином не блокуючи розуміння повідомлення.
Ми могли б зробити те саме з svg і додатково оптимізувати вагу анімації ?
Це те, що змушує мене виправдовуватися у виборі цього формату, а не формату svg. Якщо svg також дозволяє робити векторну графіку та анімацію, він не підтримується 29% поштових клієнтів.
Підтримка svg у ТОП-10 поштових клієнтів, Марк Роббінс
І згідно з нашими тестами, найприкріше цез’являється квадрат із сірою облямівкою у цих випадках. Потім це перешкоджає відображенню фонового зображення. Як результат, читання та розуміння повідомлення справді карається.
Зараз час запитань/відповідей !
У: Чи обов’язково мені доводиться переглядати фонове зображення? Чому б не накласти 2 зображення в клітинку ?
Б: Гей, я змушую вас ні до чого! Безсумнівно, можна пройти абсолютне позиціонування зображень в електронному листі ... І таким чином уявити як зображення товару, так і анімаційне зображення як 2 нерухомих зображення. Але я не знайшов часу для тестування. І я боюся, що розповсюдження «недосконалих» методів може збільшити відсутність загальної підтримки очікуваного результату. Але ніщо не заважає перевірити друга !
У: Ми можемо знайти готові анімації ?
Б: Хеуууу ... я нін! Я не відеограф mizot! Але привіт, з невеликою фантазією та креативом, трохи роботи в Photoshop, і престо! Це воно ! Ні побаченого, ні горбатого! Ви швидко витягуєте щось питне. Ви можете побачити це на моєму творінні ... Що ви маєте на увазі "ні" ?
У: Чи справді існує лише апнгазм для генерації файлів apng? Іншого рішення немає ?
Б: Власне, я дізнався про те, що платформа ezgif це також пропонує. І програмне забезпечення Screentogif теж. Два інструменти, про які я щойно говорив під час семінару EMDay ... Як і те, про що, ми не завжди знаємо всі можливості вже наявних інструментів...