Оптимизация изображений: WebP для сайта на Битрикс

После очередной «просьбы» гугла в сервисе PageSpeed Insights использовать современные форматы изображений, я решил оптимизировать изображения на одном из сайтов на Битрикс, добавив вывод слайдов в формате WebP. Для решения данной задачи я выбрал вариант использования библиотеки GD, коим и хочу поделиться. Так как эта библиотека является расширением для PHP, необходимо было убедиться, подключена ли она. Создал в корне сайта простой файл php:

и получил массив с неутешительным ответом.

Сайт, о котором я веду речь, расположен на виртуальном хостинге, поэтому какие-либо действия с настройками сервера проводить нет возможности, только через тех. поддержку. Забегая вперед скажу, что мне очень повезло, так как после вопроса в саппорт хостинга Бегет, мне сказали, что есть возможность перенести данный аккаунт на сервер с подключенной библиотекой. Уточнили удобное время для переноса аккаунта и после окончания работ я увидел желанное true. На этом предысторию закончил, пишем функции и выводим изображения в формате WebP.

Для начала я написал функцию, местами подсмотрел :), для конвертирования изображений из png и jpg в webp. Где её размещать, дело лично разработчика, у меня в папку php_interface добавлена папка inc и в ней все мои функции, подключенные в init.php. На случай, если GD библиотека «слетит», сделал проверку. Функция очень проста, я в нее передаю два параметра, тип файла и путь:

Я использую так называемый «ресайз изображений на лету», поэтому дальнейшие манипуляции в файле result_modifier.php необходимого шаблона. На этом сайте изображения выводятся в теге picture с использованием медиа-запросов, поэтому режем на три размера, проверяем функцию, конвертируем. Пример взят из шаблона слайдера:

Выводим:

 

Всего комментариев - 1.

  1. Не увидел кеширования, по идеи всякий раз при обращении будет обработка картинки, будет здорово, если будет добавленно кеширование и когда картинка обработается то сохранится путь к ней в кеше, и при следующем запросе не будет вновь задействована процессора мощь, а взято все из кеша.
    А так спасибо за решение, перешел к Вам из твитера прочитал статью.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*
*

Нажимая кнопку «Отправить комментарий» я даю свое согласие на использование и обработку моих персональных данных в соответствии с ч. 1 ст. 9 ФЗ от 27.07.2006 г. № 152 «О персональных данных»