Почему srcset не работает?
Итак, у меня есть этот код:
<html>
<head>
</head>
<body>
<img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt="">
</html>
Согласно коду, должно быть загружено разное изображение для разных размеров области просмотра. однако, когда я запускаю этот код на своем телефоне, он по-прежнему показывает large.jpg даже для 320 Вт (ширина области просмотра), который должен быть загружен маленький.
1 ответ
Согласно коду, должно быть загружено разное изображение для разных размеров области просмотра.
Вы неправильно поняли, как [srcset]
работает. [srcset]
позволяет предложить ряд различных источников для устройства и дать устройству возможность выбрать изображение, которое, вероятно, будет оптимальным для устройства.
Цель состоит в том, чтобы сэкономить пропускную способность, чтобы устройства обычно загружали самое большое изображение, которое могло бы уместиться на их экранах, хотя есть много других нюансов, которые я не собираюсь здесь раскрывать.
То, что устройства не собираются делать, это переключаться между различными изображениями, когда будет применяться другая точка останова. Это работа <picture>
элемент.