Тег picture

Графика.

	<div class="reason__img-box  reason__img-box--city">
		<a href="#">
			<picture>
				<source type="image/webp" media="(min-width: 1200px)" srcset="img/city-desktop.webp 1x,
				img/city-desktop@2x.webp 2x">
				<source type="image/webp" media="(min-width: 768px)"
					srcset="img/city-tablet.webp 1x, img/city-tablet@2x.webp  2x">
				<source type="image/webp" srcset="img/city-mobile.webp 1x, img/city-mobile@2x.webp 2x">
				<source media="(min-width: 1200px)" srcset="img/city-desktop.jpg 1x, img/city-desktop@2x.jpg 2x">
				<source media="(min-width: 768px)" srcset="img/city-tablet.jpg 1x, img/city-tablet@2x.jpg 2x">
				<img src="img/city-mobile.jpg" srcset="img/city-mobile@2x.jpg 2x" alt="Улица Седоны" width="320"
					height="256">
			</picture>
		</a>

		<li class="main-nav-js__item ">
			<a class="main-nav-js__logo main-nav-js__width" href="index.html">
				<picture>
					<source media="(min-width: 1200px)" srcset="img/svg/logotype-desktop.svg">
					<source media="(min-width: 768px)" srcset="img/svg/logotype-tablet.svg">
					<img class="main-nav-js__img" src=" img/svg/logotype-mobile.svg" alt="Логотип Седоны">
				</picture>
			</a>
		</li>

	</div>