Заводим тег 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 - все по примеру :)