Що таке WebP? WebP vs PNG vs JPG і коли його використовувати
Що таке WebP? Це формат зображень, який розробила компанія Google і представила у 2010 році. Файл WebP (.webp) зберігає зображення зі стисненням із втратами на основі відеокодека VP8 або зі стисненням без втрат, і обидва режими підтримують альфа-прозорість та анімацію. Мета проста: менші файли, ніж JPG, PNG чи GIF, за подібної візуальної якості.
Спробуйте безкоштовно: Зображення у WebP Безкоштовно, без реєстрації.
Тому WebP став стандартним вибором для багатьох сайтів, і саме тому, зберігаючи зображення з інтернету, ви тепер бачите файли .webp. У цьому посібнику пояснено, що таке файл WebP, як насправді порівнюються WebP vs PNG і WebP vs JPG, коли WebP — невдалий вибір, а також як його відкрити й конвертувати. Щоб просто зараз перетворити PNG або JPG у WebP, скористайтеся безкоштовним конвертером зображень у WebP, який працює у вашому браузері.
Що таке WebP? Як працює формат
Файл WebP — це невеликий контейнер (на основі RIFF, тієї самої структури, яку використовують аудіофайли WAV), що містить один із двох типів даних зображення:
- WebP із втратами стискає зображення як один кадр відео VP8. Він передбачає кожен блок пікселів за сусідніми й зберігає лише різницю — саме звідси береться економія порівняно з JPG. Він працює у 8-бітному Y'CbCr 4:2:0, тож деталі кольору зберігаються з половинною роздільністю, як у більшості JPG.
- WebP без втрат — окремий кодек, який відтворює кожен піксель точно, як PNG, але з кращими інструментами стиснення.
Обидва режими можуть містити альфа-канал для прозорості, а файл WebP може мати кілька кадрів із таймінгом — це анімований WebP, менша заміна анімованим GIF. Зображення WebP може мати розмір до 16 383 × 16 383 пікселів.
WebP задокументовано й поза Google: RFC 9649, опублікований IETF у листопаді 2024 року, описує формат і реєструє медіатип image/webp, який сервери надсилають у заголовку Content-Type.
Наскільки менші файли WebP?
Документація WebP від Google наводить такі дані з власних тестів:
- Зображення WebP без втрат на 26% менші за PNG.
- Зображення WebP із втратами на 25–34% менші за порівнянні зображення JPEG за еквівалентного SSIM — показника того, наскільки зображення схоже на оригінал.
- Прозорість без втрат коштує приблизно 22% додаткових байтів, тоді як WebP із втратами та прозорістю зазвичай дає файли у 3× менші, ніж PNG.
Це середні значення, а не гарантії. На реальних числах PNG-скриншот розміром 200 КБ у форматі WebP без втрат займав би приблизно 148 КБ (200 × 0,74), а JPEG-фото на 500 КБ у форматі WebP із втратами — приблизно від 330 КБ до 375 КБ. Для сторінки з десятьма фото по 300 КБ (загалом 3 000 КБ) той самий діапазон означає 1 980–2 250 КБ, тобто економію 750–1 020 КБ під час кожного відвідування без кешу.
Окремі файли можуть показати кращий або гірший результат. JPEG, який уже сильно стиснули, після повторного кодування може навіть збільшитися, тож завжди порівнюйте розмір результату з оригіналом.
WebP vs PNG vs JPG vs AVIF
| JPG | PNG | WebP | AVIF | |
|---|---|---|---|---|
| Стиснення | Із втратами | Без втрат | Із втратами й без втрат | Із втратами й без втрат |
| Прозорість | Ні | Так | Так | Так |
| Анімація | Ні | Лише як APNG | Так | Так |
| Глибина кольору | 8 біт | До 16 біт | 8 біт | 8, 10 або 12 біт |
| Підтримка браузерами | Універсальна | Універсальна | Усі сучасні браузери (Safari 14+) | Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+ |
| Найкраще для | Фото, які мають відкриватися будь-де, друк, електронна пошта | Скриншоти, логотипи, оригінали для редагування | Фото й графіка для вебу, прозорі чи анімовані | Зображення для вебу з резервним WebP або JPG |
WebP vs PNG
Чи кращий WebP за PNG? Для сайту — зазвичай так. WebP без втрат зберігає кожен піксель PNG і, за даними Google, у середньому на 26% менший, а WebP із втратами та альфа-каналом може зменшити прозорі фото товарів ще значно сильніше. PNG досі виграє у трьох випадках: він відкривається в будь-якій програмі, яку будь-коли створили, підтримує 16-бітний колір для високоточного редагування й залишається надійнішим форматом для оригіналу, який ви ще редагуватимете. Для скриншотів із дрібним кольоровим текстом використовуйте WebP без втрат, а не з втратами, бо субдискретизація кольору 4:2:0 може розмити тонкі червоні чи сині лінії.
WebP vs JPG
Для фото у вебі WebP із втратами дає подібну якість за меншого розміру і, на відміну від JPG, може бути прозорим або анімованим. Перевага JPG — сумісність: його читає будь-яка камера, принтер, поштовий клієнт і офісна програма. Якщо файл виходить за межі браузера, JPG — надійніший вибір.
AVIF на основі відеокодека AV1 — новіший суперник. Він підтримує більшу глибину кольору й часто стискає сильніше, але кодування повільніше, а підтримка з’явилася пізніше. Поширена схема: спершу AVIF, потім WebP, наостанок JPG.
Підтримка WebP у браузерах
Усі сучасні основні браузери показують WebP, зокрема файли без втрат, прозорі й анімовані:
- Chrome 32 і новіші, Edge 18 і новіші, Firefox 65 і новіші, Opera 19 і новіші.
- Safari 14 і новіші на macOS 11 Big Sur або новішій, а також Safari на iOS/iPadOS 14 і новіших.
Без підтримки залишаються лише старі системи, як-от Internet Explorer або Mac, що застряг на macOS 10.15 Catalina. Google Пошук також індексує зображення WebP: у його рекомендаціях щодо зображень BMP, GIF, JPEG, PNG, WebP, SVG і AVIF указано як підтримувані формати.
Коли не варто використовувати WebP
WebP — формат доставки для екранів. Обійдіться без нього в таких випадках:
- Друк. WebP підтримує лише RGB, режиму CMYK немає, а друкарні зазвичай просять PDF, TIFF або високоякісний JPG.
- Оригінали для редагування. Кожне збереження з втратами трохи зменшує деталізацію. Зберігайте оригінальний PNG, TIFF, RAW або файл проєкту вашого редактора, а WebP експортуйте лише для публікації.
- Файли, які ви надсилаєте іншим. Старіші версії графічних редакторів, офісних пакетів, поштових клієнтів і форм завантаження можуть не приймати
.webp. Надсилайте JPG або PNG, якщо не знаєте, яке програмне забезпечення має одержувач. - Зображення понад 16 383 пікселі з будь-якого боку, як-от великі панорами чи карти.
- Сильно стиснені JPG. Повторне кодування додає друге покоління артефактів і може нічого не заощадити.
Як використовувати WebP на сайті з резервним форматом
Оскільки всі сучасні браузери підтримують WebP, звичайний <img src="photo.webp"> працює майже для всіх. Щоб охопити й старіші браузери, використовуйте елемент <picture>: браузер вибирає перший <source>, чий type він підтримує, а інакше переходить до <img>.
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Синє крісло у світлій вітальні"
width="1200" height="800">
</picture>
Залишайте alt, width і height на <img>, бо вони діють незалежно від того, який файл завантажиться. Також перевірте, що сервер надсилає Content-Type: image/webp; на старому налаштуванні Apache може знадобитися рядок AddType image/webp .webp у .htaccess.
Для SEO WebP важливий передусім завдяки швидкості. Елементом Largest Contentful Paint (LCP) у Core Web Vitals часто є головне зображення сторінки, а менший файл завантажується швидше, особливо в мобільних мережах. Наша стаття про те, чому швидкість завантаження зображень важлива для Core Web Vitals, пояснює, як вимірюється LCP і яку роль відіграють стиснення та ліниве завантаження. Сам лише формат не врятує зображення, яке вчетверо ширше за місце, що його воно займає.
Як відкрити файли WebP у Windows і macOS
Як відкрити файли WebP, залежить від вашої системи:
- Будь-який браузер: перетягніть файл у вікно Chrome, Edge, Firefox або Safari.
- Windows 10 і 11: відкрийте його в програмі Фотографії або Paint. Якщо Windows не розпізнає файл, установіть безкоштовне розширення Microsoft Webp Image Extensions із Microsoft Store — воно також додає ескізи у Провіднику файлів.
- macOS 11 Big Sur і новіші: двічі клацніть файл, щоб відкрити його в програмі Перегляд; Швидкий перегляд (пробіл у Finder) також його показує.
Як конвертувати WebP
Як конвертувати WebP, залежить від потрібного напрямку.
У WebP, у браузері: конвертер WebP від TimeToTime перетворює за раз одне зображення PNG, JPG або інше, яке може прочитати браузер. Виберіть якість від 1 до 100 (за замовчуванням 80), натисніть «Перетворити у WebP», і інструмент покаже розмір результату та наскільки він менший чи більший за оригінал, наприклад «На 67% менше за оригінал», коли PNG розміром 1 250 000 байтів стає WebP розміром 412 500 байтів. Прозорість зберігається, а зображення ніколи не залишає ваш пристрій. Пакетного режиму чи зміни розміру немає, метадані EXIF не копіюються, а анімований GIF стає статичним зображенням. Safari може не вміти кодувати WebP; тоді інструмент про це повідомляє й зберігає PNG, тож використовуйте Chrome, Edge або Firefox. Якщо також потрібно зменшити розміри в пікселях, Компресор зображень має параметр максимальної ширини й теж може видавати WebP.
У WebP, у командному рядку: інструмент Google cwebp із пакета libwebp конвертує окремі файли, а за допомогою скрипта — і цілі папки:
cwebp -q 80 in.png -o out.webp
cwebp -lossless logo.png -o logo.webp
-q задає якість від 0 до 100 (за замовчуванням 75), а -lossless вмикає режим без втрат.
З WebP у PNG або JPG: у macOS відкрийте файл у програмі «Перегляд», виберіть Файл › Експортувати і вкажіть PNG або JPEG. У Windows відкрийте його в Paint і скористайтеся командою Файл › Зберегти як. У командному рядку dwebp in.webp -o out.png створює PNG.
Поширені запитання
Що таке файл WebP?
Файл .webp — це зображення у форматі WebP від Google. Це може бути фото (із втратами), піксельно точна графіка (без втрат), прозоре зображення або коротка анімація, і його відкриває будь-який сучасний браузер.
Чи кращий WebP за PNG?
Для вебсторінок — зазвичай так: WebP без втрат у середньому на 26% менший за PNG з ідентичними пікселями. Для оригіналів, які ще редагуватимуть, 16-бітних зображень і файлів, які інші мають відкрити в будь-якій програмі, PNG — надійніший вибір.
Чи погіршує конвертація у WebP якість?
WebP із втратами відкидає частину деталей, як і JPG; за якості 75–85 різницю на більшості фото важко помітити. WebP без втрат зберігає кожен піксель. Конвертація JPG у WebP без втрат не поверне деталей, які JPG уже втратив.
Чому сайти використовують WebP замість JPG?
Менші файли швидше завантажуються й споживають менше трафіку, що допомагає Largest Contentful Paint. WebP також підтримує прозорість і анімацію, чого JPG не вміє.
Чи можна конвертувати WebP назад у JPG або PNG?
Так. Скористайтеся експортом у «Перегляді» на Mac, командою «Зберегти як» у Paint у Windows або dwebp у командному рядку. Результат не може бути кращим за WebP, тож зберігайте оригінали, коли це можливо.
Спробуйте безкоштовно: Зображення у WebP Безкоштовно, без реєстрації.