Поддержка Webp формата для оптимизации картинок

Создание картинок webp через менеджер ресурсов 

В системе есть следующие настройки (в /settings): 

• webpQuality - число от 0 до 100. Качество картинки при конвертации в webp формат. Если указано больше 0, то при загрузке картинок через менеджер ресурсов будут создаваться копии картинок в webp формате с тем же именем.  Если 0, то конвертация не будет произведена.
• webpLossy - если 1, то будет применяться формат с потерей качества (но сжатие будет очень сильным).
• imageFormatsForWebpContert - список расширений, для который будет срабатывать конвертация ресурсов в webp, по умолчанию - .jpg,.jpeg,.gif,.png,.tiff

Конвертация существующих картинок

Также есть внешнее действие по конвертации картинки в webp формат. 

Type=webp

Параметры: 

• sourcePath - исходный файл.
• destPath - конечный файл
• quality - от 0 до 100. Качество выходного файлла
• lossy - если 1, то сжатие с потерей качества. 

Пример:

select 'webp' type, '/uploads/4.jpg' sourcePath, '/uploads/_111.webp' destPath ,
     1 lossy, 10 quality 

Как выводить картинки на странице с webp

Для этого используем следующую разметку: 

<picture>
	<source srcset="opera.webp" type="image/webp" loading="lazy" alt="">
	<img src="opera.jpg" alt="The Oslo Opera House">
</picture>

Т.е. выводим картинку webp и дополнительную картинку jpg (на случай если браузер не поддерживает webp).

Функция [dbo].[rs_webpImage] для генерации такой разметки для определенного ResourceID: https://pastebin.com/cNfHJki2

Пример вызова функции: 

select [dbo].[rs_webpImage] (60, 1, 'alt text', 'class1', '200px', '100px')

Отображение webp на сайте 

Чтобы сайт корректно показывал webp картинки, необходимо сделать настройки в IIS: WebServer / MIME Types / Add / расширение .webp и тип image/webp

Детально: https://manage.accuwebhosting.com/knowledgebase/4818/How-to-Enable-WebP-MIME-Type-on-IIS-.html 

Дополнительные ссылки

Как указать множество картинок для разных разрешений

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Про использование webp в целом
https://pr-cy.ru/news/p/7417-kak-ispolzovat-webp-dlya-optimizatsii-kartinok-na-sayte