формат

WebP: новий формат зображення для веб-сторінок

Сьогодні, швидкість завантаження веб-сайтів, Це стало одним з найважливіших налаштувань при оптимізації зображень для досягнення бажаного 100/100, який пропонує нам інструмент Google Page Speed ​​Insight.

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

Що таке WebP?

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

Без втрат зображення WebP вони на 26% менші за розміром, ніж PNG. Втрачені зображення WebP на 25-34% менше порівнянних зображень JPEG з еквівалентним індексом якості SSIM.

WebP Lossless підтримує прозорість (він же альфа-канал) вартістю всього 22% додаткових байтів. Для випадків, коли припустиме стиснення RGB із втратами, WebP Lossy також підтримує прозорість, зазвичай забезпечує розмір файлів у 3 рази менший порівняно з PNG.

Як працює WebP?

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

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

Подивимось приклад:

Зображення у форматі PNG вагою 53 КБ

Зображення у форматі WebP вагою 11 КБ

Зображення зліва, його формат - PNG і вона вже була стиснута та пристосована для Інтернету вагою 53 КБ. Ми перетворили це зображення у формат WebP, і ми можемо зрозуміти, що він зберігає ті самі розміри і не втратив роздільну здатність, але його вага є 11 КБ.

Використовуйте WebP Наші веб-сторінки допоможуть нам скоротити час завантаження та запропонують кращий досвід для наших користувачів.

На жаль, не всі браузери все ще пропонують підтримку цього нового формату, тому в багатьох випадках нам доведеться використовувати обидва формати.

Правильним способом це буде наступне:

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

Веб-підтримка

WebP підтримується в Браузер Google Chrome, Firefox, Edge, Opera та у багатьох інших програмних засобах та бібліотеках. розробники вони також додали підтримку різноманітних інструментів редагування зображень.

WebP включає полегшену бібліотеку кодування та декодування libwebp та інструменти командного рядка cwebp Y dwebp для перетворення зображень у формат WebP та з нього, а також інструменти для перегляду, змішування та анімації зображень WebP. Повний вихідний код доступний за адресою офіційна сторінка завантаження Google.

Інша альтернатива - завантаження попередньо скомпільованого cwebp інструмент перетворення для Linux, Windows або Mac OS X.