use Bitrix\Main\EventManager;
EventManager::getInstance()->addEventHandler("main", "OnAfterFileSave", array('MyClass', 'execute'));
EventManager::getInstance()->addEventHandler("main", "OnPhysicalFileDelete", array('MyClass', 'executeDelete'));
EventManager::getInstance()->addEventHandler("main", "OnAfterResizeImage", array('MyClass', 'executeResize'));

class MyClass
{

    function execute($arFields)
    {
        if (intval($arFields['HEIGHT']) > 0 && intval($arFields['WIDTH']) > 0) {
            if (strpos($arFields['CONTENT_TYPE'], "image/") !== false && strpos($arFields['CONTENT_TYPE'], "svg") === false) 
           {
               $strPath = \Cfile::GetFileSRC($arFields);
                //Make Webp
            }
        }
    }

    function executeDelete($arFields)
    {
       $strPath = \Cfile::GetFileSRC($arFields);
       //Delete webp
    }
    
    function executeResize($strPath)
    {
        $obFile = new \Bitrix\Main\IO\File(\Bitrix\Main\Application::getDocumentRoot() . $strPath);
        if (strpos($obFile->getContentType(), "image/") !== false && strpos($obFile->getContentType(), "svg") === false) {
           //Make Webp
        }
    }
}

http://mysite/news/1/
apache
nginx

enctype="multipart/form-data"
В аттрибут формы. Гуглится за 1.5 минуты.

Upd. Не увидел что вы полностью отправляете на JS.

Насчёт загрузки файлов не уверен что сработает serialize
Используйте FormData()