CFile::ShowImage($img, $width, $height);

function webpImage($source, $quality = 100, $removeOld = false)
{
    if(strpos('http', $source) !== false) {
        //define scheme
        $scheme = CMain::IsHTTPS() ? "https" : "http"; // http
        //replace http://server with nothing
        $source = str_replace([$scheme . '://'. $_SERVER['HTTP_HOST']], [""], $source);

    }

    if(strpos('http', $source) === false) {
        $source = '/home/bitrix/www' . $source;
    }

    $dir = pathinfo($source, PATHINFO_DIRNAME);
    $name = pathinfo($source, PATHINFO_FILENAME);
    $destination = $dir . DIRECTORY_SEPARATOR . $name . '.webp';

    
    
    $info = getimagesize($source);
    $isAlpha = false;
    
    echo $info['mime'];
    if ($info['mime'] == 'image/jpeg'){
        $image = imagecreatefromjpeg($source);
        echo $source;
        var_dump($image);
    } elseif ($isAlpha = $info['mime'] == 'image/gif') {
        $image = imagecreatefromgif($source);
    } elseif ($isAlpha = $info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
    } else {
        return $source;
    }
    if ($isAlpha) {
        imagepalettetotruecolor($image);
        imagealphablending($image, true);
        imagesavealpha($image, true);
    }

    

    imagewebp($image, $destination, $quality);
    imagedestroy($image);


    if ($removeOld)
        unlink($source);

    return $destination;
}

function resizeAndConvertImageWebP(
    $width,
    $height,
    $density,
    $originalFilepath,
    $resizedFilepath) {
  $newWidth = $width * $density;
  $newHeight = $height * $density;

  $image = new Imagick($originalFilepath);
  $origImageDimens = $image->getImageGeometry();
  $origImgWidth = $origImageDimens['width'];
  $origImgHeight = $origImageDimens['height'];

  if($newWidth == 0) {
    $ratioOfHeight = $newHeight / $origImgHeight;
    $newWidth = $origImgWidth * $ratioOfHeight;
  }

  if($newHeight == 0) {
    $ratioOfWidth = $newWidth / $origImgWidth;
    $newHeight = $origImgHeight * $ratioOfWidth;
  }

  $widthRatios = $origImgWidth / $newWidth;
  $heightRatios = $origImgHeight / $newHeight;

  if($widthRatios <= $heightRatios) {
    $cropWidth = $origImgWidth;
    $cropHeight = $newWidth * $widthRatios;
  } else {
    $cropWidth = $newHeight * $heightRatios;
    $cropHeight = $origImgHeight;
  }

  $cropX = ($origImgWidth - $cropWidth) / 2;
  $cropY = ($origImgHeight - $cropHeight) / 2;

  $image->stripImage();
  $image->cropImage($cropWidth, $cropHeight, $cropX, $cropY);
  $image->resizeImage($newWidth, $newHeight, imagick::FILTER_LANCZOS, 0.9);
  $image->setImageFormat('webp');
  $image->setImageAlphaChannel(imagick::ALPHACHANNEL_ACTIVATE);
  $image->setBackgroundColor(new ImagickPixel('transparent'));
  $image->writeImage($resizedFilepath);
}

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$widthPreview = 300;
$heightPreview = 200;
$widthPreviewBig = 300*2;
$heightPreviewBig = 200*2;
foreach($arResult['ITEMS'] as $i => $arItem) {

        $file = CFile::ResizeImageGet($arItem['FIELDS']["DETAIL_PICTURE"]['ID'], array('width' => $widthPreviewBig, 'height' => $heightPreviewBig), BX_RESIZE_IMAGE_EXACT, true);
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["SRC"] = $file["src"];
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["WIDTH"] = $file["width"];
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["HEIGHT"] = $file["height"];

        $file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array('width' => $widthPreview, 'height' => $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["SRC"] = $file["src"];
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
}

$widthPreview = 200;
$heightPreview = 200;

if ($arResult["DETAIL_PICTURE"]) {
    $file = CFile::ResizeImageGet($arResult["DETAIL_PICTURE"], array('width'=> $widthPreview, 'height'=> $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
    $arResult["PREVIEW_PICTURE"]["SRC"] = $file["src"];
    $arResult["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
    $arResult["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
} elseif($arResult["PREVIEW_PICTURE"]) {
    $file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=> $widthPreview, 'height'=> $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
    $arResult["PREVIEW_PICTURE"]["SRC"] = $file["src"];
    $arResult["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
    $arResult["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
}

<img src="fake.jpg" data-src="real.jpg"/>
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>