Адаптивные изображения - атрибут srcset и sizes - как правильно использовать и то, и другое: выбор на основе соотношения пикселей на устройстве и выбора на основе видового экрана вместе?

Question

До сих пор я часто читал об этой проблеме, и это также касается моих собственных проектов. Вот введение в то, что я узнал о srcset и атрибутах размеров.

Есть две разные возможности использования srcset-attribute (источник w3c: http://w3c.github.io/html/semantics-embedded-content.html):

1. Выбор наоснове отношения пикселей к устройству, когда фиксированный размер изображения фиксирован

Это простой и надежный способ использования srcset, Вы просто говорите: если отношение устройств к пикселям целевого устройства больше x, отобразите это изображение со следующим более высоким разрешением.

Дескриптор x не подходит, когда размер отрисовки изображения зависит от ширины области просмотра (выбор на основе области просмотра), но может использоваться вместе с художественным направлением.

Пример:

 <img src="/uploads/100-marie-lloyd.jpg"
      srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
      alt="" width="100" height="150">

2. Выбор на основе видового экрана

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

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

Простой пример:

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
    src="wolf-400.jpg" alt="The rad wolf"></h1>

Еще один шаг: использование атрибута размеров

По умолчанию для выбора на основе просмотра и srcset является то, что изображение всегда имеет ширину 100% (100vw). Атрибут размеры дает прекрасную возможность сообщить браузеру, как ширина изображения при определенной ширине экрана.

Атрибут sizes устанавливает точки останова макета в 30em и 50em и объявляет размеры изображения между этими точками прерывания равными 100vw, 50vw или calc(33vw - 100px). Эти размеры не обязательно должны точно соответствовать фактической ширине изображения, указанной в CSS.

Пользовательский агент выберет ширину из атрибута sizes, используя первый элемент с (часть в скобках), который оценивается как true, или используя последний элемент (calc(33vw - 100px)), если все они оцениваются как false.

Пример:

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

Вот вызов, где я был бы очень рад, если бы кто-то мог просветить меня

Могу ли я рассчитывать на srcset, что клиент всегда загружает правильное изображение? Или действительно загруженное изображение также зависит от вычислительной мощности и скорости интернет-соединения, как утверждают некоторые люди? У меня были жалобы на устройства Retina, которые загружают изображения с более низким разрешением.

Как я могу использовать оба: выбор на основе отношения пикселей к устройству и выбор на основе области просмотра вместе? Поскольку для каждого возможного размера в размерах, я могу захотеть определить изображение сетчатки с размером 200%, а также изображение без сетчатки.

И более того: имеет ли смысл использовать разные изображения в srcset для разных размеров области просмотра или это неправильное использование атрибута srcset? Если возможно комбинировать выбор на основе отношения устройств к пикселям и на основе области просмотра, это также должно быть возможно.

Answer 1

Могу ли я рассчитывать на srcset, что клиент всегда загружает правильное изображение? Ответ - нет. Более того, вы никогда не сможете узнать размер изображения, которое будет загружать пользователь, если только вы не захотите проверить это с помощью кода Javascript, а затем запретите пользователю загружать правильное измерение. Но это не будет слишком удобно для пользователя.

Опять же, вы можете захотеть реализовать алгоритм, который всегда изменяет размер изображения до нужного вам размера без искажения качества, поэтому вам не нужно передавать другой imageurl в srcset и просто использовать src attr. Это может быть преимуществом для пользователей с медленным интернет-соединением.

Имеет ли смысл использовать разные изображения в srcset для разных размеров области просмотра или это неправильное использование атрибута srcset? Дело в том, сколько устройств Viewport вы хотите обработать во всех. Если вы указываете разные размеры и размеры изображения для разных портов просмотра, вы не сможете настроить таргетинг на все сразу, особенно когда доступно новое устройство, которое вы не обрабатывали на момент разработки.