3

Подскажите, почему не корректно работают "отзывчивые" изображения, если использовать их через srcset и sizes в теге img.

Проблема в примере ниже: здесь всегда загружается изображение с именем файла mushroom_landscape.jpg независимо от разрешения экрана:

   <img 
    src="https://webref.ru/example/image/mushroom.jpg"
    srcset="https://webref.ru/example/image/mushroom_portrait.jpg 350w, https://webref.ru/example/image/mushroom_landscape.jpg 650w" 
    sizes="(max-width: 600px) 350px, (min-width: 601px) 650px"
    alt="test">

В атрибуте sizes я указал условия при которых должна меняться ширина изображения в зависимости от ширины экрана. Меняя размер экрана я вижу, что ширина слота меняется: когда ширина экрана меньше 600px - ширина слота - 350px, больше 601px - изображение впишится в ширину слота 650px.

В описании написано, что браузер должен самостоятельно выбрать максимально подходящие изображения, ссылки на которые указаны в атрибуте srcset. В моем случае, если ширина экрана меньше 600px ширина слота изображения должна стать 350px. Следовательно в этот слот браузер должен добавить изображение максимально близкое к этим размерам.

В атрибуте srcset я указал ссылку на картинку и ее размер 350w. Однако браузер игнорирует и не зависимо от размеров экрана ничего не меняет(остается изображение mushroom_landscape.jpg).

Почему? Что я делаю не так?(браузер Google Chrome, Safari, FireFox. КЭШ чистил)

А здесь работают корректно:

    <picture>
      <source media="(max-width: 600px)" srcset="https://webref.ru/example/image/mushroom_portrait.jpg">
      <source media="(min-width: 601)" srcset="https://webref.ru/example/image/mushroom_landscape.jpg">
      <img src="https://webref.ru/example/image/mushroom.jpg" alt="test">
    </picture>

https://jsfiddle.net/3xo2vr85/

1 ответ 1

1

Не знаю, написано ли такое в официальной документации, но в этой статье по теме есть замечание, что в зависимости от браузера изображение может подгружаться не на лету, а только после перезагрузки страницы.

У меня в FireFox 84.0.2 всё работает "на лету" - как Ваш пример, так и примеры из статьи. А в Хроме и Опере - только при перезагрузке страницы с определённым размером экрана. Так что, видимо, здесь проблема в кривой поддержке srcset у img со стороны браузеров.

2
  • Странное поведение. На macOS не работает нигде(хром, сафари, мозилла). На андроиде и ios - также нет. Попробовал на винде в хроме - работает. Не понятен посыл для чего вообще нужна эта опция "srcset sizes". Я думал, что это для мобилок у которых маленький экран, чтобы можно было правильно спозиционировать изображения и заодно меньше расходовать трафик. Но если это работает только на десктопной винде - смысла получается нУль))
    – Pavel
    26 янв 2021 в 15:09
  • @Pavel я думаю, не случайно поэтому в html5 появился тег picture - у него с поддержкой, вроде бы, порядок ) 26 янв 2021 в 15:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.