Почему 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> элемент.

Другие вопросы по тегам