Оптимизация изображений для Bitrix: конвертация в WebP и создание адаптивных тегов HTML

Скорость загрузки веб-страниц и качество изображений — ключевые факторы, влияющие на пользовательский опыт и SEO-оптимизацию. В этой статье мы рассмотрим, как преобразовать изображения в формат WebP для эффективного отображения на сайтах, разработанных с использованием CMS 1С-Битрикс, а также как динамически генерировать адаптивный HTML-код для этих изображений.

Используя возможности PHP и встроенные функции Bitrix, мы создадим код, который будет конвертировать изображения в формат WebP и генерировать соответствующие теги для их отображения на веб-странице, обеспечивая максимально быстрый и качественный опыт для пользователя.

Основные шаги, которые мы будем выполнять:

1. Реализуем функцию для конвертации изображений в формат WebP.
2. Разработаем функцию для генерации HTML-кода с поддержкой WebP.
3. Внедрим эти функции в шаблон Bitrix для отображения изображений до и после с использованием адаптивных тегов.

Полный код и описание работы:

1. Функция конвертации изображений в формат WebP

// Код в файле local/php_interface/init.php

// Преобразование изображений в формат WebP
function convertToWebP($source, $destination)
{
    // Получаем информацию о типе изображения
    $info = getimagesize($source);
    $image = null;

    // Открываем изображение в зависимости от его типа
    if ($info['mime'] === 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] === 'image/gif') {
        $image = imagecreatefromgif($source);
    } elseif ($info['mime'] === 'image/png') {
        $image = imagecreatefrompng($source);
    }

    // Если изображение не удалось открыть, возвращаем false
    if ($image === null) {
        return false;
    }

    // Преобразуем изображение в формат WebP
    $result = imagewebp($image, $destination);

    // Освобождаем память
    imagedestroy($image);

    // Возвращаем результат конвертации
    return $result;
}
            

Что делает эта функция:

• Мы начинаем с получения метаинформации о изображении с помощью функции getimagesize(), чтобы определить его тип (JPEG, PNG или GIF).
• Затем в зависимости от типа изображения используем соответствующую функцию для его открытия (например, imagecreatefromjpeg() для JPEG или imagecreatefrompng() для PNG).
• После успешного открытия изображения, оно сохраняется в формате WebP с помощью функции imagewebp().
• В конце освобождаем ресурсы, связанные с изображением, и возвращаем результат успешности операции.

2. Функция для генерации HTML-кода с поддержкой WebP

// Код в файле local/php_interface/init.php

// Генерация тега <picture> для адаптивных изображений
function generatePictureTag($imageItem)
{
    // Определяем пути к оригинальному изображению и его версии в WebP
    $originalImagePath = $_SERVER['DOCUMENT_ROOT'] . $imageItem;
    $webpImagePath = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $originalImagePath);

    // Конвертируем изображение в WebP
    if (convertToWebP($originalImagePath, $webpImagePath)) {
        // Путь к изображению WebP для вывода
        $webpImageUrl = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $imageItem);

        // Формируем HTML с тегом <picture>
        $html = '<picture>';
        $html .= '<source srcset="' . $webpImageUrl . '" type="image/webp">';
        $html .= '<img src="' . $imageItem . '" alt="" loading="lazy">';
        $html .= '</picture>';
    } else {
        // Если конвертация не удалась, выводим только оригинальное изображение
        $html = '<img src="' . $imageItem . '" alt="" loading="lazy">';
    }

    return $html;
}
            

Что делает эта функция:

• Функция принимает путь к исходному изображению как параметр.
• На основе пути генерирует путь к версии изображения в формате WebP.
• Если конвертация успешна, формирует HTML-код с использованием тега <picture>, который включает:
  • <source> для WebP-версии изображения.
  • <img> для оригинальной версии изображения (на случай, если браузер не поддерживает WebP).
• В случае неудачи конвертации возвращает только тег <img> с оригинальным изображением.

3. Внедрение в шаблон Bitrix

// Код в файле local/templates/template_name/components/bitrix/news.list/result/template.php
<? foreach ($arResult["ITEMS"] as $arItem): ?>

<div class="compare-tabs__panel">
    <div class="compare-images">
        <div class="compare-images__image">
            <?=generatePictureTag(CFile::GetPath($arItem['DISPLAY_PROPERTIES']['FOTO_BEFORE']['VALUE']))?>
        </div>
        <div class="compare-images__image">
            <?=generatePictureTag(CFile::GetPath($arItem['DISPLAY_PROPERTIES']['FOTO_AFTER']['VALUE']));?>
        </div>
    </div>
</div>

<? endforeach; ?>
            

Что происходит в этом фрагменте:

• Цикл foreach проходит по всем элементам из массива $arResult["ITEMS"], который содержит элементы новостей.
• Для каждого элемента генерируется два блока с изображениями, одно до изменений и другое — после, с помощью функции generatePictureTag().
• Это позволяет адаптивно выводить изображения с поддержкой WebP для улучшения производительности, а также использовать оригинальные изображения для браузеров, не поддерживающих WebP.

Заключение

Этот код позволяет эффективно конвертировать изображения в формат WebP, который является более сжимаемым и подходящим для быстрого загрузки в интернете. Мы реализовали адаптивный подход к отображению изображений с использованием тега <picture>, что позволяет улучшить производительность сайта и качество визуализации.

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