Contexte au lieu d'images en ligne pour l'optimisation mobile avec les requêtes des médias?

Question

Ive mobile optimisé mon site avec les requêtes des médias. Tout ressemble que je voudrais à, mais les images inutiles (comme ils sont cachés avec css) sont en cours de téléchargement, ce qui ralentit les temps de chargement de la page.

La solution la plus simple à cela semble être de remplacer autant les images en ligne que je peux avec divs avec des images d'arrière-plan. Ensuite, je peux cacher la div avec de la css des médias pour la version mobile.

Je sais qu'il ya des inconvénients potentiels à cela, bien décrites dans cet article: Quand utiliser IMG vs background-image CSS?

Ainsi, le logo de l'entreprise, des photos du personnel, etc resteront comme des images en ligne.

Y at-il des questions à mon approche, je havn't considéré? J'ai lu beaucoup sur l'optimisation mobile, en particulier avec les requêtes des médias, et je havn't entendu parler de quelqu'un faire cela même si il semble tout à fait une solution évidente où les images pourraient être en ligne ou arrière-plan.

Note, Ive fait quelques expériences avec les iPhones et Android (attente im pour obtenir des Blackberrys) et je sais que pour mettre fin à des images d'arrière-plan télécharger Je dois montrer ensemble aucun au parent de la div, pas la div avec l'image d'arrière-plan lui-même.

Note2, dans un monde idéal, les sites aurait probablement été construit comme premier mobile, mais dans cette situation (et souvent dans d'autres), il y a une limite à ce que le site d'origine peut être modifié.

Merci

Answer 1

Malheureusement, il n'y a pas de grandes réponses pour les problèmes que vous essayez de résoudre.

D'abord, vous avez la possibilité de déplacer tout de balises img aux images d'arrière-plan css. Comme vous le soulignez, vous devez faire attention de perdre le sens sémantique en le faisant.

Mais même si vous pouvez passer à des images d'arrière-plan sans perdre de la valeur sémantique, il est toujours ne va pas être fiable à 100%. J'ai écrit une série de tests l'été dernier. Je les ai retesté la semaine dernière en préparation du chapitre de notre livre sur la conception web première réponse mobile. Les tests sont situés à http://www.cloudfour.com/examples/mediaqueries/image -test / .

Malheureusement, Android ne chacun de ces techniques. Vous pouvez voir le téléchargement de plusieurs copies des fichiers d'image par mobile test de Blaze: www.blaze.io/mobile/result/?testid=111031_96_316

Mise à jour le 3 novembre 2011: J'essaie actuellement de concilier des résultats incohérents entre ce que je vois sur Blaze et ce que je vois en utilisant le même appareil en personne. Sur mon Nexus S local, il passe le test cinquième css qui limite les imgs en les plaçant dans les requêtes des médias. Je regardais les journaux apache et confirmé le périphérique télécharge une seule image au lieu de deux pour le test 5. Blaze est en cours d'exécution 2.3.3. Mon téléphone est en cours d'exécution 2.3.6.

Ceci est vrai pour Android 2.2, 2.3 et 3.0. Si tout va bien, 4.0 intégrera les correctifs de WebKit qui empêchent ce comportement: bugs.webkit.org/show_bug.cgi?id=24223

BTW, cela semble entrer en conflit avec vos commentaires sur le test définissant la div parent pour afficher: aucun sur Android. Si vous obtenez des résultats différents, j'aimerais entendre parler.

Si vous les garder en tant que balises img, quelles sont vos options? Sur ce sujet, je l'ai écrit une série en plusieurs parties. La deuxième partie de la série offre un regard en profondeur sur les différentes techniques: http://www.cloudfour.com/responsive-imgs-part-2/

Encore une fois, aucune des solutions sont grands. Si vous voulez quelque chose qui est simple et fonctionnera la plupart du temps, je vais pour adaptive-images.com. Ou les images de la route à travers Sencha.io SRC jusqu'à ce que nous avons une meilleure solution à ce problème.

BTW, désolé d'avoir tant de liens qui ne sont pas en fait des liens. Ceci est ma première réponse sur StackOverflow et il ne me permettra d'inclure deux liens.

Answer 2

Pourquoi ne pas faire une première approche mobile, puis utiliser des requêtes des médias pour améliorer des écrans plus grands.

vous pouvez également utiliser des requêtes des médias pour servir des fichiers CSS spécifiques.

Avec les images en ligne, j'ai essayé un bloc de script dans la tête et immédiatement après l'étiquette du corps d'ouverture, qui ne fonctionne que pour les appareils mobiles (détecter via classname ajouté au corps, ou la présence d'un fichier CSS Media Queries) qui trouvent tous des images en ligne avec une certaine classe et vider l'attribut src.

voir ici éviter que les images chargement

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

une autre façon est d'utiliser url réécrivant avec mod rewrite et .htaccess ou un module réécriture d'URL pour iis. redirect les chaînes de l'agent utilisateur pour les mobiles à une petite image vierge.

voir: Une façon d'éviter un navigateur mobile de le téléchargement et l'affichage d'images

RewriteCond %{HTTP_USER_AGENT} (nokia¦symbian¦iphone¦blackberry) [NC] 
RewriteCond %{REQUEST_URI} !^/images/$
RewriteRule (.*) /blank.jpg [L]

