Introduction aux images responsives 8 : images CSS

Quand on parle d'images responsives, on ne pense généralement pas aux images CSS. Pourtant il existe des solutions spécifiques, dont les nouvelles media queries résolution et image-set(). Par Jason Grigsby.

Par

La plupart du temps, quand les gens parlent d’images responsives ils pensent aux images en ligne (dans le HTML), pas aux images CSS.

C’est sans doute parce qu’avant <picture> et srcset il n’existait pas de bonne solution pour les images responsives en ligne. Et puis, pour les images CSS, on peut toujours utiliser des media queries, alors pourquoi s’inquiéter ?

Eh bien... il est temps de revisiter les images responsives CSS et d’examiner à nouveau les solutions possibles, en les rapprochant de ce que nous avons appris sur les images en ligne.

Image-set() pour le changement de résolution

De même qu’avec les images en ligne, l’une des premières questions que nous devons nous poser est de savoir si nous nous trouvons dans le cas d’usage changement de résolution ou direction artistique.

Si nous sommes dans le cas d’usage changement de résolution, nous devrions tout faire pour fournir au navigateur plusieurs options et le laisser choisir la meilleure image possible. Le navigateur est mieux placé que nous pour savoir quelle image fonctionnera le mieux en fonction des préférences de l’utilisateur, des conditions du réseau, etc.

Pour fournir ces options au navigateur, nous devrions utiliser la syntaxe image-set().

la syntaxe image-set

Vous remarquerez sans doute quelques similarités avec la syntaxe srcset et c’est normal : en fait, srcset a été inspirée par image-set().

background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);

Tout comme srcset, la valeur d’image-set() contient une liste d’URI d’images, séparées par une virgule, ainsi qu’un descripteur de densité d’affichage. Si un tel descripteur n’est pas fourni, il est par défaut égal à 1×.

Cependant image-set() ne supporte pas encore les descripteurs. Il est prévu d’améliorer image-set() pour lui donner les mêmes fonctionnalités que srcset.

La plupart des exemples relatifs à image-set() que vous verrez sont appliqués à background-image, mais en réalité on pourrait l’utiliser avec n’importe quelle propriété CSS acceptant les images.

Image-set() : le standard oublié des images responsives

Image-set() a été la première syntaxe spécifique aux images responsives et comme je l’ai déjà dit, la base sur laquelle a été construit srcset. Cependant, comme il existait des solutions pour les images responsives CSS via les media queries, image-set() a été oublié. Le RICG n’en a pas beaucoup discuté et les constructeurs de navigateurs n’ont pas fait une priorité de son implémentation.

À mesure que nous approchions de la réalisation des standards <picture> et srcset, nous avons commencé à regarder autour de nous et nous nous sommes rendus compte que nous avions négligé image-set(). Actuellement un gros travail est en cours pour améliorer les fonctionnalités d’image-set() et les aligner sur srcset.

Mais à la date de publication de cet article, bien qu’étant historiquement le premier standard des images responsives, la compatibilité n’est pas bonne. image-set() est disponible via un préfixe webkit dans Chrome, Opera et Safari. Ni Firefox ni Microsoft ne l’ont actuellement implémenté.

Alors pourquoi l’intégrer dans cette série sur les images responsives ?

Parce que image-set() est la bonne solution pour le changement de résolution. Quand image-set() sera largement supporté, ce sera la meilleure solution, pour les mêmes raisons qui nous font préférer srcset à <picture> et l’attribut média.

Jusque là, vous utiliserez sans doute la direction artistique CSS comme solution au changement de résolution.

Direction artistique

Quelle est la solution CSS pour la direction artistique ? Les media queries.

C’est aussi simple que cela. Je supposerai que vous connaissez les media queries, par conséquent je ne donnerai pas d’exemple de syntaxe ici. Mais tant que vous me prêtez encore attention, assurez-vous que vos media queries relatives aux images ne se recouvrent pas, sinon vous aurez des téléchargements multiples. En cas de doute, jetez un coup d’oeil à l’article de Tim Kadlec Media Queries & Asset Downloading Results.

Media queries pour la résolution

Si vous voulez supporter des affichages HD dans votre direction artistique, vous utiliserez les nouvelles media queries résolution.

syntaxe media query résolution

La media query résolution vous permet d’appliquer des règles CSS spécifiques à des terminaux dont la densité d’affichage correspond aux critères que vous avez définis.

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 High density stuff here 
 }

(avec mes remerciements à CSS-Tricks pour cet exemple de syntaxe).

La première chose que vous remarquerez dans la syntaxe ci-dessus est que nous incluons une media query avec préfixe webkit pour les terminaux qui supportent l’ancienne syntaxe device-pixel-ratio. Les seuls terminaux sortis avec cette syntaxe utilisaient le préfixe webkit, c’est pourquoi il est le seul listé.

La syntaxe qui suit est la media query résolution. Dans notre exemple, nous utilisons min-resolution, mais comme vous l’avez sans doute deviné il existe une max-resolution complémentaire que nous aurions pu utiliser à la place.

La media query résolution vérifie trois choses :

  • dpi - dots per inch
  • dpcm - dots per centimeter
  • dppx - dots per px unit

Les deux premiers sont assez simples, mais dppx m’a posé plus de problèmes. La documentation MDN définit ainsi dppx :

Cette unité représente le nombre de points par unité CSS px. Puisque le ratio entre les unités CSS in et CSS px vaut 1:96, 1 dppx est équivalent à 96 dpi, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par image-resolution.

Confus ? Je l’était complètement quand j’ai lu cet article.

Voici comment j’ai commencé à me représenter les choses. Cette idée de 1×, 2×, 3×, etc. est basée sur une imprécision. La valeur de 1× sur certains terminaux est différente de celle qu’on peut trouver sur d’autres car certains ont 72dpi, d’autres 96dpi ou autre.

Mais d’un point de vue CSS, ces différences n’ont pas d’importance. Le Groupe de Travail CSS a décidé qu’il y aurait toujours un ratio fixe de 1:96 entre les inches CSS et les pixels CSS.

Donc, même si 1× laisse une marge d’interprétation, 1ddpx sera toujours ce que vous et moi voyons comme “1×”.

Vous vous demandez peut-être pourquoi 1× était suffisant pour srcset et image-set mais pas pour min-resolution qui a besoin d’utiliser les dppx ?

Franchement, je n’en sais rien. Tout ce que je sais c’est que vous pouvez voir 1dppx comme 1×, 2dppx comme 2×, etc. À ce stade, j’ai simplement accepté l’incohérence et décidé d’avancer — et je vous recommande de faire de même ;-)

C’est maintenant que le plus dur arrive

Croyez-le ou non, la syntaxe des images responsives était la partie facile. Dans la 9e partie, nous allons discuter du défi complexe de choisir vos points de rupture images.

La liste des articles de cette série (en cours) :

  1. Définitions
  2. Img requise
  3. Densité d’affichage srcset
  4. Descripteurs de largeur srcset
  5. Dimensions
  6. Élément picture
  7. Type
  8. Images responsives CSS
  9. Points de rupture image
  10. Conclusion

Intéressé par le Responsive Web Design ? Retrouvez une liste des meilleurs articles et ressources du web.

Articles sur les mêmes thèmes dans la Cascade :

Images responsives, picture et srcset
Images responsives : cas d’utilisation et snippets


original paru le dans Cloud Four Blog.

Sur l’auteur : passe bien trop de temps à réfléchir sur l’univers mobile. Il a fondé Mobile Portland, une organisation à but non lucratif qui se consacre à éduquer, promouvoir et soutenir la communauté mobile de Portland. Co-fondateur de Cloud Four, il est aussi co-auteur de Head First Mobile Web et il donne de nombreuses conférences sur la technologie et la stratégie mobiles. On peut le suivre sur Twitter, Facebook, Google+.

Traduit avec l’aimable autorisation de Cloud Four Blog et de l’auteur.
Copyright Cloud Four Blog © 2015.