WebP створює файли На 25-35 відсотків менше, ніж PNG для того самого зображення, і воно зберігає прозорий фон, яким відомий PNG. Цей єдиний факт пояснює, чому Google створив WebP і чому більшість сучасних веб-сайтів тепер його обслуговують. Контраргумент PNG є доступним: він відкривається в кожній будь-коли написаній програмі, включаючи програмне забезпечення, яке ніколи не чуло про WebP. Тож вибір не залежить від того, який формат є технічно кращим, оскільки WebP явно є таким. Це залежить від того, чи оптимізуєте ви для сучасного веб-сайту чи для гарантованої сумісності скрізь. У цьому посібнику детально порівнюються обидва параметри щодо стиснення, прозорості, режимів якості, підтримки браузера, анімації та швидкості сторінки, а потім дається чітке правило вибору.

Що таке WebP і чому Google створив його

WebP — це формат зображень, випущений Google у 2010 році, заснований на технології стиснення відеокодека VP8. Мета була прямою: зробити веб-зображення меншими, щоб сторінки завантажувалися швидше. Google мав дані, щоб знати, що зображення переважають у вазі сторінки, і що зменшення третини кожного зображення помітно пришвидшить Інтернет. WebP був розроблений із самого початку, щоб замінити три формати одночасно Прозорість PNG, фотографічне стиснення JPG і анімація GIF в одному контейнері. Через ці амбіції він може робити те, що PNG не може.

Що таке PNG і чому він зберігається

PNG з’явився в 1996 році як безпатентна заміна GIF, використовуючи стиснення DEFLATE без втрат і додаючи повний альфа-канал. Це стало стандартом для логотипів, значків, скріншотів і будь-якої графіки, яка потребує прозорого фону. Майже три десятиліття всесвітньої підтримки — його рів. Кожен браузер, операційна система, поштовий клієнт, офісний пакет і редактор зображень читають PNG без налаштування. Коли зображення абсолютно необхідно відкрити десь невідомо, PNG — це формат, який ніколи не підведе.

Розмір файлу: WebP явно перемагає

WebP стискає краще, ніж PNG, практично в усіх сценаріях. Для типового прозорого логотипу чи графічного інтерфейсу очікуйте a Зниження на 25-35 відсотків перехід від PNG до WebP без втрат. Перейдіть у режим із втратами WebP, і економія різко зросте, часто від 60 до 70 відсотків, зберігаючи альфа-канал. PNG взагалі не має параметрів із втратами, тому він не може конкурувати на низькому рівні. На сайті з десятками графічних ресурсів ця різниця зводиться до сотень кілобайт на завантаження сторінки.

Розрив виникає через розумніше стиснення. Алгоритм DEFLATE у форматі PNG — це метод загального призначення, запозичений із ZIP, добре підходить для пошуку дослівного повторення. WebP використовує інтелектуальне кодування, створене спеціально для зображень, вгадуючи кожен блок за його сусідами та зберігаючи лише різницю. Такий підхід з урахуванням зображення забезпечує економію, яку DEFLATE не бачить, тому формат 2010 року так стабільно перевершує формат 1996 року.

Прозорість: вона є в обох, WebP робить більше

На відміну від JPG, обидва формати мають повний альфа-канал, тому логотип залишається прозорим у будь-якому. Але WebP додає те, що PNG не може зрівнятися: прозорість у режимі з втратами. Прозорість PNG забезпечується лише стисненням без втрат, тому напівпрозору графіку потрібно зберігати з повною вагою без втрат. WebP дозволяє мати прозорий фон і водночас агресивне стиснення, а це саме те, що потрібно важкому логотипу PNG. Ця комбінація є найвагомішим аргументом WebP для активів інтерфейсу користувача та вирізів для продуктів, які мають залишатися прозорими та водночас меншими.

Якість: режими без втрат і з втратами

WebP пропонує обидва режими, що робить його гнучким, ніж PNG:

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

PNG пропонує лише без втрат, тому він залишається великим. Якщо вам потрібна ідеальна копія, WebP без втрат надасть вам її меншу. Якщо ви можете прийняти невидимі втрати, WebP із втратами дає вам частку розміру. У будь-якому випадку є налаштування WebP, яке перевершує PNG.

Підтримка браузера та програмного забезпечення

Це єдина реальна перевага PNG, і вона звужується. Кожен сучасний браузер підтримує WebP, включаючи Chrome, Firefox, Safari та Edge, тому у відкритому Інтернеті питання сумісності по суті вирішено. Прогалини існують в інших місцях: деякі старіші програми для настільних комп’ютерів, певні клієнти електронної пошти, старіші версії Office і застарілі платформи все ще відмовляються від WebP. Іншою пасткою є форми завантаження, оскільки багато хто приймає лише JPG і PNG і категорично відмовляється від файлу WebP.

