Img srcset загрузка изображений в браузере при половинном размере изображения

(используя последнюю версию Firefox)

I have my imgwritten like so:

<body>
    <script>
        function imageLoaded(img) {
            console.log('the responsive image is loaded');
            img.className += ' loaded';
        }
    </script>

    <img class="backgroundImage"
         onload="imageLoaded(this)"
         src="assets/water_bg_1920.jpg"
         sizes="100vw"
         srcset="assets/water_bg_2560.jpg 2560w,
                 assets/water_bg_1920.jpg 1920w,
                 assets/water_bg_1024.jpg 1024w"/>
</body>

и мой css—

@keyframes fadeIn
  0%
    opacity: 0
  100%
    opacity: 1

.backgroundImage
  opacity: 0

.loaded
  opacity: 1
  animation: fadeIn 3s

Когда мой браузер на960px, он загружает 1920изображение. При 512pxэтом загружается 1024изображение. Что-нибудь выше, и он загружает 2560изображение.

Я очень смущен относительно того, как именно он решает загрузить эти изображения на этих ширинах, когда я sizesустановил100vw. Не должен ли он использовать 1024изображение, пока ширина браузера1024px, 1920изображение, когда ширина браузера от 1024px - 1920pxи 2560 img для чего-либо выше? Я что-то неправильно понял?

edit: поведение также происходит в последней версии Chrome, за исключением того, что в дополнение к оригинальной проблеме он загружает 2560изображение в дополнение к меньшему изображению— каждый раз!

edit2: последняя версия Safari ведет себя так же, как Firefox.

edit3: нашел скрипку, сделанную кем-то другим. он ведет себя так же ( не использует меньшее изображение, пока ширина браузера не составит 50% от размера изображения ). это ошибка? или предполагаемая функция srcset& sizes?

2 ответа

  1. Хорошо, хорошо решение, которое работало для меня ( который имеет примерно ту же поддержку, за исключением одной старой версии Safari), использовать <picture>тег так:

    <picture class="backgroundContainer">
        <source srcset="assets/water_bg_1024.jpg" media="(min-width: 0px) and (max-width:1024px)">
        <source srcset="assets/water_bg_1920.jpg" media="(min-width: 1025px) and (max-width: 1920px)">
        <source srcset="assets/water_bg_2560.jpg" media="(min-width: 1921px)">
        <img class="backgroundImage" onload="imageLoaded(this)" src="assets/water_bg_1920.jpg" alt="">
    </picture>
    

    Который загружает все изображения правильно в нужных точках останова на всех последних версиях браузеров.

  2. Я стал работать более здраво, с медиа-запросом и длиной, установленной на sizes. I see the img breakout to 2560w on my iPhone, but that’s because of pixel-density of retina. Для того, чтобы точки останова ударили более плотно, вам нужно будет добавить больше медиа-запросов.

    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>sizes</title>
    </head>
    
    <body>
      <img src="http://placehold.it/1024x576/000/fff?text=1024w" sizes="(min-width: 36em) 33.3vw, 100vw" srcset="http://placehold.it/2560x1280/00f/fc0?text=2560w 2560w, http://placehold.it/1920x1080/e00/fcf?text=1920w 1920w, http://placehold.it/1024x576/000/fff?text=1024w 1024w" />
    </body>
    
    </html>