Почему Joomla не поддерживает формат webp? - Joomla 3.x: Общие вопросы

<picture>
	<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
	<source srcset="/images/menu/676--414@1x.webp 1x, /images/menu/676--414@2x.webp 2x" type="image/webp" media="(max-width: 414px)">
	<source srcset="/images/menu/676--768@1x.webp 1x, /images/menu/676--768@2x.webp 2x" type="image/webp" media="(max-width: 1200px)">
	<source srcset="/images/menu/676--340@1x.webp 1x, /images/menu/676--340@2x.webp 2x" type="image/webp">
	<source srcset="/images/menu/676--414@1x.jpg 1x, /images/menu/676--414@2x.jpg 2x" media="(max-width: 414px)">
	<source srcset="/images/menu/676--768@1x.jpg 1x, /images/menu/676--768@2x.jpg 2x" media="(max-width: 1200px)">
	<source srcset="/images/menu/676--340@1x.jpg 1x, /images/menu/676--340@2x.jpg 2x">
	<img class="lazy-loading-picture" src="/images/menu/676--340@1x.jpg" alt="">
</picture>

(function(imgs){

	if(imgs.length) {

		if ('IntersectionObserver' in window) {

			var options = {
				root: null,
				rootMargin: '0px 0px 200px 0px',
				threshold: 0
			};

			var callback = function(entries, observer) {

				Array.prototype.forEach.call(entries, function(entry){

					console.log(entry);

					if(entry.isIntersecting){

						observer.unobserve(entry.target);
						var source = entry.target.parentNode.querySelector('source');
						source.remove();

					}

				});

			};

			var observer = new IntersectionObserver(callback, options);

		}

		Array.prototype.forEach.call(imgs, function(el){

			var source = el.parentNode.querySelector('source');

			if ('IntersectionObserver' in window) {

				observer.observe(el);

			} else {

				el.parentNode.removeChild(source);

			}

		});

	}

})(document.querySelectorAll('.lazy-loading-picture'));

<?php
		jimport('joomla.form.formfield');
		$componentParams = JComponentHelper::getParams('com_imagerecycle');

        include_once(JPATH_ADMINISTRATOR . '/components/com_imagerecycle/classes/ioa.class.php');
        $ioa = new ioaphp($componentParams->get('api_key'), $componentParams->get('api_secret'));
        $return = $ioa->getAccountInfos();
        $percentQuota = 0;
        if ($return && (floatval($return->quota_allowed) > 0)) {
            $percentQuota = number_format(min(($return->quota_current / $return->quota_allowed), 1) * 100, 2);
        }
		
		$percentQuota = ceil($percentQuota);
		
		if ($percentQuota < 100)
		{
		echo '<div style="line-height: 14.2px;border-color:white !important;background:#e6e6e6;width: 100px;text-align: center;float:right;padding: 2px 10px 1px 10px;margin: 1px 0 0 0;font-size:11px;border:2px solid;border-radius:7px;"><div>'.$percentQuota.' %</div><div>Optimization quota</div></div>';
		}
		else
		{
		echo '<a href="../administrator/index.php?option=com_config&view=component&component=com_imagerecycle" onclick="window.open(\'https://www.imagerecycle.com/prices\', \'_blank\', \'\');"><div style="background:red;color:white;float:right;padding: 7px 0 6px 0;margin: 1px 0 0 0;font-size: 11px;border: 2px solid;border-radius: 7px;width: 125px;text-align: center;">Get optimization quota</div></a>';
		}

		echo '<a href="../administrator/index.php"><div style="border-radius: 7px;text-align: center;border-color:white !important;background:#ccc;color:#060606c7;float:right;margin: 1px 10px 0 0px;border: 2px solid;padding: 3px 8px 2px 8px;"><div style="background-image: url(https://nonano.ru/img/j.jpg);height: 26px;width: 26px;"></div></div></a>';
?>