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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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