Уменьшение размера изображений является, пожалуй, первым делом, которое нужно сделать для увеличения скорости загрузки сайта. Скорость загрузки сайта напрямую влияет на его позиции в поисковой системе. 1С Битрикс имеет встроенные инструменты для оптимизации изображений.
При использовании метода сжатия достаточно один раз загрузить страницу с ним, при этом сервер выполнит оптимизацию изображения в соответствии с заданными параметрами и сохранит его в кэш, чтобы в дальнейшем использовать кешированные изображения вместо необжатых файлов.
Использование метода сжатия изображений
<?$renderImg = CFile::ResizeImageGet("ID_КАРТИНКИ", Array("width" => "НОВАЯ_ШИРИНА", "height" => "НОВАЯ ВЫСОТА"), BX_RESIZE_IMAGE_PROPORTIONAL, false); ?>
<img src="<?=$renderImg["src"]?>" alt="Описание картинки"/>
Объявляем переменную renderImg и передаем ей результат работы функции сжатия ResizeImageGet. В качестве параметров передаем функции ID картинки, массив с новыми размерами изображения и тип масштабирования.
Результатом работы функции будет готовая ссылка на кешированную версию исходного изображения, все что нам остается - вставить $renderImg["src"] (путь к картинке) в тег img (ниже будет несколько примеров использования).
Вместо "ID_КАРТИНКИ" может быть подставлено любое значение, например:
- $arResult["PREVIEW_PICTURE"]
- $arResult["DETAIL_PICTURE"]
- $FILE = CFile::GetFileArray( $arResult["DISPLAY_PROPERTIES"]["КОД_СВОЙСТВА"]["VALUE"] );
Типы масштабирования
Лично я достаточно часто использую третий метод изменения размеров, он не обрезает картинку и почти никогда не портит её качество.
- BX_RESIZE_IMAGE_EXACT - масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее;
- BX_RESIZE_IMAGE_PROPORTIONAL - масштабирует с сохранением пропорций, размер ограничивается $arSize;
- BX_RESIZE_IMAGE_PROPORTIONAL_ALT - масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
Примеры использования
<?
//обрезаем картинку анонса новости
$renderImg = CFile::ResizeImageGet($arResult["PREVIEW_PICTURE"], Array("width" => 300, "height" => 200), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, false); ?>
<img src="<?=$renderImg["src"]?>" alt="<?=$arResult["NAME"]?>"/>
<?
//обрезаем картинку свойства новости и вставляем её в background
$FILE = CFile::GetFileArray($arResult["DISPLAY_PROPERTIES"]["ATT_IMG"]["VALUE"]);
$renderImg = CFile::ResizeImageGet($FILE , Array("width" => 300, "height" => 200), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, false); ?>
<div style="background: url('<?=$renderImg["src"]?>')"></div>
В итоге уменьшенные картинки попадут в папку /upload/resize_cache/путь и при повторных вызовах метод ResizeImageGet будет сразу возвращать путь к уменьшенной версии изображения.
Для достижения еще большей скорости загрузки можно сконвертировать все изображения (в том числе и закешированные уменьшенные версии) в формат WebP, о том как это сделать читайте в нашей статье.
