Редактор кода W3Schools - Tryit

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Элемент picture</h2>

<p>Змініть розмір браузера, щоб побачити різні версії завантаження зображень з різними розмірами області перегляду. Браузер шукає перший елемент джерела, де медіа-запит відповідає ширині поточного вікна перегляду користувача, і витягує зображення, вказане в атрибуті srcset.</p>

<p>Елемент img потрібен в якості останнього дочірнього тега блоку оголошення зображення. Елемент img використовується для забезпечення зворотної сумісності для браузерів, які не підтримують елемент picture або якщо жоден з вихідних тегів не збігається.</p>

<p><strong>Примітка:</strong> Елемент picture не підтримуються в IE12 і більш ранніх версіях або Safari 9.0 і раніших версіях.</p>

</body>
</html>