Media queries et téléchargement des images par les mobiles

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante.

Media Query & Asset Downloading Results fait état d’une série de tests où il apparait que :

• Si vous décidez de ne pas afficher une image, il ne faut pas compter à coup sûr sur la propriété display: none. A la place l’auteur recommande d’utiliser Javascript ou une approche côté serveur.
• Pour masquer une image définie en background-image, il est préférable de masquer l’élément parent. Si cela n’est pas possible, il est possible d’utiliser une surcharge CSS avec background-image: none.
• Pour permuter des images de fond, il faut les définir toutes les deux à l’intérieur des Medias Queries