Які формати зображень підтримують анімацію?

Повне пояснення

Що це і навіщо. Анімаційні зображення дозволяють показувати рухомий контент без використання відео або JavaScript‑анімацій. Це корисно для інформативних банерів, іконок‑анімей та простих ефектів.

Ключові принципи, терміни, інваріанти.

• GIF (Graphics Interchange Format) – старий, широко підтримуваний формат; обмежений 256‑кольоровою палітрою.
• APNG (Animated Portable Network Graphics) – розширення PNG, підтримує 24‑бітові кольори і альфа‑канал.
• WebP – формат Google, що підтримує як статичні, так і анімовані зображення; забезпечує кращу компресію.

Як це працює. Кожен кадр зберігається як окремий фрейм у файлі; браузер читає заголовки, визначає порядок і затримку кадрів, а потім рендерить послідовність.

Практика і реалізація. У HTML просто вставляємо <img src="image.webp" alt="">; браузер сам обробить анімацію. Для контролю можна використовувати CSS‑атрибут animation-play-state або JavaScript‑API HTMLImageElement.

Тестування. Перевіряємо підтримку у різних браузерах (Chrome, Firefox, Safari) і на мобільних пристроях; можна використовувати Lighthouse для оцінки продуктивності.

Оптимізація продуктивності. Вибираємо WebP для кращої компресії; обмежуємо кількість кадрів і розмір файлу, щоб зменшити час завантаження.

Accessibility. Додаємо атрибут alt з описом анімації; у випадку, коли рух може викликати дискомфорт, пропонуємо кнопку «зупинити».

Безпека та валідація. Переконуємося, що зображення не містить шкідливих скриптів; використовуємо CSP‑заголовки для обмеження джерел.

Типові помилки й edge cases.

• GIF‑файли часто мають великий розмір; варто конвертувати у WebP.
• APNG не підтримується в Safari (до 14); варто надати fallback‑GIF.
• Анімація може сповільнити рендеринг; використовуйте will-change: transform для оптимізації.

Cheatsheet + можливі follow‑up питання.

• Як конвертувати GIF у WebP? (наприклад, cwebp -q 80 input.gif -o output.webp).
• Чи можна контролювати FPS у WebP? (через параметр -r при конвертації).
• Які альтернативи для складних анімацій? (SVG‑анімація, CSS‑keyframes).