Как использовать устройство img-соотношение пикселей, srcset, размеры в адаптивных изображениях для retina

Сегодня я играл с адаптивными изображениями и пытался убедиться, что изображения нужного размера загружаются и отображаются для следующих точек привязки: 480px, 900px, 1800px, 2400px.

Вот наценка: 

<img
 sizes="(max-width: 2400px) 100vw, 2400px"
 srcset="
  boat-480.jpg 480w,
  boat-900.jpg 900w,
  boat-1800.jpg 1800w,
  boat-2400.jpg 2400w"
 src="boat-2400.jpg"
 alt="This is a boat">
До сих пор мне удавалось заставить браузер загружать правильную версию изображения, так что при эмуляции экрана 480px в Chrome с соотношением пикселей 1 браузер загружает boat-480.jpg.

Однако, что я заметьте, что, хотя все это кажется хорошим, браузер также загружает boat-1800.jpg и на самом деле отображает это в представлении вместо boat-480.jpg.

Как ни странно, когда я тестировал это на Chrome на iOS, браузер фактически загрузил boat-2400.jpg, что еще больше беспокоит.

Любые идеи, почему это может происходить? Я что-то пропустил здесь? Я думаю, что мне не нужен атрибут sizes, потому что у меня есть изображение, установленное в 100vw во всех представлениях, но, возможно, есть что-то еще, чего мне не хватает здесь.

Если вам интересно, вы можете посмотреть страницу здесь :

Я очень ценю вашу помощь в этом деле.
1 7
css responsive-design retina-display

1 ответ:

[39]}1. Основы

Отношение устройство-пиксель

Отношение устройство-пиксель - это число пикселей устройства на пиксель CSS, которое относится к:

    Плотность пикселей устройства (число физических пикселей на дюйм)
  • ]}
  • уровень масштабирования браузера Таким образом, большая плотность пикселей и/или более высокий уровень масштабирования приводит к более высокому отношению устройство-пиксель.

srcset атрибут & x дескриптор

On <img> tag, дескриптор x в атрибуте srcset используется для определения отношения устройство-пиксель. Так:

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
  • Для отношения устройство-пиксель 1, Изображение image-1x.jpg будут использованы.
  • Для отношения устройство-Пиксель 2, Изображение image-2x.jpg будут использованы.
  • Для отношения устройство-пиксель 3, Изображение image-3x.jpg будут использованы.
  • для запасного варианта атрибут src (изображение.jpg) будет использоваться.

srcset атрибут & w дескриптор

Если вы хотите другое изображение на большом или меньшем видовом экране, дескриптор w в srcset и новый атрибут (sizes) вступают в игру: 

<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
Здесь упоминается, что ширина первого изображения равна 200px, второго изображения - 400px, а третьего изображения - 600px. Кроме того, если экран пользователя имеет ширину 150 CSS pixels, это означает следующее в терминах дескрипторов x: 
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 6x">

sizes атрибут

Фактическая реализация, где вы хотели бы получить изображение разного размера (разной высоты, ширины) на разных размерах экрана выполняется с помощью атрибута sizes наряду с дескриптором w атрибута srcset.

<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

Если ширина браузера равна 500 CSS pixels, изображение будет отображаться 250px широко (из-за 50vw). Теперь это эквивалентно указанию: 

<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">

Итак, для 1.5x дисплея image-2x.jpg будет загружен браузером, так как он дает соотношение устройство-пиксель 1.6x (что наиболее подходит для 1.5x дисплей).

2. Отвечая на ваш вопрос

Вы упомянули, что эмулировали480px CSS width screen.

Поскольку вы установили sizes в 100vw, это эквивалентно указанию: 

<img src="boat-2400.jpg" srcset="
     boat-480.jpg 1x,
     boat-900.jpg 1.88x,
     boat-1800.jpg 3.75x,
     boat-2400.jpg 5x">

Есть вероятность, что у вас есть 3x дисплей, и таким образом браузер загружает файл boat-1800.jpg.

Вопросы

Как ни странно, когда я тестировал это в Chrome на iOS, браузер фактически загрузил boat-2400.jpg, который является еще более тревожно.

Это будет связано с более высоким отношением устройств к пикселям вашего устройства iOS, которое, вероятно, будет около 5.

Я что-то пропустил?

Я так не думаю.

Я думаю, что мне не нужен атрибут размеров, потому что у меня есть изображение, установленное на 100vw во всех видах

Если вы хотите использовать дескриптор w, вам нужен атрибут sizes.

5