Какой способ выбрать сжатия картинки, чтоб работал вместе с lazy load

Здравствуйте, перебрал все варианты, ничего не подходит. Хотелось бы на экране 320px показывать картинки подгружаемые через lazy load, для 480px подгружать картинки на 480px.(под разные экраны, для лучшей оптимизации)

Что пробовал:

<img data-src="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=350`]]" class="lazy img-fluid text-center mx-auto d-flex px-5 px-sm-1" width="350" >
Картинки создаются кэшированные и загружаются сразу в консоле браузера что тормозит загрузку, тогда какой смысл lazy load?

При использовании этого метода, под разные экраны, картинки прогружаются сразу в папке кеша, опять не работает lazy load.
<img class="lazy img-fluid text-center mx-auto d-flex px-5 px-sm-1" 
src="img/1.gif"
data-src="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=470`]]"
data-srcset="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=400`]] 400w, 
[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=300`]] 300w" width="350">


При использовании этого метода, консоль прогружает картинки, в папке кеша, опять lazy load не срабатывает
<picture>
<source srcset="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=200`]]" media="(max-width: 200px)">
 <source srcset="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=300`]]" media="(max-width: 300px)">
 <source srcset="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=400`]]" media="(max-width: 400px)">
 <source srcset="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=470`]]">
<img data-scr="[[!phpthumbon? &input=`img/tovar/tovar.jpg` &options=`&w=470`]]" class="lazy img-fluid text-center mx-auto d-flex px-5 px-sm-1" width="350">
</picture>
Игорь
24 апреля 2022, 12:23
modx.pro
72
0

Комментарии: 1

Артур
24 апреля 2022, 18:58
0
LazyLoad это js, к тому моменту как он начинает работать, все картинки уже сгенерированы. У себя я для тэга source тоже поставил lazyload и всё вроде как работает корректно.
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1