web-dev-qa-db-fra.com

Requêtes multimédias pour les images @ 2x, @ 3x et @ 4x

J'essaie de prendre en charge une variété de ratios de pixels sur le site actuel que je développe. Je veux également m'assurer de fournir tous les préfixes de navigateur requis pour prendre en charge la plus grande variété d'appareils/navigateurs dans les limites du raisonnable. De plus, j'utilise des SVG dans la mesure du possible, mais j'ai besoin d'une solution pour les images photographiques. Idéalement, je voudrais fournir:

  1. @ 1x image (Pixel Ratio 1.0)
  2. @ 2x image (Pixel Ratio de 1,25+)
  3. @ Image 3x (rapport pixels de 2,25+)
  4. @ 4x image (Pixel Ratio de 3.25+)

Ma question est quelle serait la meilleure façon de rédiger les requêtes des médias pour y parvenir? Ma principale préoccupation est que mes arguments correspondent à ce que j'essaie de réaliser. J'apprécierais toutes vos suggestions ou conseils. Actuellement, mon code est le suivant:

/* @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]);}
}

Alternative 1: J'ai envisagé d'utiliser le <picture> tag pour accomplir cela. Je sais que vous pouvez fournir un contenu alternatif pour les navigateurs qui ne prennent pas en charge <picture>, ce qui serait ma principale préoccupation en l'utilisant. Pensez-vous que ce serait la meilleure pratique pour fournir des photos pour plusieurs ratios de pixels?

cssimagecss3media-queriesretina-display
20
Mastrianni

Eh bien, en ignorant les différences fonctionnelles évidentes entre une image d'arrière-plan et un élément d'image en ligne tel que picture, il y a quelques avantages et inconvénients entre les deux.

Avantages pour l'image en ligne/inconvénients pour background-image:

Il n'y a aucun moyen d'utiliser une requête multimédia pour un style en ligne, donc spécifiant un background-image nécessite de déclarer un sélecteur pour tous les éléments qui nécessitent des images d'arrière-plan distinctes de la balise. Cela complique cette solution pour les éléments créés dynamiquement.

De plus, si vous souhaitez uniquement servir des images avec différents ratios de pixels, vous pouvez simplement utiliser l'attribut srcset d'une balise img au lieu du picture élément. L'élément picture nécessite plus de balisage et possède un certain nombre de fonctionnalités qui ne sont pas nécessaires pour cela, plus srcset est légèrement mieux pris en charge.

Avantages pour background-image/contre pour l'image en ligne:

Requêtes multimédias basées sur la résolution sont beaucoup mieux prises en charge que l'élément picture et l'attribut srcset . Certains navigateurs ne prennent en charge ni l'élément picture ni l'attribut srcset pour le moment, bien que la prise en charge s'améliore.

Par ailleurs, si vous souhaitez maximiser la prise en charge du navigateur pour les versions de Firefox antérieures à 16, vous pouvez ajouter le min--moz-device-pixel-ratio selector , qui a la même syntaxe que -webkit-min-device-pixel-ratio. Voici un exemple d'utilisation de votre 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]);}
}

Meilleur entrainement?

La meilleure pratique consiste à utiliser des requêtes multimédias pour les emplacements dont vous avez besoin d'une image d'arrière-plan et srcset ou picture pour les emplacements dont vous avez besoin d'une image en ligne. Cependant, à ce stade, il peut être plus important de considérer les navigateurs que vous devez prendre en charge. Pour cela, consultez les liens compatibles (compte tenu peut-être du fait que de nombreuses personnes utilisant des navigateurs plus anciens utilisent probablement également des moniteurs à résolution standard):

17
Alexander O'Mara

Utilisez vraiment le img[srcset] attribut. Son soutien est bien meilleur que celui indiqué dans une autre réponse. Current Chrome and Safari supporte cet attribut. Et nous savons cela, Firefox 38 et IE 12 le prendront également en charge. De plus, la syntaxe vous permet de faire une simple amélioration progressive et vous n'avez pas besoin d'écrire des requêtes multimédias complexes.

C'est à ça que ça ressemble:

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

Et si vous souhaitez ajouter un support aux navigateurs non compatibles, vous pouvez choisir entre différentpolyfills .

Si vous utilisez un polyfill, vous pouvez modifier le balisage en ceci:

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