Поддержка 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')

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

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

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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK