Вопрос по html5, image, srcset, responsive-design – Что-то не так с моим определением srcset, или текущая поддержка браузера просто слабая?

10

Я пытаюсь разобраться с новым атрибутом srcset в img. Я создал простую тестовую страницу, но поведение, которое я вижу в браузерах, удивляет.

Во-первых, вот тестовая страница:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test Page</title>
    <style type="text/css">
section.wrapper {
    width: 100%;
    text-align: center;
}

section.wrapper div {
    margin: 0 auto;
}

section.wrapper div img {
      width: 288px;
      height: 216px; 
}

@media (min-width: 30em) { }

@media (min-width: 40em) {
    section.wrapper div img {
          width: 576px;
          height: 432px; 
    }
}

@media (min-width: 48em) { }

@media (min-width: 64em) {
    section.wrapper div img {
      width: 720px;
      height: 540px; 
    }
}

@media (min-width: 72em) {
    section.wrapper div img {
      width: 960px;
      height: 720px; 
    }
}   

    </style>
</head>
<body>

<section class="wrapper">
<div class="imagecontainer">
<img src="images/image-720.jpg"
     srcset="images/image-1920.jpg 1920w,
             images/image-1440.jpg 1440w,
             images/image-1152.jpg 1152w,
             images/image-960.jpg 960w,
             images/image-840.jpg 840w,
             images/image-720.jpg 720w,
             images/image-576.jpg 576w,
             images/image-420.jpg 420w,
             images/image-288.jpg 288w,
             images/image-144.jpg 144w"
     sizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw"
     alt="Test" />
</div>
</section>

</body>
</html>

Я тестирую на Retina Macbook Pro и Retina iPod, с Chrome / 40.0.2214.115 и Firefox 35.0 (на Macbook Pro), а также с Chrome / 40.0.2214.73 и Safari / 600.1.4 (на iPod). Я включил поддержку srcset в Firefox. Я тестирую быстрое соединение.

Я пытаюсь увидеть, могут ли различные браузеры разумно получать изображение подходящего размера. Тем не менее, они не ведут себя так, как я ожидал.

Для браузеров iOS, я ожидаю, что они будут использовать запасное значение «100vw» из атрибута «sizes». Поскольку ширина области просмотра для iPod в портретном режиме составляет 320 пикселей, я ожидаю, что они будут использовать изображение размером 288 пикселей или 420 пикселей. Или, возможно, учитывая, что это устройство Retina, они будут запрашивать изображения размером 576 или 840 пикселей. Вместо этого и Safari, и Chrome запрашивают изображение 1920px.

Настольный браузер Firefox делает два запроса. Первый предназначен для изображения по умолчанию, указанного в атрибуте 'src'. Второй для изображения 1920px. Он всегда запрашивает самое большое изображение, независимо от текущего размера окна.

Desktop Chrome наиболее близок к тому, чтобы демонстрировать то, что я считаю правильным поведением, хотя это и странно. Если мой тестовый файл является локальным, он всегда захватывает изображение 1920px, независимо от размера области просмотра. Если я помещаю тестовый файл на удаленный сервер, он демонстрирует общее предпочтение для изображения размером 1152 пикселя (даже если изображение должно отображаться с разрешением 960 пикселей, что делает 1920 пикселей логическим выбором для устройства 2x). Если я очищаю кэш Chrome и изменяю размер окна, а затем перезагружаюсь, он иногда запрашивает изображения меньшего размера.

Если то, что я вижу, является ожидаемым поведением для этих браузеров, учитывая текущее состояние поддержки каждого браузера, тогда мне ясно, что я, вероятно, не должен предоставлять изображения с более высоким разрешением - лучше обслуживать изображение, которое выглядит меньше идеально подходит для 2х дисплеев, чем для передачи гигантского JPEG на мобильное устройство через возможно медленное соединение. И если Firefox всегда собирается использовать изображение по умолчанию, то я, вероятно, должен сделать его меньше, чем больше.

Есть ли проблема с моим кодом, который вызывает такое поведение? И если нет, то есть ли какие-либо современные рекомендации по использованию srcset, которые справляются с особенностями различных текущих реализаций, используя возможности этой функции, не вызывая загрузку слишком больших изображений?

Ваш Ответ

1   ответ
20

srcset Вы не можете предсказать выбранного кандидата.

Desktop ChromeНа самом деле Chrome запускает несколько очень хороших, но непредсказуемых алгоритмов, чтобы выбрать подходящего кандидата. Например, если он кэширован или, как вы сказали, локальный, он будет использовать самое большое изображение. Здесь все должно быть хорошо.

Настольный Firefox: Вы, кажется, проверяете с включенным srcset, но изображение выключено. srcset с дескриптором ширины и атрибутом размеров может быть включен, только если включены и srcset, и флаг изображения. Но я бы посоветовал вам тестировать с текущей FF ночью, потому что эта функция будет настроена на 38, и некоторые ошибки были исправлены. В противном случае вы получите то же поведение, что и с Safari для iOS. FF38 будет иметь желаемое поведение.

IOS: Chrome на iOS - это не Chrome. Браузер iOS не поддерживает srcset с дескриптором ширины, но поддерживает только дескриптор x. Еще хуже, если вы используете дескриптор ширины, iOS думает, что все кандидаты равны (1x) и загрузит первого кандидата из списка srcset.

Вот как вы можете справиться со всеми своими проблемами:

Используйте хороший полифилл:respimage или жеpicturefill сделать работуДаже если вы не используете художественное руководство, используйте следующий шаблон:

<picture> <source srcset="images/image-1920.jpg 1920w, images/image-1440.jpg 1440w, images/image-1152.jpg 1152w, images/image-960.jpg 960w, images/image-840.jpg 840w, images/image-720.jpg 720w, images/image-576.jpg 576w, images/image-420.jpg 420w, images/image-288.jpg 288w, images/image-144.jpg 144w" sizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw" /> <img /> </picture>

Если вы хотите иметь больше контроля, вы также можете использоватьlazySizes который дает вам автоматический расчет размера из коробки и в случае, если вы хотите ограничить соотношение пикселей для мобильных браузеров (например, 1,6x вместо 2x),Оптималс плагин.

Затем вы можете написать свою разметку так:

<picture> <source data-srcset="images/image-1920.jpg 1920w, images/image-1440.jpg 1440w, images/image-1152.jpg 1152w, images/image-960.jpg 960w, images/image-840.jpg 840w, images/image-720.jpg 720w, images/image-576.jpg 576w, images/image-420.jpg 420w, images/image-288.jpg 288w, images/image-144.jpg 144w" /> <img class="lazyload" data-sizes="auto" data-optimumx="1.6" /> </picture>

это не мой случай, но поиск проблемы с class = "img-responseive" в начальной загрузке с srcset. Обнаружил, что этоsizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw" решить мою проблему. Спасибо! equiman

Похожие вопросы