в каком формате можно сохранить анимацию
Сравнение анимации GIF, WebP, APNG, BPG
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.
Как создается анимация
Соседние кадры не должны сильно отличаться. Когда мы снимаем на видеокамеру, то это получается само собой, а вот если рисовать в редакторе, то можно об этом забыть, и Мальвина будет ходить, как Буратино.
Этот принцип используется в анимированных графических файлах. Они содержат не одно изображение, а серию картинок-кадров. Каждый кадр знает, сколько миллисекунд он должен отображаться.
И тут есть одна проблема. Размер одной секунды анимации с 24 кадрами будет весить в 24 раза больше статической картинки. Чтобы исправить ситуацию, применяют сжатие изображения.
Пример абстрактного алгоритма сжатия
Итак, есть файл. В нем только два цвета – черный и синий. Тогда цвет можно закодировать одним битом. Размер по горизонтали — 20, по вертикали — 1. Всего он занимает 20х1х1 = 20 бит.
В строке первые семь точек имеют первый цвет, затем шесть точек — второй, и оставшиеся в строке точки опять окрашены в первый цвет. Записать можно так: повторить цвет 1 — 7 раз, цвет 2 – 6 раз, цвет 1 – 7 раз (1х7 2х6 1х7).
Выгода кажется не очевидной, но если растянуть файл-строку в 1000 раз до 20 килобит, то запись увеличится совсем незначительно: 1х7000 2х6000 1х7000. С увеличением размера исходного файла выгода от сжатия будет только расти.
Сжатие применяется для каждого кадра анимации. Если в секунде 24 кадра, то оно сработает 24 раза. Без этого файлы анимации были бы очень большими.
Форматы с возможностью анимации
GIF формат
Это очень старый формат. Его показывают все браузеры. У него есть прозрачный слой, т.е. под картинкой будет виден фон, на котором она лежит. Для анимации сохраняет серию полноценных картинок. Это минус. Файл с 24 кадрами будет в 24 раза больше исходного статичного. Частично можно исправить тем, что некоторые кадры могут содержать прозрачный слой плюс изменения предыдущего кадра.
GIF показывает только 256 цветов. Это можно исправить при помощи анимации. Мы создаем две картинки с разным набором цветов. Демонстрируем их с задержкой 0. В итоге получаем 256 + 256 = 512 цветов.
Формат хорошо сжимает изображение без потерь. Для маленьких картинок это важно.
APNG формат
Этот формат (Animated PNG) является расширением распространенного формата PNG. Однако разработчики последнего не включили это расширение в спецификацию. Получилось, что немногие программы могут его правильно отображать. Большинство браузеров покажет первый кадр статичной картинкой, а про анимацию забудет.
Маловероятно, что формат будет широко использоваться. Тем более, что появились новые мощные конкуренты.
WEBP формат
Этот формат появился в 2010 году. Разработчик, компания Google, позиционирует его как замену GIF и других форматов. WEBP имеет все возможности GIF, но только в улучшенном варианте:
BPG формат
BPG — самый новый. Он был предложен в конце 2014 года. Формат позиционируется как замена JPEG со значительными улучшениями. Сжатие изображения будет эффективнее, чем у предка. Появится поддержка анимации (JPEG не умеет этого делать). Но формат только начинает свое развитие, рекомендовать его для использования еще нельзя, а вот следить за ним можно.
Работа с GIF, APNG и WEBP в CLI
Есть два замечательных пакета ImageMagick и GraphicsMagic. С помощью ImageМagic создается анимация из *.gif картинок:
Команда convert подхватывает все файлы *.gif в директории, сортирует их по алфавиту и последовательно вставляет в новый файл animated.gif.
Проверка (запустится маленький графический контейнер с мультиком):
Конвертация мультика в APNG формат:
Если использовать GraphicsMagic, то команды такие:
На этот раз выходной формат WEBP. Аналогично обрабатывается и BPG.
Также возможно вытащить анимацию в GIF из видеофайлов. Например, с использованием пакета libav-tools импортируется видео из MP4:
Посмотреть разницу между анимацией GIF, WebP и APNG в разных форматах можно тут. А вот пример.
Использование видеоформатов для анимированного контента
Просто выбрать правильный формат изображений не достаточно. Даже если вы провели их минимизацию по всем направлениям, Google всё-равно может остаться не доволен. Аналитика PageSpeed Insights зачастую, в качестве одной из рекомендаций, выдаёт совет использовать для анимированного контента видеоформаты.
В пояснении к правилу значится следующее: «Большие GIF-файлы – неэффективный способ представления анимации. Чтобы сэкономить трафик в сети, используйте видео в формате MPEG4/WebM для анимированного контента и изображения в формате PNG/WebP – для статического.»
Почему GIF — не всегда хорошо
К примеру, один ролик в формате GIF может весить почти 14 мегабайт. И это даже больше нежели полноценный среднестатистический сайт. Чтобы повысить производительность загрузки сайта и не заставлять пользователя долго ждать, лучше заменить анимированный GIF-контент.
К счастью, это одна из тех областей производительности при загрузке, где проделав небольшую работу можно достичь оптимального результата не теряя в качестве. Необходимо просто переконвертировать тяжеловесные GIF в быстрые и лёгкие видеофайлы. А затем встроить их на свою страницу таким образом, чтобы их визуальное восприятие не отличалось от GIFок.
Как превратить анимированные картинки в видео
Есть несколько способов конвертировать GIF в видео. Одним из простых и эффективных способов является использование инструмента FFmpeg.
FFmpeg –набор свободных библиотек, использующий открытый исходный код. С его помощью можно производить запись, конвертацию, передачу видео и аудио контента в различных форматах. Можно легко произвести конвертацию видеофайла из одного формата в другой. Помимо этого, есть и инструменты для декодирования.
Для начала, библиотеку ffmpeg нужно установить и проверить её работоспособность. Если всё сделано правильно, вам будет доступна диагностическая информация. В зависимости от платформы на которой вы работаете, способы установки разнятся.
Сразу же после того, как ffmpeg была корректно установлена, можно выбрать GIF и приступить к его трансформации в более подходящий формат. Для начала не экспериментируйте с контентом, расположенным непосредственно на вашем сайте. «Набейте руку» на сторонних гифках не удаляя свои. Как только полноценно научитесь с ними работать — сможете заменить весь требующийся контент.
Конвертация GIF в MPEG-4
MPEG-4 является наиболее распространённым форматом, который поддерживают все браузеры. Поэтому, предпочтительнее загружать видео именно в нём. Используя библиотеку, перейдите в папку с тестовым GIF-файлом. Чтобы его преобразовать потребуется простая команда:
Данная команда является наиболее простым решением для преобразования GIF в MPEG-4. В результате, если был доступен исходный GIF-файл размером 14 024 КБ, то будучи преобразованным в формат видео MPEG-4, он станет весить всего 867 КБ. Таким образом, экономия составляет 93,8%.
В данном случае, команда будет приблизительно таковой:
Конвертация GIF в WebM
WebM является относительно новым форматом и до сих пор поддерживается не всеми браузерами. При этом, его использование довольно удобно. Данный элемент позволяет указывать несколько элементов. Соответственно, для тех браузеров, которые поддерживают формат WebM, его можно задать в качестве основного. Остальные же будут отправлять пользователя к MPEG-4.
В ffmpeg преобразовать GIF в WebM можно с помощью следующей команды:
Если сравнить полученный результат, то версия видео WebM будет приблизительно на 7% меньше, нежели в MPEG-4 с заданными в предыдущем примере настройками. При этом, его визуальное качество является аналогичным.
Замена анимированных элементов GIF
Использование видео в качестве анимированного GIF, требует проведения определённой работы. Только в этом случае, получится достичь 100% визуального восприятия. Ключевые отличия анимированного контента от видео заключается в следующем:
Для того, чтобы использовать видео вместо GIF-файлов, необходимо явно указать элементу на автоматическое воспроизведение, непрерывный цикл и отсутствие звука.
Таким образом, пользователь получит контент, который по всем визуальным признакам будет GIF-анимацией, а на самом деде — видео контентом.
Укажите свой
Первым стоит указывать тот формат, который является предпочтительнее. Например, если вы сначала укажете видео в формате MPEG-4, а при этом браузер будет поддерживать WebM, то он пропустит эту возможность и автоматически загрузит пользователю MPEG-4.
Экспорт изображений и анимированных файлов GIF
В этой статье рассматривается экспорт изображений и анимированные файлы GIF.
При подготовке изображений для публикации в Интернете или в качестве других электронных материалов часто приходится искать компромисс между качеством и размером файла изображения.
Для предварительного просмотра оптимизированных изображений в различных форматах и с применением различных атрибутов файлов можно использовать возможности оптимизации, задаваемые в диалоговом окне «Экспорт изображения». Одновременного можно просматривать несколько вариантов изображения и изменять их настройки оптимизации для выбора наилучшего сочетания параметров в соответствии с текущими требованиями. Кроме того, можно задать параметры прозрачности и обработки краев, настроить дизеринг, изменить размер изображения (в пикселях или процентах от исходного размера).
При сохранении оптимизированного файла с помощью команды «Экспорт изображения» можно задать создание файла HTML для изображения. Этот файл будет содержать всю информацию, необходимую для отображения изображения в веб-браузере.
В Animate для сохранения изображений в форматах GIF, JPEG и PNG используется команда «Сохранить как». В зависимости от формата файла можно задать качество изображения, настроить прозрачность фона или обработку краев, отображение цветов и способ загрузки. Однако любые добавленные в файл веб-функции (например, ссылки и анимация) не сохраняются.
Кроме того, с помощью команды Обработчик изображений Animate в можно сохранить папку копий изображений в формате JPEG. С помощью команды «Обработчик изображений» также можно изменять размер изображений и преобразовывать цветовой профиль изображений в веб-стандарт sRGB.
Экспорт изображения
Диалоговое окно «Экспорт изображения» («Файл» > «Экспорт» > «Экспорт изображения» и «Файл» > «Экспорт» > «Экспортировать анимированный GIF»), чтобы выбрать параметры оптимизации и предварительно просмотреть оптимизированную монтажную область.
A. Параметры отображения B. Всплывающее меню «Оптимизация» C. Параметры набора настроек D. Параметры «Размер изображения» E. Параметры анимации F. Просмотр G. Панели инструментов
Просмотр изображений в диалоговом окне
Чтобы выбрать вариант отображения, щелкните вкладку над областью изображения.
Отображение изображения без оптимизации.
Отображение изображения, к которому применены текущие настройки оптимизации.
Одновременное отображение двух вариантов изображения.
Навигация в диалоговом окне
Если в диалоговом окне «Экспорт изображения» графический объект отображается не полностью, то с помощью инструмента «Рука» можно перемещать область просмотра, чтобы отобразить другую часть объекта. Для увеличения или уменьшения масштаба изображения используется инструмент «Масштаб».
Кроме того, можно задать процент масштабирования, введя нужное значение с помощью клавиатуры или выбрав значение в нижней области диалогового окна.
Просмотр информации об оптимизированном изображении и времени загрузки
В области комментариев, расположенной под изображениями в диалоговом окне «Экспорт изображения», приводится информация об оптимизации. В комментариях к исходному изображению указываются имя и размер файла. В комментариях к оптимизированному изображению указываются текущие настройки оптимизации, размер оптимизированного файла и предполагаемое время загрузки при выбранной скорости модема. Скорость модема можно указать в раскрывающемся меню «Просмотр».
Просмотр гаммы изображения с различными значениями
Значение гаммы монитора компьютера влияет на отображение светлых и темных тонов в браузере. Можно посмотреть, как ваши изображения будут смотреться на системах с различными значениями гамма-коррекции и подправить изображение, чтобы компенсировать этот эффект. Включение параметра просмотра не влияет на окончательный вывод изображения.
Цвет на экране монитора
Гамма изображения не изменяется. Значение «Цвет на экране монитора» задано по умолчанию.
Старая версия Macintosh (без управления цветом)
Моделирует стандартную гамму 1.8, применявшуюся в Mac OS 10.5 и ранее.
Windows (без управления цветом)
Моделирует стандартную гамму 2.2, использованную в Windows и Mac OS 10.6 и позже.
Использовать профиль документа
Задает значение гаммы в соответствие с цветовым профилем прикрепленного документа, использующего систему управления цветом.
Оптимизация изображения для Интернета
Выберите «Файл» > «Экспорт изображения» или «Файл» > «Экспортировать анимированный GIF».
Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна: «Оптимизированный» или «2 варианта».
(Необязательно) Если изображение содержит несколько фрагментов, выберите для оптимизации нужные.
В меню «Наборы параметров» выберите предопределенные настройки оптимизации или укажите собственные. Доступность параметров зависит от выбранного формата файла.
Подберите настройки оптимизации, чтобы добиться нужного баланса качества изображения и размера файла. Если изображение содержит несколько фрагментов, убедитесь, что все они оптимизированы.
Чтобы вернуть оптимизированное изображение в окне предварительного просмотра к исходному варианту, выберите изображение, затем в раскрывающемся меню «Наборы параметров» выберите пункт «Исходное».
Чтобы цвета оптимизированного изображения гарантированно выглядели одинаково в разных браузерах, преобразуйте цвета изображения в sRGB.
Метаданные вывода соответствуют стандартам Рабочей группы Метаданных поэтому некоторые метаданные JPEG хранятся форматах EXIF и IIM, а не XMP.
Параметры оптимизации для изображений и анимированных файлов GIF
В этом разделе рассматриваются различные параметры экспорта изображений и анимированных файлов GIF.
Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.
Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.
Определяет уровень сжатия. Чем выше значение параметра «Качество», тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра «Качество», тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.
Создается улучшенный файл JPEG с незначительно меньшим размером файла. Формат «Оптимизированный JPEG» рекомендуется для максимального сжатия. Однако некоторые браузеры старых версий могут не поддерживать эту функцию.
Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.
Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.
Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.
Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)
Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.
Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).
Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.
Параметры оптимизации для форматов GIF и PNG‑8
Формат GIF является стандартом сжатия для изображений с цветами смесевых красок и четкой детализацией, например, для штриховых рисунков, логотипов или иллюстраций с текстом. Аналогично GIF, формат PNG‑8 эффективно сжимает сплошные области цвета с сохранением четкости деталей.
Файлы PNG‑8 и GIF поддерживают 8-разрядную глубину цвета, то есть до 256 цветов. Процесс определения используемых цветов называется индексированием, поэтому изображения в форматах GIF и PNG‑8 иногда называют изображениями индексированных цветов. Чтобы преобразовать изображение в индексированные цвета, для хранения и индексации цветов в изображении используется таблица цветов изображения. Если в таблице цветов исходного изображения отсутствует нужный цвет, то приложение подбирает ближайший цвет из таблицы или имитирует цвет с помощью сочетания доступных цветов.
Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения. См. Настройка таблицы цветов для изображений GIF и PNG‑8.
Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40%.
Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Дизеринг шума» или «Регулярный дизеринг».
Цвета и метод редукции цвета
Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.
Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.
Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение «Селективная» задано по умолчанию.
Адаптивная Создает таблицу путем выборки цветов из преобладающего спектра в изображении. Например, для изображения, в котором есть только зеленый и синий цвета, таблица цветов будет состоять в основном из оттенков синего и зеленого. В большинстве изображений цвета сосредоточены в определенных областях спектра.
Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется «безопасной палитрой Web»). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.
Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.
Таблица цветов изображения настраивается с помощью палитры Таблица цветов в диалоговом окне «Сохранить для Web и устройств».
«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.
Определяет метод и степень дизеринга. Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. Для оптимального сжатия рекомендуется использовать наименьший процент дизеринга, обеспечивающий необходимую детализацию цвета. К изображениям, состоящим преимущественно из сплошных тонов, дизеринг можно не применять. В изображениях с непрерывными оттенками (особенно градиентами) дизеринг может быть нужен для того, чтобы избежать полошения цветов.
Доступны следующие методы дизеринга.
Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.
Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.
Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.
«Прозрачность» и «Подложка»
Определяет способ оптимизации прозрачных пикселей в изображении.
Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.
Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).
Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.
Как создать анимацию в Photoshop. Пошаговая инструкция
Анимация уже давно превратилась в инструмент улучшения юзабилити. Она помогает взаимодействовать с интерфейсом и привлекает внимание к самому важному.
Анимация — это последовательное отображение кадров друг за другом. Каждый кадр немного изменяется, поэтому кажется, что картинка движется.
Чтобы создать простой веб-баннер или презентацию, необязательно разбираться с многочисленным софтом. Для этого подойдут и встроенные средства Photoshop. Это лишь небольшая доля возможностей программы, а раскрыть их все на практике поможет курс «Photoshop с нуля до PRO».
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
C чего начать
Первым делом нужно определиться с тем, что мы будем анимировать и какого результата планируем достичь.
Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который я и анимировал.
«Шкала времени»
Перед созданием анимации необходимо подготовиться — включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.
Открываем вкладку «Окно» и ставим галочку напротив строки «Шкала времени».
Внизу окна в Photoshop должна появиться широкая строка, с помощью которой управляют кадрами в анимации.
Чтобы создать первый кадр, нажимаем «Создать анимацию кадра» на «Шкале времени».
Как первый кадр появится, можно приступить к созданию движения.
Промежуточные кадры
В Photoshop анимируют двумя способами:
Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента — начальное в первом кадре и конечное в следующем.
Поэтому добавляем ещё один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».
После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.
На следующем кадре проверяю, виден ли слой с балалайкой.
После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.