Пример использования в 1С-Битрикс модуля abcwww.image

Для начала вам нужно подключить модуль


<?\Bitrix\Main\Loader::includeModule("abcwww.image")?>

Если вам нужно просто вывести изображение на сайте, и оно не нуждается в подгонке размеров под контентную область:


<?=\Bitrix\Abcwww\Image::getPicture("/example/abcwww-image/images/pc.jpg")?>

Если вы знаете что клиент может подгружать на проект огромные изображения, без заморочек подгонки под контент (как обычно, ему нужно все автоматически), то можно задать параметры для уменьшения размеров, например по ширине:


<?=\Bitrix\Abcwww\Image::getPicture("/example/abcwww-image/images/pc.jpg", [
    "W" => 768,
])?>

Если вам нужно ограничить размеры изображения, вывести для десктопа одно изображение, а для телефона другое с поддержкой двойной плотности экрана. Также указать alt и CSS-класс изображению и вдобавок сделать ленивую загрузку:


<?=\Bitrix\Abcwww\Image::getPicture("/example/abcwww-image/images/pc.jpg", [
    "R" => [
        [
            "I" => "/example/abcwww-image/images/phone.jpg",
            "W" => 768,
            "M" => "(max-width: 767px)",
            "D" => [2],
        ],
    ],
    "W" => 1920,
    "A" => [
        "alt" => "Пример использования abcwww.image",
        "class" => "my-class",
        "loading" => "lazy",
    ],
])?>

Если вы хотите добавить к предыдущему примеру микроразметку schema.org/ImageObject, то код будет выглядеть так:


<?=\Bitrix\Abcwww\Image::getPicture("/example/abcwww-image/images/pc.jpg", [
    "R" => [
        [
            "I" => "/example/abcwww-image/images/phone.jpg",
            "W" => 768,
            "M" => "(max-width: 767px)",
            "D" => [2],
        ],
    ],
    "W" => 1920,
    "A" => [
        "alt" => "Пример использования abcwww.image",
        "class" => "my-class",
        "loading" => "lazy",
    ],
    "S" => [
        "N" => "Пример использования abcwww.image",
        "D" => "Демонстрация возможностей модуля abcwww.image",
    ],
])?>

Модуль для CMS 1С-Битрикс находится по ссылке marketplace.1c-bitrix.ru