$img_src     = $this->image_category_path . '/' . (($category->category_image) ? $category->category_image : $this->noimage);
$img_alt     = (property_exists($category, 'img_alt') && !empty($category->img_alt) ? htmlspecialchars($category->img_alt) : $category->name);
$img_attribs = [
  'title'  => (property_exists($category, 'img_title') && !empty($category->img_title) ? htmlspecialchars($category->img_title) : $category->name),
  'class'  => 'img-fluid jshop_img',
  'width'  => $jshopConfig->image_category_width,
  'height' => $jshopConfig->image_category_height,
];

if ($lazy_loading_iterator > 4)
{
     // Not loading=lazy for first 5 images
     $img_attribs['loading'] = 'lazy';
}
$lazy_loading_iterator++;

echo HTMLHelper::image($img_src, $img_alt, $img_attribs);

UPDATE #__jshopping_categories SET `category_image` = REPLACE(`category_image`, '.jpg', '.webp');

use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Factory;

// в макетах компонента вместо этого
// можно использовать $this->getDocument()
Factory::getApplication()->getDocument()
    ->getWebAssetManager()->useScript('bootstrap.modal');

    $ModalData = [
        'selector' => 'AnySelectorModal', //modal id
        'params'   => [
            'title'      => 'Modal header text',
            'footer'     => 'Modal footer text', // or HTML
            'height'     => '400px', // height of the <iframe> containing the remote resource
            'width'      => '800px', // width of the <iframe> containing the remote resource
            'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
            'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
        ],
        'body' => 'Modal body content'
    ];
   
    echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData); 

use Joomla\CMS\Layout\LayoutHelper;

$this->getDocument()
    ->getWebAssetManager()->useScript('bootstrap.modal');

$ModalData = [
     'selector' => 'addNewColor',
          'params'   => [
               'title'      => 'Modal header text',
               'footer'     => 'Modal footer text',
               'height'     => '400px', // height of the <iframe> containing the remote resource
               'width'      => '800px', // width of the <iframe> containing the remote resource
               'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
               'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
               'modalCss' => 'modal-fullscreen',
          ],
          'body' => 'Modal body content'
];
   
echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData);