Webp - Конвертер изображений в современный формат «на лету»

Преимущества модуля:

• Не требует сложной настройки и работает сразу после активации

• Конвертирует изображения «на лету»

• Поддерживает lazyload-изображения (есть возможность задать список собственных атрибутов со ссылками на изображения)

• Конвертирует, в том числе, изображения в backgound/background-image, прописанные в html-коде страницы

• Работает в режиме композита

• Поддерживает внешние CDN (например, Selectel)

• Возвращает оригинальные изображения для браузеров без поддержки .webp
  

• Есть возможность отключить модуль на определенных доменах, разделах или страницах

• Поддерживает srcset

Webp - это современный формат изображений, созданный специально для web-ресурсов. Основное преимущество этого формата - меньший вес файла.

Пример:

Гугл официально заявляет, что использование изображений современных форматов (.webp и других) ускоряет загрузку сайта и оказывает положительное влияние на ранжирование сайта в поисковой выдаче. При сканировании сайта инструментом Google Page Speed Insight гугл активно предлагает улучшение “Используйте современные форматы изображений”:

Степень необходимости внедрения современных форматов изображений на своём сайте вы можете узнать, используя инструмент Google Page Speed Insight.

-------------------------------------------------------------------

Ещё полезные модули для ускорения сайта:

Для решения проблемы «Отложите загрузку скрытых изображений» я написал модуль LazyLoad PRO - Отложенная загрузка изображений, видео и iframe в 1 клик, он полностью совместим с модулем Webp - Конвертер изображений в современный формат «на лету».

Если вам требуется решить проблему «Устраните ресурсы, блокирующие отображение», вам может быть интересен другой мой модуль: Предзагрузчик ресурсов

Для решения проблем с уменьшением размера кода HTML, JS, CSS вы можете использовать модуль Минификация HTML/JS/CSS

• Удаление устаревших изображений (оригиналы которых перестали существовать) производится агентом с периодичностью 1 раз в сутки.

• Модуль работает только с изображениями в html-коде страницы (в тегах <img>, стилевых атрибутах background и background-image, а также атрибутах lazyload - data-src и т.п.). Изображения прописанные в .js\.css файлах не конвертируются.

• Поддержка старых браузеров реализована следующим образом: при загрузке страницы скрипт на JS проверяет поддерживает ли браузер формат .webp и если не поддерживает, то подменяет ссылки изображений на оригинальные.

if(\Bitrix\Main\Loader::includeModule("delight.webpconverter")){
    $originalFilePath = "/upload/path_to_file/file_name.jpg";
    $destinationFilePath = DelightWebpConverter::ConvertImage($originalFilePath, $originalFilePath.".webp");
}

if(\Bitrix\Main\Loader::includeModule("delight.webpconverter")){
    $originalFilePath = "https://cdn.domain.ru/upload/path_to_file/file_name.jpg";
    $prepareFilePath = DelightWebpConverter::CONVERTED_IMAGES_FOLDER . str_replace(array("http://", "https://", "//"), "/", $originalFilePath . '.webp');
    $destinationFilePath = DelightWebpConverter::ConvertImage($originalFilePath, $prepareFilePath);
}

if(\Bitrix\Main\Loader::includeModule('delight.webpconverter')){
    \DelightWebpConverter::DelightWebpOnEndBufferContentHandler($content);
}

<picture>
   <? 
   $originalFilePath = "/upload/path_to_file/file_name.jpg";
   if(\Bitrix\Main\Loader::includeModule("delight.webpconverter")){
      $destinationFilePath = DelightWebpConverter::ConvertImage($originalFilePath, $originalFilePath.".webp");
      if($destinationFilePath){
         // Webp-изображение должно быть определено раньше .jpg/.png
         ?><source type="image/webp" srcset="<?=str_replace(" ","%20",$destinationFilePath)?>"><?
      }
   } ?>
   <source type="<?=mime_content_type($originalFilePath)?>" srcset="<?=str_replace(" ","%20",$originalFilePath)?>">
   <img src="<?=$originalFilePath?>" alt="">
</picture>