Вопрос по srcset, image, html5, responsive-design – HTML5 srcset: смешивание синтаксиса x и w

7

Я пытаюсь найти способ предоставления изображений с высоким разрешением для клиентов iOS8, а также предоставления ресурсов адаптивных изображений для браузеров, поддерживающих синтаксис w. Согласно стандарту W3C должна быть возможность смешивать оба синтаксиса в одном атрибуте srcset:

<img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

(Источник:http://drafts.htmlwg.org/srcset/w3c-srcset/)

Однако, когда я запускаю этот пример в Chrome 38 (OS X, без высокого разрешения), который поддерживает синтаксис w, в других случаях браузер всегда загружает самое большое изображение (banner-HD.jpeg), независимо от размера области просмотра. Когда я добавлю

banner.jpeg 1x

в srcset Chrome использует это изображение, но все равно игнорирует изображения 100 Вт.

В моем случае я хотел бы указать уменьшенную версию изображения, а также 2x ресурсы для обоих:

<img src="default.png"
    srcset="small.png 480w, [email protected] 480w 2x, medium.png 1x, [email protected] 2x">

Похоже, что это работает на 2x устройствах iOS8, которые выбирают [email protected], потому что они не поддерживают синтаксис w. Однако Chrome, похоже, все равно не загружает и загружает medium.png независимо от размера области просмотра.

Я что-то не так делаю или это известная проблема в реализации Chrome srcset?

Ваш Ответ

2   ответа
3

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

<picture>
  <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
          media="(min-width: 1100px)" />
  <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
          media="(min-width: 720px)" />
  <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
          media="(min-width: 450px)" />
  <img src="http://placehold.it/500x600/eee/ddd" 
       alt="image with artdirection" />
</picture>

14
Не смотрите, что делают другие браузеры. Chrome - единственный, кто делает это правильно. (и FF 38+)Не смотрите на этот черновик. Это не так и не будет реализовано. Вот правильный:https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

Смешивание x с w в одном дескрипторе недопустимо, и браузер отбрасывает этих кандидатов, потому что w дескриптор всегда вычисляется в x дескриптор:

<!-- invalid  -->
<img srcset="a.jpg 1x 300w, b.jpg 2x 600w" />

Смешивание x с дескриптором w для разных кандидатов используется / анализируется браузером, но недопустимо и не имеет смысла в 99% всех случаев:

<!-- makes no sense:  -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" />

<!-- would make sense, because sizes is static in layoutpixel defined (i.e: 600 / 300 = 2x):  -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" />

Это означает, что если вы используете дескриптор w, который вы также автоматически оптимизируете для сетчатки, вам не нужно использовать дополнительный x-дескриптор. (то есть 480 Вт 2x = 960 Вт)

Кроме того, в большинстве случаев с использованием дескриптора w ваше изображение по умолчанию / отступление также должно быть определено в srcset:

<img src="small.png"
    srcset="small.png 480w, mediumg.png 640w, large.png 960w"
    sizes="100vw" />
пытатьсядыхание полифилл (дилетантская попытка рекламировать мой polyfill)
Что мне делать, если мое мобильное изображение 2х имеет тот же физический размер, что и мое изображение рабочего стола 1х? Я не могу определить их обоих вsrcset используя толькоw. Monstieur
О, это плохо. Реализация respimg с размерами на самом деле очень сложно на практике. Возможно, вы захотите проверить lazysizes width data-sizes = "auto". Пока вы экспериментируете, вы можете использовать версию * .dev.js, которая дает вам некоторые подсказки о вашей разметке в консоли. Очевидно, он делает это только в ff, т.е. и в сафари. На самом деле есть плохие учебники. Также имейте в виду, что дыхание не только «быстрее» - около 80% моего времени на кодирование я трачу на исправление ошибок и улучшение стандартной компиляции по сравнению с pf. Спасибо за использование ;-) alexander farkas
Спасибо за это разъяснение. Внезапно многие посты в блоге, которые я прочитал на эту тему, стали более понятными для меня, по-видимому, некоторые объяснили старую, а некоторые новую реализацию. Я уже попробовал ваш polyfill, и он мне очень понравился (особенно из-за интеллектуальной загрузки изображений). К сожалению, в этом случае я ограничен CMS, а также фиксированными спецификациями ширины изображения (атрибуты высоты и ширины). s2b
«Недопустимо смешивать дескрипторы ширины и дескрипторы плотности пикселей в одном атрибуте srcset».MDN B.F.

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