JPEG, WebP та AVIF: порівняння на одному власному оригіналі
Обирайте формат за результатом кодування, а не лише за розширенням. 28 жовтня 2026 року ми зберегли одну власну RGB-таблицю 900 × 600 пікселів у трьох форматах. Вона містить градієнти, тонкі лінії, геометричні фігури й текст. Це відтворюваний приклад, а не фотографія чи універсальний рейтинг форматів.
- Збережіть одне джерело без втрат та однакові розміри результату. Виконайте обрізання й масштабування до порівняння, щоб не зіставляти різні зображення.
- Запишіть кодувальник і параметри. Тут усюди задана якість 80, але однакове число не означає однакову візуальну якість різних кодеків.
- Огляньте градієнти, кольорові краї й дрібний текст у запланованому розмірі показу та близько до початкового масштабу. Зафіксуйте помітні вади перед вибором меншого файла.
- Перевірте відображення через справжній шлях доставки й у потрібних браузерах. Збережіть придатний запасний варіант, якщо він потрібен вашій аудиторії.
| Формат | Розмір, байтів | Середня абсолютна похибка RGB |
|---|---|---|
| JPEG | 67757 | 1.481 |
| WEBP | 25332 | 1.699 |
| AVIF | 19166 | 1.64 |
Pillow 12.3.0; RGB; 900 × 600.
Отримані зображення
Як читати результат: у цьому запуску AVIF дав найменший файл. Це не доводить його переваги для всіх фотографій, логотипів чи знімків екрана. Похибка RGB — середня абсолютна різниця каналів після декодування, а не оцінка сприйняття: менше число не гарантує кращого вигляду. JPEG: quality=80, subsampling=0, optimize=true; WebP: quality=80, method=6; AVIF: quality=80, speed=6. Версії кодувальників і типові налаштування можуть змінити результат.
Шаблон запису: джерело __; розміри __; кодувальник/версія/параметри __; байти __; помітна вада __; перевірка браузера й запасного формату __; обраний варіант і причина __. Якщо менший файл зробив потрібний текст нечитабельним, він не розв’язує вашу задачу. Розміри файлів не вимірюють швидкість мережі, Core Web Vitals сторінки чи покращення SEO.
Джерело контексту: developer.mozilla.org.