1485 sujets

Web Mobile et responsive web design

Media queries, taille d'image et chargement

Bonjour,
Je voudrais faire un site responsive mais je voudrais être sûr également de garder une bonne performance.
Pouvez-vous me confirmer que si j'utilise des CSS utilisant des media queries seules les parties correspondantes au media seront chargées.
Par exemple, si je mets une grande image en background pour les grands écrans et une petite image pour les petits écrans, est-ce que chaque média ne chargera que l'image lui correspondant ou les 2 images seront-elles de toutes façons chargées auquel cas j'aurais alourdit le chargement de mon site en essayant de l'adapter.
Y-a-t-il un ordre de déclaration des medias à respecter pour optimiser le tout ?
J'espère que je suis compréhensible Smiley cligne

Merci d'avance

Sophie
Salut,

Si l'une de tes images est déclarée dans une règle CSS qui n'est pas contenue dans une règle @media ciblant spécifiquement un média avec une requête de média spécifique, elle sera chargée par tous les supports susceptibles d'appliquer la règle CSS.

Autrement dit :
element {
  background-image: url(chemin-vers-ton-image-1);
}
@media only screen and (max-device-width: 640px) {
  element {
    background-image: url(chemin-vers-ton-image-2);
  }
}
/* Les deux images sont chargées par les supports répondant à la règle @media */


@media only screen and (min-device-width: 641px), screen and (min-width: 641px) {
  element {
    background-image: url(chemin-vers-ton-image-1);
  }
}
@media only screen and (max-device-width: 640px) {
  element {
    background-image: url(chemin-vers-ton-image-2);
  }
}
/* Seule l'image 2 est chargée par les supports répondant à la seconde règle @media */

Autre solution : n'utiliser qu'une seule image et jouer avec la propriété CSS 3 background-size.
Modifié par Victor BRITO (13 Mar 2012 - 15:37)
Victor : ce comportement me parait bizarre. Avec ce code 
<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title></title>

  <style media="screen">
