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

сегодня я играл с отзывчивыми изображениями и пытался убедиться, что изображения нужного размера загружаются и отображаются для следующих точек привязки: 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 экран хром С соотношение пикселей 1 загрузка браузера boat-480.jpg.

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

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

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

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

Я очень ценю вашу помощь с этим.

7
css image responsive-design retina-display srcset

1 ответов

1. Основы

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

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

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

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

On <img> тега 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 атрибут

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

<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 будет загружен браузером, так как он дает устройства-пикселей соотношение of 1.6x (что наиболее подходит для 1.5x дисплей).

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

Вы упомянули, что подражали 480пкс экран ширины CSS.

потому что вы установили sizes to 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 экран, и, таким образом, браузер загружает .

вопросы

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

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

я что-то пропустил здесь?

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

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

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

5