Отже, чесним підсумком є те, що WebP безпечний для вашого веб-сайту та ризикований для файлів, які ви передаєте невідомим системам. PNG залишається універсальним запасним варіантом для всього, що виходить з вашого контролю.

Анімація: WebP також замінює GIF

Одна з можливостей PNG просто не вистачає, це анімація. Стандартний PNG містить один кадр, і хоча розширення APNG існує, підтримка завжди була непослідовною. Підтримує WebP оригінальна анімація з повною альфа-версією, створюючи файли, набагато менші за еквівалентний GIF, одночасно показуючи мільйони кольорів замість 256 GIF. Якщо ви обираєте між форматами для короткої циклічної графіки, WebP рішуче перевершує PNG і GIF.

Чому WebP прискорює веб-сайти

Вага сторінки подається безпосередньо в Найбільший малюнок вмісту, один із основних веб-показників Google і підтверджений сигнал рейтингу. Зображення, як правило, є найважчим елементом на сторінці, тому скорочення кожного з них на третину має вимірний вплив на час завантаження, показник LCP і показник відмов. Швидші сторінки також краще конвертуються, тому ефективність роботи оплачується вдвічі.

Практичний шаблон, який використовують більшість сайтів, є прогресивним: обслуговуйте WebP у браузерах, які його підтримують, і повертайтеся до PNG або JPG для решти. Сучасний HTML обробляє це автоматично за допомогою елемента зображення, і більшість систем керування вмістом і служб зображень роблять це за вас. Ви отримуєте виграш у швидкості, не порушуючи нічого для старих клієнтів.

Коли використовувати кожен формат

використання WebP для зображень веб-сайтів, особливо логотипів і піктограм із прозорістю, де менші файли означають швидші сторінки.
використання WebP коли вам потрібна прозорість плюс малий розмір, оскільки це єдиний поширений формат, який пропонує обидва.
використання PNG коли зображення має відкриватися в будь-якій програмі, включаючи старе програмне забезпечення та поштові клієнти.
використання PNG для форм завантаження та систем, які явно перераховують прийнятні формати та пропускають WebP.
використання PNG як ваш майстер архіву, оскільки універсальна підтримка має більше значення, ніж розмір файлу, який ви зберігаєте назавжди.

Як конвертувати PNG у WebP

Перетворення не потребує встановлення. Відкрийте наш конвертер, додайте свій PNG і виберіть опцію, яка зберігає прозорість, яка експортує WebP. Обробка виконується локально через HTML5 Canvas API, тому нічого не завантажується, і ви можете групувати кілька файлів одночасно. Прозоре тло залишається незмінним, а файл стає значно світлішим. Повне проходження знаходиться в Посібник із PNG у WebP.

А як щодо AVIF?

Варто знати для контексту: AVIF — це новий формат, який стискає навіть краще, ніж WebP, часто ще на 20 відсотків менше, а також підтримує прозорість і анімацію. Підтримка веб-переглядача зараз хороша, але трохи відстає від WebP, а підтримка програмного забезпечення все ще відстає. Для більшості веб-сайтів сьогодні WebP є прагматичним вибором із найкращим балансом економії та підтримки, а AVIF варто спостерігати, оскільки впровадження зростає. PNG залишається резервним варіантом для обох.

Вирок

WebP виграє в усіх технічних перевагах: менші файли, прозорість у режимах без втрат і втрат, анімація та повна підтримка сучасного браузера. PNG виграє в одній речі, яка все ще має значення, яка відкривається абсолютно всюди без сумнівів. Використовуйте WebP для свого веб-сайту та PNG для всього, що ви надсилаєте в невідоме, і обслуговуйте WebP із резервним PNG, коли вам потрібні обидва. Для зображення ширшого формату PNG проти JPG посібник обкладинки, де вміщуються фотографії.

Приклади реальних розмірів

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

А Логотип 500 на 500 пікселів із прозорістю: близько 45 КБ у форматі PNG-24, близько 30 КБ у форматі WebP без втрат і менше 12 КБ у вигляді WebP із втратами даних із збереженням альфа-каналу.
А зображення героя на всю ширину з м’якими тінями: часто 400 КБ або більше як PNG, приблизно 260 КБ як WebP без втрат і значно менше 100 КБ як WebP із втратами.
А Інтерфейс користувача набір іконок з двадцяти маленьких графічних зображень: весь набір може зменшитися з приблизно 200 КБ до 130 КБ без втрат, до будь-якого налаштування з втратами.

