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 та значно прискорити завантаження сторінок.