Що означає модуль CSS анімації зображень для ваших анімованих WebP та GIF

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

Що пропонує модуль CSS анімації зображень?

Наразі браузери обробляють анімовані зображення непослідовно. Новий модуль має на меті надати веб-розробникам 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 анімації зображень WebPS може додати функції, які допоможуть користувачам попередньо переглядати та встановлювати сумісні з CSS властивості безпосередньо під час експорту. Наприклад, майбутнє оновлення може дозволити вам встановлювати кількість повторів та інші параметри, що відповідають новим CSS-властивостям.

Висновок

Модуль CSS анімації зображень Level 1 є значним кроком вперед у веб-стандартах для анімованих зображень. Хоча це лише проєкт, його потенціал для спрощення робочого процесу та покращення користувацького досвіду є значним. Використовуючи WebPS сьогодні для створення добре сформованих анімованих файлів, ви будете готові повною мірою скористатися цими майбутніми CSS-можливостями.

Слідкуйте за оновленнями в міру дозрівання специфікації. А поки продовжуйте створювати чудові анімації за допомогою WebPS!