Ресайз изображений битрикс (изменить размер)

=this.Name}
Задать вопрос
Часто встает задача уменьшить превью блока товаров, новостей, статей и т.д. вообщем обрезать фото под размеры шаблона
+ уменьшив размер изображения, автоматически уменьшается их вес и страница грузится быстрее.

Решить задачу можно с помощью ресайза - CFile::ResizeImageGet (стандартная функция битрикс).

Сразу рассмотрим доступные параметры:
  1. BX_RESIZE_IMAGE_EXACT – подгонка размера с сохранением пропорций под указанные параметры с обрезанием лишнего.
  2. BX_RESIZE_IMAGE_PROPORTIONAL – подгонка размера с сохранением пропорций. Размер ограничивается указанными параметрами.
  3. BX_RESIZE_IMAGE_PROPORTIONAL_ALT – подгонка размера с сохранением пропорций, за основу при этом берется максимальное значение из высоты/ширины. Размер также ограничивается указанными параметрами. Отлично подходит под обработку вертикальных картинок.

Возвращать ли массив с данными о размерах измененного изображения. Допустимые значения:

  1. false – нет.
  2. true – да.
1. Вариант - для реализации нам необходимо в нужном месте шаблона компонента, прописать:

<? 
$renderImage = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], Array("width" => НОВАЯ_ШИРИНА, "height" => НОВАЯ_ВЫСОТА), BX_RESIZE_IMAGE_EXACT, false); 
      echo '<img alt="'.$arItem["NAME"].'" src="'.$renderImage["src"].'" />'; 
?><br>
В итоге получится<br>
<? 
$renderImage = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], Array("width" => 150, "height" => 200), BX_RESIZE_IMAGE_EXACT, false); 
      echo '<img alt="'.$arItem["NAME"].'" src="'.$renderImage["src"].'" />'; 
?>
Либо в таком виде, как удобно)
<?$file = CFile::ResizeImageGet($arItem['PREVIEW_PICTURE'], array('width'=>250, 'height'=>300), BX_RESIZE_IMAGE_EXACT, true);   ?>
<!-- используем таким образом -->
<img
	class="preview_picture"
	src="<?=$file["src"]?>"
	width="<?=$file["width"]?>"
	height="<?=$file["height"]?>"
	alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
	title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
/>
2. Вариант - вроде как более удачный с кэшированием.
в шаблоне компонента создаем result_modifier.php 

foreach($arResult["ITEMS"] as $cell=>$arItem){
	if($arItem["PREVIEW_PICTURE"]['ID']){
		$file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'],array("width" => 170, "height" => 170), BX_RESIZE_IMAGE_EXACT, true);
		$arResult["ITEMS"][$cell]["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
		$arResult["ITEMS"][$cell]["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
		$arResult["ITEMS"][$cell]["PREVIEW_PICTURE"]['SRC'] = $file['src'];
	}
	/*кешируем*/
	if($file['src'])
      $file['src'] = \CUtil::GetAdditionalFileURL($file['src'], true);
      $arItem['PREVIEW_PICTURE'] = array_change_key_case($file, CASE_UPPER);
}

foreach($arResult["ITEMS"] as $cell=>$arItem){
	if($arItem["DETAIL_PICTURE"]['ID']){
		$file = CFile::ResizeImageGet($arItem["DETAIL_PICTURE"]['ID'],array("width" => 170, "height" => 170), BX_RESIZE_IMAGE_EXACT, true);
		$arResult["ITEMS"][$cell]["DETAIL_PICTURE"]['WIDTH'] = $file['width'];
		$arResult["ITEMS"][$cell]["DETAIL_PICTURE"]['HEIGHT'] = $file['height'];
		$arResult["ITEMS"][$cell]["DETAIL_PICTURE"]['SRC'] = $file['src'];
	}
	/*кешируем*/
	if($file['src'])
      $file['src'] = \CUtil::GetAdditionalFileURL($file['src'], true);
      $arItem['DETAIL_PICTURE'] = array_change_key_case($file, CASE_UPPER);
}

Тогда вызов изображения в самом шаблоне остается прежний 
<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>

Пример можно посмотреть в фото статьи, изначально фото выгрузились из 1С с размерами 1000px на 1000px, страница долго прогружалась,
большие фото искривили шаблон все поплыло по странице...
с помощью ресайза фото были уменьшены до размера 80px на 80px, а их вес уменьшился до 20кб.
Заказать услугу
Оформите заявку, мы свяжемся с вами в ближайшее время и ответим на все интересующие вопросы.