Конвертация картинок в webp на битриксе

Алексей,
Конвертация картинок в webp на битриксе

Картинки в формате WebP "весят" значительно меньше, а сам формат уже поддерживается многими браузерами. К тому использовать его достаточно просто.

В компонентах необходимо добавить скрипт конвертации, который будет создавать копию картинки (png или jpeg) в формате webp. Пример такого скрипта:

function makeWebp ($src) {
	$newImgPath = false;

	if (function_exists('imagewebp')) {
		$src = ToLower($src);
		if (strpos($src, '.png')) {
			$newImg = imagecreatefrompng($_SERVER['DOCUMENT_ROOT'] . $src);
			$newImgPath = str_replace('.png', '.webp', $src);
		} elseif (strpos($src, '.jpg') !== false || strpos($src, '.jpeg') !== false) {
			$newImg = imagecreatefromjpeg($_SERVER['DOCUMENT_ROOT'] . $src);
			$newImgPath = str_replace(array('.jpg', '.jpeg'), '.webp', $src);
		}
		if ($newImg) {
			if (!file_exists($_SERVER['DOCUMENT_ROOT'] . $newImgPath)) {
				imagewebp($newImg, $_SERVER['DOCUMENT_ROOT'] . $newImgPath, 90);
			}
			imagedestroy($newImg);
		}
	}

	return $newImgPath;
}

Все просто, передаете в функцию относительный путь картинки в формате jpg или png, в ответе получаете путь до картинки в формате webp.

В реалиях битрикс это может выглядеть так (resul_modifier.php компонента списка новостей)

foreach ($arResult["ITEMS"] as $i => $arItem) {
	// resize image
	if ($arItem['PREVIEW_PICTURE']['SRC']) {
		$file = CFile::ResizeImageGet($arItem['PREVIEW_PICTURE'], array('width' => 605, 'height' => (605*0.6)), BX_RESIZE_IMAGE_PROPORTIONAL, true);
		$arResult["ITEMS"][$i]['PREVIEW_PICTURE']['SRC'] = $file['src'];
		$arResult["ITEMS"][$i]['PREVIEW_PICTURE']['SRC_WEBP'] = makeWebp($file['src']);
	}
}

Далее в шаблоне само изображение нужно вывести через тег picture, где один из источников будет картинка в формате webp

<picture>
    <?if ($arItem["PREVIEW_PICTURE"]["SRC_WEBP"]) :?>
        <source type="image/webp" srcset="<?=$arItem["PREVIEW_PICTURE"]["SRC_WEBP"]?>">
    <?endif;?>
    <img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>" />
</picture>

Единственный минус, теперь на хостинге будут хранится две картинки вместо одной.

Опубликовано 29 Августа 2019
готовый код, производительность, разработчику, костыли

Возврат к списку

Комментарии