Как использовать разные картинки для разных разрешений в html?

Question

[Артур]

Всем привет, не могу разобраться.

В html есть картинка

<img src="img/tea-img.png" alt="tea" class="img-responsive tea-image"
                     srcset="/img/mob_tea-img.jpg 768w">

Как заставить подгружаться при разрешении ниже 768px в ширину, картинку в jpg, а если разрешение экрана больше, то подгружать картинку которая в png? picture не использую, поддержка не устраивает

Answer 1

[Роман]

let imgs = document.querySelectorAll('img');
    if (document.documentElement.clientWidth <= 768) {
      for (let img of[...imgs]) {
       img .src = document.querySelector('img').src.replace('jpg', 'png');
      }
    }

Но лучше адрес картинки брать из data и вставлять скриптом в src

Comments

[Артур]

Почему такой способ лучше?

[Роман]

Артур, а потому что все у нас в браузере загружается друг за другом, то есть когда скрипт начнёт работать картинки с адреса src уже загрузятся и только потом скрипт их изменит. А если src оставить пустыми картинки не загрузятся, и загрузить их можно будет скриптом, адрес взять из data.
Код выше найдёт все картинки и изменит им расширение. В рабочем варианте нужно уточнять картинки, допустим по классу.

[Артур]

Роман, я правильн опонимаю что если у юзера будет выключен js он не увидит ни одной картинки?
нужно смотреть в сторону ленивой загрузки?

[Роман]

Артур, lazyload тоже js =) в 2к17 не знаю кто выключает вообще js - он уже повсеместно на всех сайтах..
Я к тому что сначала загрузится жпг, а потом изменится на пнг. Ну ето будет на медленном интернете заметно, хотя если вы хотите вместо жпг отдавать больший по объему пнг файл, видимо вопроса интернета не стоит. Но все равно лучше src оставить пустым и потом скриптом просто вставить адрес из data и тогда сражу же загрузится нужная картинка - картинка нужного расширения.

[Артур]

Роман, Lazyload как я погуглил бывает много и бывают разные)
https://webformyself.com/otlozhennaya-zagruzka-izo...
из второго решения от Robin Osborne, думаю можно сделать супер гибкое решение под мои условия