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

Для прикладу порівняємо розміри оброблених зображень у форматі JPG та WebP:

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

Показуйте зображення в нових форматах


Ви створили вебсайт, по максимуму його оптимізували, але в сервісі PageSpeed Insights ви отримуєте помилку:

Показуйте зображення в нових форматах
Формати зображень WebP і AVIF часто стискаються краще, ніж PNG чи JPEG. Тому вони швидше завантажуються й використовують менше даних.

Читайте далі статтю і ви дізнаєтеся як створити та відобразити зображення у форматі WebP на PHP та методи відображення їх на вебсайті.

Як створювати WebP?


Одним зі способів створення зображень у форматі WebP є використання бібліотеки Imagick модуля PHP. Більш детально можна ознайомитися: Встановлення бібліотеки для роботи із зображеннями Imagick в PHP. Гарною новиною є те, що бібліотека Imagick встановлена майже на всіх хостингах, тому ви зможете без проблем використовувати продемонстровану функцію створення зображення WebP на PHP:
function webp_generation($source, $destination, $width, $height) {
$iMagick = new Imagick($source);
$iMagick->setImageResolution(72, 72);
$iMagick->resampleImage(72, 72, Imagick::FILTER_UNDEFINED, 1);
$geometry = $iMagick->getImageGeometry();
if ($geometry['width'] > $width) {
$iMagick->scaleImage($width, 0);
$geometry = $iMagick->getImageGeometry();
}
if ($geometry['height'] > $height) {
$iMagick->scaleImage(0, $height);
}
$iMagick->setImageCompression(Imagick::COMPRESSION_JPEG);
$iMagick->setImageCompressionQuality(75);
$iMagick->setImageFormat('webp');
$iMagick->stripImage();
$iMagick->writeImage($destination);
$iMagick->clear();
$iMagick->destroy();
}
Використовувати функцію webp_generation дуже просто, необхідно додати її до вашого коду і виконати, вказавши шлях до зображення, шлях для нового зображення, ширину та висоту:
webp_generation($_SERVER['DOCUMENT_ROOT'].'/mario.png', $_SERVER['DOCUMENT_ROOT'].'/new.webp', 1920, 1080);

Як виводити зображення?


Мінус формату в тому, що він ще не підтримується всіма браузерами.

Наприклад, Google Chrome повноцінно підтримує Webp зображення, а Safari ні. Для того, щоб показати зображення всім користувачам незалежно від веббраузера, необхідно використати тег <picture>:
<picture>
<source srcset="/image.webp" type="image/webp">
<img src="/image.jpg" alt="description" />
</picture>
За допомогою тега <picture> ми створюємо можливість веббраузеру зробити вибір між підтримуваними форматами. Веббраузер розгляне кожен із дочірніх елементів <source> і вибере один, що відповідає кращому збігу. Якщо збігів серед елементів <source> не знайдено, то буде обраний файл, вказаний атрибутом src елемента <img>.

Зображення у background-image


У багатьох плагінах слайдів зображення вказується як елемент фону властивістю background-image. Простих рішень відображення підтримуваних форматів у цьому випадку немає, тому потрібно скористатися бібліотекою Modernizr. Виберіть webp у списку опцій та скомпілюйте свою версію бібліотеки натиснувши build.

Під'єднайте скрипт до вебсайту. Тепер у класі html тега буде зображатися чи підтримує браузер цю технологію чи ні.
<html class="webp webp-alpha webp-animation webp-lossless" data-lt-installed="true">

Клас webp можна використовувати в CSS, щоб задати background-image в потрібному форматі. Якщо браузер не підтримує технологію, буде відображатися no-webp, наприклад:
body{background-image:url('/image.webp')}
.no-webp body{background-image:url('/image.jpg')}

Cтворення елементу <picture>


Опишемо функцію, яка перевіряє існування файлу у форматі webP з подальшим виводом результату: якщо зображення існує - виводимо елемент <picture>, інакше - тег img:
function create_picture($file_name, $alt) {
if (!file_exists($_SERVER['DOCUMENT_ROOT'].$file_name.'.jpg')) return false;
$jpgWrapper = '<img src="'.$file_name.'.jpg" alt="'.$alt.'" />';
$webpWrapper = file_exists($_SERVER['DOCUMENT_ROOT'].$file_name.'.webp') ? '<source srcset="'.$file_name.'.webp" type="image/webp">' : '';
return empty($webpWrapper) ? $jpgWrapper : '<picture>'.$webpWrapper.$jpgWrapper.'</picture>';
}

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