Запросы мультимедиа для изображений @2x, @3x и @4x

Я пытаюсь поддерживать множество соотношений пикселей на текущем сайте, который я разрабатываю. Я также хочу обеспечить, чтобы я предоставлял все необходимые префиксы браузера для поддержки самого широкого разнообразия устройств/браузеров в разумных пределах. Кроме того, я использую SVG везде, где это возможно, но мне нужно решение для фотографических изображений. В идеале я хотел бы предоставить:

  • @1x изображение (Pixel Ratio 1.0)
  • @2x изображение (Пиксельное соотношение 1,25 +)
  • @3x изображение (соотношение пикселей 2,25 +)
  • @4x изображение (соотношение пикселей 3,25 +)

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

/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
       only screen and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-device-pixel-ratio: 2.25),
       only screen and (min-resolution: 2.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4),
       only screen and (-webkit-min-device-pixel-ratio: 3.25),
       only screen and (min-device-pixel-ratio: 3.25),
       only screen and (min-resolution: 3.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

Альтернатива 1: Я рассматривал использование тега <picture> для этого. Я знаю, что вы можете предоставить альтернативный контент для браузеров, которые не поддерживают <picture>, что было бы моей главной задачей в его использовании. Вы, ребята, думаете, что это лучшая практика для предоставления фотографий для нескольких соотношений пикселей?

Ответы

Ответ 1

Ну, игнорируя очевидные функциональные различия между фоновым изображением и встроенным элементом изображения, например picture, между ними есть несколько плюсов и минусов.

Плюсы для встроенного изображения/минус для background-image:

Невозможно использовать медиа-запрос для встроенного стиля, поэтому для указания background-image требуется объявить селектор для любых элементов, требующих выделения фоновых изображений из тега. Это усложняет это решение для динамически создаваемых элементов.

Кроме того, если вас интересует только просмотр изображений с разными соотношениями пикселей, вы можете просто использовать атрибут srcset тега img вместо элемента picture. Элемент picture требует большей разметки и имеет ряд функций, которые не нужны для этого, плюс srcset немного лучше поддерживается.

Плюсы для background-image/cons для встроенного изображения:

Решения на основе медиа-запросов гораздо лучше поддерживаются, чем picture элемент и атрибут srcset. В настоящее время некоторые браузеры не поддерживают ни элемент picture, ни атрибут srcset, хотя поддержка улучшается.

Кстати, если вы хотите максимизировать поддержку браузера для версий Firefox старше 16, вы можете добавить селектор min--moz-device-pixel-ratio, который имеет такой же синтаксис, как -webkit-min-device-pixel-ratio. Вот пример использования вашего CSS.

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min--moz-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

Лучшая практика?

Лучшей практикой было бы использовать медиа-запросы для мест, где вам понадобится фоновое изображение, и srcset или picture для мест, в которых требуется встроенное изображение. Однако на данном этапе может быть более важно рассмотреть, какие браузеры вам необходимо поддерживать. Для этого см. Совместимые ссылки (возможно, учитывая, что многие люди, использующие старые браузеры, вероятно, также используют стандартные мониторы разрешения):

Ответ 2

Действительно используйте атрибут img[srcset]. Его поддержка намного лучше, чем состояние в другом ответе. Существующие Chrome и Safari поддерживают этот атрибут. И мы знаем, что Firefox 38 и IE 12 также будут поддерживать его. Кроме того, синтаксис позволяет вам делать простые прогрессивные улучшения, и вам не нужно писать сложные медиа-запросы.

Вот как это выглядит:

<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />

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

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

<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />