Иван

Заводим тег picture внутри которого указываем дефолтную картинку:

<picture>
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

В данном коде у нас везде просто загрузится "img/mobile.jpg".
Как это можно улучшить? Можно использовать прогрессивные файлы изображений такие как webp (почитать про них стоит отдельно, вкратце - они меньше весят при одинаковом качестве картинки).
Добавляем условие для показа новой картинки:

<picture>
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Здесь, если браузер поддерживает .webp будет загружена картинка: img/mobile.webp.
Допустим у нас есть брейкпоинт на десктоп при 768px где нам нужно показывать картинку более высокого качества (либо вообще другую). Код можно улучшить так:

<picture>
    <source media="(min-width:768px)" 
      srcset="img/desktop.webp"
      type="image/webp">
    <source media="(min-width:768px)"
      srcset="img/picture/desktop.jpg">
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

Тут мы добавили еще 2 условия: если окно шире 768px и браузер поддерживает webp - грузится desktop.webp, если не поддерживает то - desktop.jpg.
Данную конструкцию можно еще расширить. Например мы хотим чтобы на retina-дисплеях картинки показывались в более высоком качестве. Для этого у нас должны быть копии всех наших картинок но с увеличенным в 2 раза разрешением. Например, наши картинки будут именоваться как mobile@1x.jpg (260х260рх). плюс эти же картинки, но в 2 раза большем разрешении: mobile@2x.jpg (520х520рх). Загружать их, или нет будет решать браузер, на основании данных о плотности пикселей на экрана полученных от системы (это тоже отдельная тема для обсуждения, есть статьис названием что-то вроде "Пиксель на самом деле не пиксель". Точного названия не помню, но смысл в том, что на "так называемых" Retina-дисплеях при фактическом разрешении, например, 2500х1600px браузер будет "считать", что окно шириной 1250px). Короче для "ретинизации" код нужно изменить так:

<picture>
  <source media="(min-width:768px)" 
    srcset="img/desktop@1x.webp, img/webp/desktop@2x.webp 2x"
    type="image/webp">
  <source media="(min-width:768px)"
    srcset="img/picture/desktop@1x.jpg, img/picture/desktop@2x.jpg 2x">
  <source srcset="img/webp/mobile@1x.webp, img/webp/mobile@2x.webp 2x" 
    type="image/webp">
  <img class="image" 
    src="img/mobile@1x.jpg" 
    srcset="img/mobile@2x.jpg 2x"
    alt="Описание" width="260" height="260">
</picture>

Вся эта громадина читается сверху:
- первый <source>: если ширина экрана больше 768рх, браузер поддерживает webp и плотность пикселей 2x грузится desktop@2x.webp, если плотность пикселей 1х - desktop@1x.webp
- если webp не поддерживается, то второй <source> - все тоже самое для .jpg
- если экран уже 768px - третий <source>
- во всех остальных случаях и в случае если браузер не поддерживает загрузится обычный <img>.
Нужно понимать, что для такого подхода требуется иметь для одной картинки 4 файла и это только для одной ширины экрана:
mobile@1x.jpg, mobile@2x.jpg, mobile@1x.webp, mobile@2x.webp.
И еще столько же для desktop.
Вот как-то так, можно добавить еще брейкпоинт для tablet - все по примеру :)