Какой способ выбрать сжатия картинки, чтоб работал вместе с 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
578
0

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

Артур Шевченко
Артур Шевченко
24 апреля 2022, 18:58
0
LazyLoad это js, к тому моменту как он начинает работать, все картинки уже сгенерированы. У себя я для тэга source тоже поставил lazyload и всё вроде как работает корректно.
    Shedko Denis
    Shedko Denis
    09 июня 2022, 22:04
    0
    Эм…
    Ширина 320 — старые телефоны, но да надо принимать в расчет (это и просто дешевые телефоны, но это клиенты).
    400, 470 — это что?

    Зачем себе так усложнять жизнь?
    Делаем 700 px (если в мобиле в один ряд, а на планшете в 2 ряда картинки) и забываем про все. Ширина 700 была выбрана путем создания многих сайтов и анализом ошибок конкурентов, когда те выбирали что-то вроде 500px и бутстрап калечил картинку (не на всю ширину показывал) на телефонах.

    <img src="image.jpg" loading="lazy" alt="..." />
    Решит все проблемы, и PageSpeed и реальную загрузку по тому же PageSpeed, результаты в «полях» — все равно пока картинка не видна — не грузится. А сервис webpagetest поможет понять как оно на мобиле все грузится.

    ИМХО, не раз видел реализацию через picture, но не разу не понимал чем она лучше loading=«lazy» (да давно понял что удобство для пауков и пользователей разные вещи. В этом случае пауки важнее)
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      2