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 avecbackground-image: none. - Pour permuter des images de fond, il faut les définir toutes les deux à l’intérieur des Medias Queries
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
là c’est le cas d’un responsive design avec degradation progressive… c’est différent si tu travailles en amelioration progressive. Par exemple le display:none sur background-image n’existera pas dans ce cas.