Блог

Использование формата WebP в сайтах на MODX

  • Евгений Ц.
  • Нет комментариев

Относительно новый формат изображений - WebP был разработан компанией Google в 2010 году в качестве универсального формата с улучшенной оптимизацией для веб изображений. Степень сжатия у него выше, чем у jpeg и png, он поддерживает альфа канал и может эффективно применяться при создании сайтов. Сейчас WebP поддерживается всеми основными браузерами (кроме Safari) : Chrome, Firefox, Edge. Это примерно 75% всех пользователей.

Для того, чтобы использовать WebP на сайте существует несколько путей:

1. Использовать тэг <picture>

<picture>
   <source srcset="images/picture.webp" type="image/webp">
   <img src="images/picture.jpg" alt="описание" />
</picture>

Этот способ имеет один недостаток - на готовом проекте придётся редактировать все ресурсы, заменяя <img> на <picture>. К тому же это не решает проблему фоновых изображений в CSS.

2. Подмена изображения на сервере.

Если браузер указывает в заголовке, что принимает формат image/webp, то проверяем существование одноименного файла с расширением .webp. Если файл существует, отдаём его вместо jpg или png.

Для этого .htaccess должен содержать:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Конвертация в WebP

Для конвертации можно например воспользоваться программой WebpConv, многочисленными онлайн-сервисами или написать небольшой плагин для MODX:

<?php
if ($modx->event->name!='OnFileManagerUpload') return;
$file_info=pathinfo($files['file']['name']);
$ext=strtolower($file_info['extension']);
$dir=MODX_BASE_PATH . $directory;
$file=$dir . $files['file']['name'];
if (($ext=="jpg" || $ext=="jpeg") && $files['file']['type']=='image/jpeg'){
    $img = imageCreateFromJpeg($file);
}

if ($ext=="png" && $files['file']['type']=='image/png'){
      $img = imageCreateFromPng($file);
}
imageWebp($img, $dir . $file_info['filename'] . '.' . 'webp');
imagedestroy($img);

Плагин устанавливается на событие OnFileManagerUpload и при загрузке изображений будет создавать сконвертированный WebP файл с тем же именем.

И всё бы вроде хорошо, если бы не одно маленькое "но", и называется оно phpthumbof. Никаких .webp он в своём кэше не создаёт. Самое простое решение, которое пришло в голову - дополнить сниппет pthumb. После строки $result = $pThumb->createThumbnail($input, $options); дописать:

$outFilePath=substr(MODX_BASE_PATH,0,-1).$result['src'];
$outFile=pathinfo($outFilePath);
$webpFile=$outFile['dirname'] . '/' . $outFile['filename'] . '.webp';
if (!file_exists($webpFile)){
    $ext=$outFile['extension'];
    if ($ext=="jpg" || $ext=="jpeg"){
	    $img = imageCreateFromJpeg($outFilePath);
    }
    if ($ext=="png"){
        $img = imageCreateFromPng($outFilePath);
    }
    imageWebp($img, $webpFile);
    imagedestroy($img);	
}

Чистим кэш MODX и phpthumbof (assets/components/phpthumbof/cache) и бежим проверять сайт в PageSpeed Insights :)

Комментарии ()

    Оставить комментарий

    *Ваш email адрес не будет опубликован.

    Введите сумму 9 + 1 =