Что модуль CSS Image Animation означает для ваших анимированных WebP и GIF

W3C опубликовал Первый публичный рабочий проект CSS Image Animation Module Level 1 — спецификацию, предлагающую средства управления воспроизведением анимированных изображений, таких как GIF, анимированные WebP и анимированные AVIF. Для веб-разработчиков и дизайнеров, использующих WebPS для создания и экспорта анимированных изображений, понимание этого проекта является ключом к подготовке к будущему и обеспечению отличного вида ваших анимаций во всех браузерах.

Что предлагает модуль CSS Image Animation?

В настоящее время браузеры обрабатывают анимированные изображения непоследовательно. Новый модуль призван дать веб-разработчикам контроль над поведением воспроизведения анимированных изображений с помощью CSS. Это включает:

• Указание количества повторений анимации (циклов).
• Управление направлением воспроизведения (нормальное, обратное, чередующееся).
• Установка времени начала или задержки перед запуском анимации.
• Возможность приостановки или остановки анимации с помощью CSS.

Хотя проект находится на ранней стадии (Первый публичный рабочий проект), он сигнализирует о переходе к рассмотрению анимированных изображений как предсказуемых медиа-активов, а не «черных ящиков» вроде GIF.

Как это повлияет на анимированные WebP и GIF?

И GIF, и анимированные WebP выиграют от этой стандартизации. Сейчас для управления поведением циклов вы полагаетесь на метаданные, встроенные в сам файл (например, количество циклов в заголовках GIF или WebP). С новым CSS-модулем вы сможете переопределять эти значения на уровне страницы или контекста без повторного экспорта файла.

Например, анимация баннера, которая должна бесконечно повторяться на целевой странице, но только один раз в статье, может управляться с помощью CSS, используя один и тот же файл изображения. Это уменьшает необходимость экспорта нескольких вариантов.

Кроме того, модуль может ввести оптимизацию производительности. Браузеры смогут лучше обрабатывать анимации, которые не видны на экране (например, приостанавливая их с помощью CSS `image-animation: paused`), экономя ресурсы ЦП и батарею.

Что делать пользователям WebPS сейчас?

Поскольку спецификация является Первым публичным рабочим проектом, она еще не реализована ни в одном браузере. Однако вы можете начать подготовку:

• Сохраняйте чистоту экспортируемых файлов: Убедитесь, что ваши анимированные WebP и GIF, экспортированные из WebPS, содержат правильные метаданные (количество циклов, задержка кадров и т.д.) в качестве запасного варианта. CSS-модуль будет дополнять, а не заменять контроль на уровне файла.
• Будьте в курсе: Следите за прогрессом спецификации W3C и новостями о реализации в браузерах. Производители браузеров, такие как WebKit (как видно из недавних выпусков Safari Technology Preview), активно работают над связанными функциями.
• Экспериментируйте в WebPS: Используйте WebPS для экспорта различных конфигураций циклов и тестируйте их поведение. Когда CSS-модуль появится в браузерах, вы сможете легко переопределить эти настройки.

Почему это важно для онлайн-редактирования изображений?

WebPS — это онлайн-редактор изображений, поддерживающий экспорт в несколько форматов, включая анимированные WebP и GIF. По мере развития CSS Image Animation Module WebPS сможет добавлять функции для предварительного просмотра и установки совместимых с CSS свойств непосредственно во время экспорта. Например, будущее обновление может позволить вам задавать количество циклов и другие параметры, соответствующие новым CSS-свойствам.

Заключение

CSS Image Animation Module Level 1 представляет собой значительный шаг вперед в веб-стандартах для анимированных изображений. Хотя это все еще проект, его потенциал для упрощения рабочего процесса и улучшения пользовательского опыта велик. Используя WebPS сегодня для создания правильно оформленных анимированных файлов, вы будете готовы в полной мере воспользоваться этими новыми возможностями CSS.

Следите за новыми обновлениями по мере развития спецификации. А пока продолжайте создавать отличные анимации с WebPS!