vous pouvez améliorer ci-dessus en chargeant vos images en ligne à partir d'un autre sous-domaine et réécriture que ceux pour mobile, que vous ne voulez pas réécrire toutes les images (logo etc.)

Answer 3

Si je comprends bien votre question, cela semble être un cas parfait d'utilisation pour srcset et sizes. Cet article est un MDN grand poste pour l'apprentissage de la notion en profondeur, mais je vais aussi résumer ici. Voici un exemple complet, un peu compliqué:

<img srcset="elva-fairy-320w.jpg 320w,
         elva-fairy-480w.jpg 480w,
         elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
        (max-width: 480px) 440px,
        800px"
     src="elva-fairy-800w.jpg" 
     alt="Elva dressed as a fairy">

Ce code dit:

• Si mon navigateur ne supporte pas l'utilisation srcset ce qui est en src par défaut. Ne laissez pas cela.
• Hey navigateur, dans srcset, voici 3 fichiers et leurs largeurs naturelles séparées par des virgules.
• Hey navigateur, en sizes ici sont les largeurs de l'espace que je veux que mon image pour prendre en fonction de la requête des médias. Utilisez celui qui correspond à la première.

Alors le navigateur lui-même calculera qui est la meilleure image à utiliser en fonction de la résolution de la taille et l'écran de l'utilisateur puis télécharge uniquement que celui qui est assez impressionnant dans mon livre.

Answer 4

Ok, chose importante à noter est que le mobile! = Faible bande passante! = Petit écran et ordinateur de bureau! = Large bande passante! = Grand écran.

Qu'est-ce que vous voulez sans doute est de prendre une décision basée sur la bande passante du client et la taille de l'écran du client. requêtes médias seulement aide avec ce dernier.

David Calhoun a une grande writeup sur la façon de le faire ici: http://davidbcalhoun.com / 2011 / manifeste performance mobile

Hautement recommandé.

Answer 5

Je suis tombé récemment sur un sur le sujet , le problème des adressant des images sensibles (c.-à-servir plus petites images sur des appareils plus petits). Les commentaires de l'article sont les plus partie intéressante, et je pense que la technique de remplacement inventé par Weston Ruter est prometteur:

http://jsbin.com/ugodu3/13/edit#javascript, html, en direct (Voir les autres itérations dans les commentaires).

Il a beaucoup de mise en garde (et est peut-être difficile, mais pas impossible, de fusionner dans un site Web existant, comme l'effet que tous vos liens non absolus, non seulement DHCEU), mais je vais essayer (fusionné avec un chargement paresseux ) sur mon prochain projet, qui est un site réactif que mon concepteur fait assez lourd (et il ne veut pas le rendre plus léger). Notez que vous pouvez combiner à un script php redimensionner les images sur la demande si votre serveur supporte il.

Les autres solutions communes pour les DHCEU sensibles sont basés cookies (vérifier plugins groupe Filament images réactives).

Je préfère les images sensibles à fond css parce qu'ils sont plus correctes sémantiquement et parse-mesure SEO-sage. Si je suis d'accord que nous ne devrions pas supposer que plus grand écran = plus de bande passante, nous ne dispose pas des outils pour résoudre ce (navigator.connection est Android uniquement.) Donc en supposant que la plupart des utilisateurs mobiles ont une connexion merdique 2G / 3G est le moyen le plus sûr.

Answer 6

Je ne sais pas si vous avez pensé à faire cela, mais l'une des choses que vous pouvez faire est de vérifier la largeur de la résolution d'écran avec javascript et si la résolution est inférieure à un certain nombre (j'utilise 480 parce ce point ce site est mauvais) puis passer les modèles css la valeur par défaut au modèle sur le thème mobile.

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }
  if (myWidth < 48)
  {
   switch css template to mobile template
  }
}

Answer 7

L'adaptation à un site existant suce mais nous ce qui me doit. Voici comment je l'ai résolu lors de l'importation de flux d'un blog dans un site mobile. Il adapte l'image existante sur la page à la largeur de la page uniquement si elle est supérieure à l'écran.

var $images = $("img[width]");
    $images.each(function(){ 
      try{
          var $image = $(this);
          var currentWidth = Number($image.attr("width"));
          if(currentWidth > screen.width){
              $image.width("100%");
              $image.removeAttr("height");
           }
      }
      catch(e)
      {/*alert("image scale fail\n"+e)*/}
 });

En faisant 100% de largeur et enlever tout attribut de hauteur, l'image parfaitement échelle pour prendre toute la largeur si vous êtes dans le paysage ou l'orientation portrait.

Il y a des chances, les images sur votre site web régulier sont déjà optimisés. Il n'y a généralement pas beaucoup de performance coup de pouce à gagner en chargeant des images plus petites. La réduction des requêtes HTTP fera beaucoup plus d'un gain de performances que d'apporter plus de petites images. Il ne peut pas être la solution parfaite, mais il va certainement être le moins d'entretien. Si vous ne pouvez pas contrôler raisonnablement ce que les images vont être utilisées sur le site, c'est une solution assez raisonnable. Si rien d'autre, peut-être cela va susciter une autre idée pour vous.