Який формат зображень найкращий для вебсайту?

Запитання про «найкращий формат» недоречне, доки ви не визначили тип зображення. На вебсайтах використовують кілька дуже різних видів зображень, і для кожного є однозначно найкращий варіант:

• Фотографії (товари, люди, місця): формат зі стисненням із втратами. AVIF забезпечує найменший розмір, WebP є надійним сучасним стандартом, а JPG – резервним форматом, який відображає кожен браузер.
• Логотипи, значки та ілюстрації: SVG. Це векторна графіка, тому вона залишається чіткою за будь-якого розміру на будь-якому екрані, а файл зазвичай дуже малий. Використовуйте растровий формат як резервний лише тоді, коли платформа не приймає SVG.
• Знімки екрана, графіка UI та все, що має прозорість: PNG або WebP без втрат. Однорідні кольори та чіткі краї – саме те, що добре стискають формати без втрат.
• Короткі анімації: анімований WebP або AVIF замість GIF, адже GIF обмежений малою палітрою та створює значно більші файли.
• Фавікон: файл ICO, бажано разом із версією SVG або PNG – дивіться, як створити фавікон із зображення.

Класична помилка – фотографія, збережена як PNG. PNG зберігає кожен піксель без втрат, що ідеально для логотипа, але згубно для фотографії: файл стає в кілька разів більшим за JPG без помітного покращення.

Вибір формату для фотографій залежить від того, наскільки ви можете покладатися на новіші браузери:

• AVIF стискає найкраще: за типової вебякості файл приблизно на 50% менший за JPEG і на 20–30% менший за WebP, а за потреби формат підтримує HDR і широкий колірний обхват. Його відображають Chrome, Firefox і Safari (Safari – починаючи з версії 16.4, у 2023 році). Недоліки – повільне кодування, особливо великих зображень, і слабка підтримка в настільних програмах та на старіших пристроях.
• WebP є практичним стандартом: він дає файли на 25–35% менші за JPEG за однакової візуальної якості, підтримує прозорість і працює в кожному поширеному браузері з 2020 року. Деякі настільні програми та старіші інструменти досі не можуть його відкрити, але це важливо для файла, який ви передаєте дизайнеру, а не для того, який показуєте відвідувачам.
• JPG є універсальним резервним форматом. Він найменш ефективний із цих трьох, але JPG, збережений із якістю приблизно 75–82, зазвичай неможливо відрізнити від оригіналу на екрані, і в інтернеті немає пристроїв, які не могли б його показати.

Найкраща конфігурація подає AVIF браузерам, які його розуміють, WebP – решті, а JPG зберігає для всього старішого. Якщо ви волієте вибрати один формат, WebP із резервним JPG охоплює практично всіх. Безпосередні порівняння наведено в матеріалах WebP проти AVIF і WebP проти JPG; про графіку замість фотографій читайте в матеріалі PNG проти JPG.

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

1. Відкрийте конвертер і перетягніть свої зображення – один файл або цілу папку. Пакети обробляються разом.
2. Виберіть вихідний формат: WebP або AVIF для фотографій, PNG для графіки, якій потрібна прозорість. Для поширених завдань є прямі маршрути: JPG у WebP, PNG у WebP, JPG у AVIF і PNG у AVIF.
3. Налаштуйте якість. Поля цільового розміру немає: розмір є результатом. Для кожного файла показано розмір до та після обробки, тому рухайте повзунок, доки і число, і зображення не стануть прийнятними.
4. Завантажте результати окремо або як єдиний ZIP.

Нічого не завантажується – після відкриття сторінки ви можете від’єднатися від інтернету й продовжити конвертування; крім того, з кожного експортованого зображення видаляються метадані EXIF і GPS, тому фотографія товару не розкриє місце знімання. Сервіс безкоштовний, не потребує облікового запису й не додає водяних знаків. Уже маєте потрібний формат і хочете лише зменшити файл? Одразу переходьте до компресора зображень. А якщо платформа вимагає растрову версію векторного логотипа, інструмент SVG у PNG візуалізує його в будь-якому вибраному вами розмірі.

Правильний вибір формату важливий, але три звички заощаджують більше байтів, ніж будь-який перехід із JPG на AVIF:

• Змінюйте розмір відповідно до фактичного розміру відображення. Фотографія з камери в багато разів ширша за область, яку займає на сторінці, а кожен зайвий піксель завантажується та відкидається. Саме для цього інструменти зображень EditItAll мають необов’язкове обмеження максимального розміру.
• Стискайте один раз і лише з оригіналу. Кожне збереження з втратами відкидає ще трохи деталей. Зберігайте оригінал, експортуйте з нього вебкопію та не перезберігайте послідовно JPG як WebP, а потім як AVIF.
• Подавайте сучасні формати з резервним варіантом. Спочатку пропонуйте AVIF або WebP, а старішим браузерам дозволяйте переходити до JPG або PNG, щоб жоден відвідувач не побачив пошкодженого зображення.

Якщо звіт про швидкодію радить «ефективно кодувати зображення» або «подавати зображення у форматах нового покоління», йдеться саме про це рішення: матеріал про усунення попередження щодо ефективного кодування зображень пояснює весь процес, а матеріал про стиснення JPEG для вебу докладно описує повзунок якості. Більше посібників із форматів доступно в добірці про конвертування зображень.