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

11k

Алексей,

29 августа 2019 12:10

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

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

function makeWebp ($src, $rewrite = false) {
	
	if ($src && function_exists('imagewebp')) {
		$newImgPath = str_ireplace(array('.jpg', '.jpeg', '.gif', '.png'), '.webp', $src);
		if (!file_exists($_SERVER['DOCUMENT_ROOT'].$newImgPath) || $rewrite) {
			$info = getimagesize($_SERVER['DOCUMENT_ROOT'].$src);
			if ($info !== false && ($type = $info[2])) {
				switch ($type) {
					case IMAGETYPE_JPEG:
						$newImg = imagecreatefromjpeg($_SERVER['DOCUMENT_ROOT'].$src);
						break;
					case IMAGETYPE_GIF:
						$newImg = imagecreatefromgif($_SERVER['DOCUMENT_ROOT'].$src);
						break;
					case IMAGETYPE_PNG:
						$newImg = imagecreatefrompng($_SERVER['DOCUMENT_ROOT'].$src);
						imagepalettetotruecolor($newImg);
						imagealphablending($newImg, true);
						imagesavealpha($newImg, true);
						break;
				}
				if ($newImg) {
					imagewebp($newImg, $_SERVER['DOCUMENT_ROOT'].$newImgPath, 90);
					imagedestroy($newImg);
				}
			}
		}

		if (file_exists($_SERVER['DOCUMENT_ROOT'].$newImgPath)) { // Файл мог не создаться по каким-либо причинам
			return $newImgPath;
		}
	}
	
	return false;
}

Далее все просто, передаете в функцию относительный путь картинки в формате 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>

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

Существует и более простое решение, которое не требует навыков программирования.
Готовый модуль OptiPic CDN – простое решение проблемы "Используйте современные форматы изображений" согласно рекомендациям Google Pagespeed Insights.
Он автоматически конвертирует изображения в современный формат Webp (для браузеров, которые поддерживают webp). А для браузеров, которые не поддерживают webp, OptiPic оптимизирует (сжимает) старые форматы png и jpeg.

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 29 августа 2019 | Обновлено 2 августа 2023