Битрикс: Автоматическая конвертация в webP и вывод изображений в шаблоне сайта

Кроссбраузерное использование webp

В данный момент формат webp поддерживают не все версии safari. Но есть кроссбраузерный способ использовать webp

<picture class="b_426">
	<source srcset="<?=getWebP($from)?> 1x, <?=getWebP($fromRetina)?>  2x" type="image/webp">
	<source srcset="<?=$from?> 1x, <?=$fromRetina?>  2x" type="image/jpeg">
	<img title="<?=$name?>" src="<?=getWebP($small)?>">
</picture>

Как на php определить, что браузер поддерживает webp

Но мы можем воспользоваться более простым методом. Он несколько проще, потому что позволяет использовать webp в качестве фонового изображения

/* Проверяем поддержку webp */
global $WEBP;
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos($_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false )
	$WEBP = true; // webp поддерживается
else
	$WEBP = false; // webp не поддерживается

Простой, без мук способ конвертации jpg => webp

function getWebP($src){//Определяем нужно ли добавлять union к массовому запросу
    if(!$src){
        return false;
    }

    $source = $_SERVER['DOCUMENT_ROOT'].$src;
    $destination = $source . '.webp';

    if (!file_exists($destination)) {
        //Максимум, фото расплывается
        //exec("cwebp -q 0 ".$from." -o ".$to." ");

        //Нормал, хорошее качество с серьезным сжатием
        //cwebp -q 80 source.png -o destination.webp
        exec("convert -colorspace RGB ".$src." ".$destination . " ");
        $src = $src.'.webp';
    }else{
        $src = $src.'.webp';
    }

    return $src;
}

$from    =   "1.jpg";
$to   =   "1.jpg.webp";

Если конвертация не происходит, то вам нужно либо самому, либо через хостера установить утилиту libwebp

//CentOS 6
sudo apt-get install webp

//CentOS 7
sudo yum install libwebp-tools

Bash для автоматической конвертации файлов в webp в директории

#!/bin/bash

# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;

# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
  cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;

Bash скрипт взят отсюда

Так же libwebp можно взять отсюда

Установка серверных библиотек ImageMagickk

Устанавливаем Development Tools

yum groupinstall "Development Tools"  -y

Устанавливаем php-pear, php-devel и gcc пакеты для компиляции imagick PHP расширения

yum install php-pear php-devel gcc

Устанавливаем ImageMagick

yum install ImageMagick
yum install ImageMagick-devel
pecl install Imagick

Если все хорошо, то вы увидите, примерно, следующее:

Installing '/usr/include/php/ext/imagick/php_imagick_shared.h'
Installing '/usr/lib64/php/modules/imagick.so'
install ok: channel://pecl.php.net/imagick-3.4.4
configuration option "php_ini" is not set to php.ini location
You should add "extension=imagick.so" to php.ini

Проверить успешность установки можно так:

convert --version

Включаем расширение imagick в php.ini

; When the extension library to load is not located in the default extension
; directory, You may specify an absolute path to the library file:
;
;   extension=/path/to/extension/mysqli.so
;
; Note : The syntax used in previous PHP versions ('extension=<ext>.so' and
; 'extension='php_<ext>.dll') is supported for legacy reasons and may be
; deprecated in a future PHP major version. So, when it is possible, please
; move to the new ('extension=<ext>) syntax.
extension=imagick.so

Можем перезагрузить apache, можем этого не делать (у меня заработало и так)

systemctl reload httpd

Статья на тему Install ImageMagick in Centos7

Установка системных библиотек

Ставим композер через ssh

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Ставим библиотеку WebP Convert. Найти ее можно здесь

composer require rosell-dk/webp-convert

Используем в Битрикс

В init.php добавляем

require($_SERVER['DOCUMENT_ROOT'].'/local/libs/init/webP.php');

Листинг файла webP.php

require_once ($_SERVER['DOCUMENT_ROOT'].'/vendor/autoload.php');

use WebPConvert\WebPConvert;
use WebPConvert\Convert\Converters\Stack;

class aWebP
{
    public function __construct() {

    }

    public function getWebP($src){//Определяем нужно ли добавлять union к массовому запросу
        if(!$src){
            return false;
        }

        $source = $_SERVER['DOCUMENT_ROOT'].$src;
        $destination = $source . '.webp';

        $options = [
            'fail' => 'original',     // If failure, serve the original image (source). Other options include 'throw', '404' and 'report'
            //'show-report' => true,  // Generates a report instead of serving an image
            'serve-image' => [
                'headers' => [
                    'cache-control' => true,
                    'vary-accept' => true,
                    // other headers can be toggled...
                ],
                'cache-control-header' => 'max-age=2',
            ],
            'converters' => [
                'cwebp', 'vips', 'imagick', 'gmagick', 'imagemagick', 'graphicsmagick', 'wpc', 'ewww', 'gd'
            ],
        ];

        if (!file_exists($destination)) {
            WebPConvert::convert($source, $destination, $options);
            $src = $src.'.webp';
        }else{
            $src = $src.'.webp';
        }

        return $src;
    }
}

Использование в шаблоне

$aWebP = new aWebP;
echo $aWebP->getWebP($imgUrl);

Теги: 1С Битриксphpseo