body {
	background: url(http://placekitten.com/200/300)
}

@media only screen and (min-device-width: 640px) {
  body {
    background-image: url(http://baconmockup.com/300/200);
  }
}  </style>
</head>
<body></body>
</html>
Je ne constate qu'un seul appel (le background dans la media querie). Mais je ne peux tester que sous FF et Chrome Desktop pour le moment. Il y a des différences sur le mobile (excepté le bug de webkit cité plus haut)?
Merci à tous, j'avance doucement mais surement.
Je retiens que je pourrais mettre des images en background différentes selon les médias mais ça ne marche pas pour tous les mobiles utilisant Android dans sa version antérieure (il doit y en avoir encore beaucoup) à cause du bug de webkit. Dans ce cas là j'obtiens même l'inverse de ce que je voulais puisque je charge toutes les images, les petites et les grandes Smiley decu

Je ne retiens vraiment la solution d'une seule image à redimensionner car ça sera forcement l'image la plus grande donc la plus lourde que je devrais rétrécir, je n'y gagne pas grand chose en termes de performance.

Tant pis, je vais devoir penser à un design simple avec peu d'images ou des images à mettre en "papier-peint", c'est à dire des petites images à répéter et qui seront les mêmes quel que soit la taille des écrans.

Merci encore
Une autre possibilité à tester.

Tu fais ton site via une approche mobile first.

Tu charges ta feuille de style pour les mobiles et tous les navigateurs.

Ensuite via une media queries dans un lien vers une feuille de style tu charges les media queries au dela d'une resolution.

Ensuite pour IE qui ne supporte pas les media queries, tu charges une feuille de style spécifique à IE < 9.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mediaqueries.css" media="(min-width:Xpx)">
<!--[if (lt IE 9) & (!IEMobile)]>
	<link rel="stylesheet" href="css/ie.css">
<![endif]-->


Avantage pas de dépendance avec javascript, inconvénient IE < 9 au dessus de ton point de rupture ne sera plus responsive mais fluide.

Tu peux gérer ça avec Sass ou less (ou autre préprocesseur CSS), pour simplifier la maintenance.
Florian_R a écrit :
J'aime assez l'approche, ça me rappelle cet article : Leaving Old Internet Explorer Behind dont l'idée principale est de partir d'une approche mobile first, et de servir le même contenu aux vieux IE qu'aux mobiles.


J'ai oublié de publier ma source. (Rendons à Cesar...) L'exemple est de http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ . (auteur de normalize.css)

Avec un seul bémol dans sa manière de voir les choses pour IE, je n’inclurait pas personnellement tous les styles "mediaqueries" dans la feuille pour IE, juste le point de rupture dans la tranche 768 - 1024.

J'ai tenté de l'intégrer sur mon html5-boilerplate perso https://github.com/rs459/ht5bp-mootools-compass quand sass sera passé en 3.2 stable je pourrais reprendre l'exemple et l'adapter.
Modifié par rs459 (16 Mar 2012 - 13:39)
Administrateur
rs459 a écrit :
Une autre possibilité à tester.

Tu fais ton site via une approche mobile first.

Tu charges ta feuille de style pour les mobiles et tous les navigateurs.

Ensuite via une media queries dans un lien vers une feuille de style tu charges les media queries au dela d'une resolution.

Ensuite pour IE qui ne supporte pas les media queries, tu charges une feuille de style spécifique à IE &lt; 9.


C'est très tentant, mais il peut y avoir des soucis de performances et de temps de latence avec cette méthode :
http://blog.goetter.fr/post/15503219454/comment-cibler-les-mobiles-de-maniere-optimale-bis
Merci,

A quel point se situe la perte de perfromance pour toi ? la requête HTTP supplémentaire ?

Les classes conditionnelles redondantes dans la partie supérieure (IE 768-1024 par ex), et dans la mediaqueries classique (non-ie lt 9) qui seront inutilisés ?

Cela mérite des benchmark's pointus, difficile à réaliser.

Première page > requête HTTP sup > puis mise en cache.

Première page > pas de requête HTTP sup mais traitement par respond.js sur des navigateurs connus pour être très lent en Jscipt.

Quid du cas de la seconde page ? respond.js devra mettre un gestionnaire d’évènement en place (onresize + timer), modifié la feuille de style (cloner j'imagine comme IEPP), puis générer un reflow, repaint.

Sans oublier la manière de charger respond.js qui peut générer une requête HTTP
en plus. (idéalement inclut dans html5shiv ou modernizr).
Administrateur
rs459 a écrit :
Merci,

A quel point se situe la perte de perfromance pour toi ? la requête HTTP supplémentaire ? ).

Oui et non.

Que ce soit sur iPhone ou iPad, Safari mobile ne semble pas gérer les téléchargements simultanés : les fichiers de styles sont chargés l’un après l’autre et le navigateur attend que le dernier soit chargé avant de poursuivre le chargement de toutes les autres ressources de la page !


http://media.tumblr.com/tumblr_lx0opqPGnp1qciej1.png

Tandis que la même page de test contenant une feuille de style unifiée a mis 1.95s a être intégralement chargée sur iPhone 4, soit près d’une seconde de différence pour une page de moins 2ko !

http://media.tumblr.com/tumblr_lx0oqt5MH01qciej1.png

Le test : http://blog.goetter.fr/post/15024485059/requetes-parallelisation-et-mobiles
Modifié par Raphael (19 Mar 2012 - 13:28)
Merci pour ton retour.

Effectivement seul google chrome fait une gestion intelligente du parallélisme des requêtes, il télécharge la feuille de style des mediaqueries en premier seulement s'il est concerné, sans quoi il la télécharge en dernier.

Opera mobile n'optimise pas et télécharge quand même la feuille en bloquant une requête.
Pour ce qui est de webkit android, malheureusement je n'ai pas accés au debugging sur les versions installé sur mon HTC desire, et ma xoom (en espérant que ICS, et son navigateur le permette).

Bon résumé des possibilités sur ton blog.
Sujet clos
Aller à