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

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

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

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

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

Type=webp

Параметры: 

Пример:

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

 

 

 

Страница-источник на сайте falconspace.ru