/
webtheory
/
student
Обзор
Документация
Войти
/
webtheory
/
student
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
HTML/Images/picture.html
31 строка
1 KB
Jenya
Добавлен раздел CSS
10 июн 2026, 15:06
10 июн 2026, 15:06
1c049a6
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Picture</title> </head> <body> <picture> <source srcset="320.jpg" media="(max-width: 800px)"> <img src="640.jpg" alt="Абстрактное изображение"> </picture> <picture> <source srcset="cat.webp" type="image/webp"> <source srcset="cat.jpg" type="image/jpeg"> <img src="cat.jpg" alt="Белый котик смотрит в окно, на фоне коричневый котик тоже смотрит в окно"> </picture> <!--DrakesWeb советует Скопировать ссылку "DrakesWeb советует" 🛠 В своих проектах я часто использую комбинацию <img> для смысловых изображений, <picture> если нужна адаптивность, а background-image для иконок и фонов. 🛠 Когда работал с электронной библиотекой, использовал <picture> для обложек книг: WebP — по умолчанию, JPEG — как запасной вариант. Это экономило трафик и ускоряло загрузку страниц на мобильных.--> </body> </html>