Помножте приклад героя на дюжину сторінок, і економія перетвориться на секунди часу завантаження при повільному з’єднанні, що є саме різницею, яку вимірює Core Web Vitals.

Перетворення наявної бібліотеки PNG

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

Яким би маршрутом ви не користувалися, зберігайте оригінальні файли PNG. Вони ваші господарі, і вони можуть вам знадобитися пізніше для системи, яка відхиляє WebP.

Поширені помилки WebP, яких слід уникати

Кілька пасток ловлять людей, які переходять на WebP:

Перетворення ваших архівних майстрів: конвертуйте копії для доставки та зберігайте оригінали PNG, оскільки підтримка WebP вужча у програмному забезпеченні для настільних ПК.
Використання WebP із втратами на текстовій графіці: Стиснення з втратами розмиває різкі літери так само, як це робить JPG. Використовуйте WebP без втрат для скріншотів і зображень із великою кількістю тексту.
Пропуск резервного варіанту: обслуговування WebP без альтернативи PNG або JPG порушує зображення для старих клієнтів і деяких контекстів електронної пошти.
Надсилання WebP для завантаження форм: багато хто приймає лише JPG і PNG і відразу відмовляється від файлу.

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

Як браузери насправді вибирають формат

Обслуговування двох форматів звучить складно, але механізм простий і автоматичний. Кожний браузер надсилає заголовок Accept з кожним запитом на зображення з переліком форматів, які він розуміє. Сервер або CDN зчитує цей заголовок і повертає WebP браузеру, який повідомляє про підтримку, або PNG тому, який не підтримує, з тієї самої URL-адреси. У HTML ви можете зробити те саме з елементом picture, спочатку вказавши джерело WebP, а другим – запасний PNG; браузер вибирає перший, який може прочитати, і ігнорує решту. У будь-якому випадку, жоден відвідувач ніколи не бачить зламаного зображення, і сучасні браузери спокійно отримують менший файл, тоді як старі отримують сумісний.

Часті запитання

Чи WebP кращий за PNG?

Технічно так. Файли WebP на 25-35 відсотків менші, зберігайте прозорість і додайте режими з втратами та анімацію, яких бракує PNG. PNG виграє лише на універсальній сумісності.

Чи підтримує WebP прозорість, як PNG?

Так, і далі. WebP зберігає альфа-канал як у режимах без втрат, так і в режимах із втратами, тоді як PNG пропонує лише прозорість зі стисненням без втрат.

Наскільки WebP менший за PNG?

Типово На 25-35 відсотків менше без втрат, і на 60-70 відсотків менше в режимі з втратами, але зберігає прозорість.

Чи всі браузери підтримують WebP?

Кожен сучасний браузер підтримує WebP, включаючи Chrome, Firefox, Safari та Edge. Деякі старі програми для настільних комп’ютерів і форми завантаження все ще відхиляють його.

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

WebP робить і те, і інше. PNG має прозорість, але не має надійної анімації, а GIF анімує, але обмежений 256 кольорами з грубою прозорістю.

WebP чи PNG краще для веб-сайту?

WebP, для швидкості. Менші файли покращують Largest Contentful Paint, сигнал рейтингу Core Web Vitals. Обслуговувати резервний PNG для старих клієнтів.

Мені використовувати WebP чи AVIF?

WebP, поки що. AVIF стискає приблизно на 20 відсотків краще, але має вужчу підтримку, тому WebP сьогодні є прагматичним балансом економії та сумісності.

Чи можу я завантажити файл WebP у форму?

Часто ні. Багато форм завантаження приймають лише JPG і PNG, тому конвертуйте в один із них, коли система перераховує прийнятні формати й пропускає WebP.

Чи варто мені конвертувати наявні файли PNG у WebP?

Конвертуйте копії для доставки, а не ваших майстрів. Зберігайте оригінальні PNG, оскільки підтримка WebP вужча в програмному забезпеченні для настільних ПК і формах завантаження.

Чи підходить WebP із втратами для скріншотів із текстом?

немає Стиснення з втратами розмиває різкі літери, точно так само, як це робить JPG. Використовуйте WebP без втрат для текстової графіки та скріншотів.

Чи потрібен мені резервний PNG із WebP?

Для максимальної безпеки, так. Усі сучасні браузери читають WebP, але старіші програми для настільних комп’ютерів, деякі клієнти електронної пошти та багато форм завантаження все ще не працюють.

Як браузер дізнається, чи завантажувати WebP чи PNG?

Через Заголовок Accept, який надсилається з кожним запитом, який містить список підтримуваних форматів. Сервери та CDN зчитують його та автоматично повертають резервний файл WebP або PNG.