Responsive Web design : optimisation et intégration des images en mode SEO

Par  le 24 avril 2014 - 13:43 dans

Intégration HTML : Les exigences actuelles et les prérequis

L’intégration HTML des pages représente une problématique de plus en plus difficile. En premier lieu, avec l’apparition successive des différents navigateurs, l’intégrateur a dû s’adapter pour gérer des affichages qui pouvaient différer selon que l’on utilise Internet Explorer, Firefox, Opéra, Chrome ou d’autres navigateurs.

Depuis quelques années déjà la donne évolue à nouveau avec le développement des affichages sur tablettes et mobiles. L’intégration des pages devient alors de plus en plus inextricable. Avec de nouveaux navigateurs et de nouveaux systèmes d’exploitation vient aussi la difficulté de gérer la faible bande passante dont disposent le plus souvent ces solutions mobiles.

Voilà déjà quelque temps, Matt Cutts a annoncé que la vitesse d’affichage d’un site était un facteur déterminant pour le positionnement d’un site dans les résultats de recherche de Google. Nous rencontrons régulièrement des consultants Google, notamment lors des SEO Camp’us organisés chaque année par l’association du même nom, et chaque année, le message est le même, « chez Google, nous sommes fous de vitesse ».

Pour répondre à ces prérequis, cet article va tenter d’apporter une solution concernant l’optimisation de l’intégration des images d’illustration dans des listes. Il ne s’agit ici que d’images qui n’ont pas vocation à être référencées ou indexées par Google. Ces dernières sont destinées à améliorer l’aspect visuel plus qu’à informer l’utilisateur.

Que devons-nous prendre en compte pour une solution fiable et robuste ?

L’optimisation de l’affichage de nos images de liste devra donc tenir compte :

  • De la possibilité de réduire les temps d’affichage sur ordinateurs et portables comme sur tablettes et mobiles.
  • De limiter la bande passante utilisée. Ce qui vous fera d’ailleurs réaliser des économies si vous servez votre contenu statique via un CDN (Content Delivery Network), ces derniers facturant la bande passante utilisée.
  • D’être efficace sur un maximum de navigateurs.
  • De pouvoir s’appliquer dans le cadre d’un développement de site en RWD (Responsive Web Design).
  • De pouvoir arbitrer sur la nécessité d’afficher une image sur la version tablette, desktop mais pas sur la version mobile

Exemple d’affichage d’images en mode responsive :

- Affichage Desktop

images responsive affichage desktop

- Affichage Tablette

affichage tablette

- Affichage mobile

affichage mobile

Dans les exemples présentés, l’image remplie toute la largeur du conteneur qui la supporte soit 25%, 50% ou 100% de largeur du conteneur de la liste. La largeur du conteneur peut donc varier en fonction de la taille de l’écran Desktop, Laptop, Tablette ou Mobile.

Les étapes de la mise en place de la solution

Étape 1 : Le CSS

Chargement des styles CSS par défaut, la solution que nous proposons intègre Bootstrap car c’est une solution simple et rapide pour développer un site responsive. Il n’est toutefois absolument pas nécessaire d’utiliser ce framework, vous pourrez vous baser sur vos codes CSS pour optimiser plus avant les chargements de page

<!-- chargement des styles bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="all" type="text/css" />
	<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="all" type="text/css" />

Notre image doit occuper toute la largeur d’un bloc sans que nous ne connaissions au préalable sa largeur. Il n’est donc naturellement pas possible d’en connaître la hauteur. Nous connaissons par contre le ratio de l’image que nous voulons afficher (16/9ème , 4/3 ou d’autres formats)

Nous utiliserons donc la technique de l’intrinsic ratio présentée sur le site de Alistapart.com pour contourner ce problème. Technique aussi appelée « padding-bottom hack » et décrite dans cet article de Anders Andersen & Tobias Järlund sur Smashing Magazine présentant une solution sur laquelle nous avons basé notre approche.

<code><!-- Styles obligatoires : nécessaires à la démonstration --></code></pre>
<code><code>
</code></code>

<style type="text/css"><!--
 /* padding-bottom hack */
 .images_ratio {
 padding-bottom:56.25%;
 display: block !important;
 height: 0;
 overflow: hidden;
 position: relative;
 }
 .images_ratio img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }

--></style><code><code>

Étape 2 : Le JavaScript

Pour faire fonctionner notre solution, nous utiliserons la librairie jQuery ainsi qu’un plugin très utile et pratique de Lazy Loading de Mika Tuupola qui offre différentes possibilités pour apporter plus de souplesse au chargement différé de vos images. Utiliser le plugin lazy-load pour jquery permet de définir :

  • Le nombre de pixels « sous la ligne de flottaison » à partir duquel on débute le chargement (threshold)
  • Si les images apparaissent à l’écran dans un ordre différent de celui du code source, vous pourrez demander au plugin de gérer les exceptions (failure_limit)
  • L’effet à utiliser pour afficher l’image (effect)

Le principe de ce plugin repose sur le fait que le navigateur va télécharger par défaut toutes les images contenant une source :

<img alt="" src="..." />

Le plugin propose un markup HTML qui ne va pas afficher l’URL de l’image dans l’attribut « src » mais dans un attribut de transition « data-original ». Lorsque l’utilisateur va scroller pour afficher le reste du contenu de la page, le plugin va alors transformer le « data-original » en « src » permettant au navigateur de charger l’image de façon différée.

Notre script intervient alors en surcouche de cette méthode d’affichage car au chargement de la page, il va :

  • Evaluer la largeur de la colonne où sera affichée l’image,
  • Le script modifiera l’un des attributs « data-src-XXX » (large, medium ou small) en « data-original »
  • Le plugin de lazy-loading prendra ensuite le relais
<!-- JS nécessaires à la démonstration -->
<script type="text/javascript" src="js/jquery.min.js">// <![CDATA[

<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">/* <![CDATA[ */ $(document).ready(function() { /* lazy-loading des images en fonction de la taille des conteneurs */ function img_lazy_fluid(cont){ var width = cont.find("li").width(); if (width > 640) { cont.find("li").each(function(){ var img = $(this).find("span img"); var src = img.attr("data-src-large"); img.attr("data-original",src); }); } else if (width > 320) { cont.find("li").each(function(){ var img = $(this).find("span img"); var src = img.attr("data-src-medium"); img.attr("data-original",src); }); } else { cont.find("li").each(function(){ var img = $(this).find("span img"); var src = img.attr("data-src-small"); img.attr("data-original",src); }); } cont.find("img.lazy").lazyload({ threshold : 50, failure_limit : 50, effect : "fadeIn" }); } img_lazy_fluid($("#liste_fluide")); }); /* ]]> */</script>
1
<b>Étape 3 : le HTML</b>

1

<ul id="liste_fluide">
	<li>
<span>
<img data-src-large="images/large-1.jpg" data-src-medium="images/medium-1.jpg" data-src-small="images/small-1.jpg" />
</span>

<div>
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</a></h4>

Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.
</div></li>
	<li>…</li>
	<li>…</li>
	<li>…</li>

…</ul>

Dans notre exemple nous fournirons 3 images de tailles différentes qui pourront servir à l’affichage d’une image au cas où le container de l’image fasse :

  • Moins de 320px de large
  • Entre 320px et 640px de large
  • Et plus de 640px de large

Rien n’est figé, vous pourrez bien sur adapter le script pour qu’il corresponde à un nombre de dimensions plus important et pour des tailles plus adaptées à votre design.

Détails sur la mise en œuvre de la solution

Dans l’exemple exposé :

<ul id="liste_fluide">

Il s’agit du container sur lequel nous allons appliquer notre solution

	<li>

La liste des images sera affichée sur :

  • 4 colonnes sur écrans Desktop
  • 2 colonnes sur écrans Laptop
  • 1 colonne sur tablette
  • Les images ne seront pas affichées sur mobile pour gagner en performances
<span>

Nous appliquons les styles fournis par les CSS sur le span qui contiendra les images
Si nécessaire, nous pouvons appliquer un :

hidden-xs, équivalent à : display:none;

sur l’affichage des images en version mobile

La solution présentée ici permet de contourner le casse-tête de la gestion du téléchargement des images avec media-queries ou modification du code source sous toutes ses formes envisageables comme cela a été étudié point par point lors de cette démonstration sur TimKadlec.com.

En effet, si le « span » est en statut « display:none; » alors le plugin de « lazy loading » ne convertira pas notre code source pour y afficher l’image (par défaut le plugin ne s’active pas sur les containers : « .not(":visible") »). Il n’y a donc pas de risques que les images soient chargées quel que soit le navigateur utilisé.

<img data-src-large="images/large-1.jpg" data-src-medium="images/medium-1.jpg" data-src-small="images/small-1.jpg" />

Nous disposons des URL des 3 images aux 3 formats différents (petit, moyen et grand) que nous souhaitons afficher en fonction de la largeur de la colonne. La class : « lazy » permet de pointer les images que le plugin de lazy loading doit traiter.

Pour les cas où l’utilisateur utilise un navigateur qui ne dispose pas de JavaScript activé, vous pouvez ajouter à ce code source une balise « noscript » qui contiendra l’URL de votre image originale :

<noscript><img src="img/ large-1.jpg" width="720" heigh="405"></noscript>

Images non responsive, images fixes

Pour des images non responsive, vous pouvez appliquer la même base

Étape 1 : Le JS

function img_lazy_fixed(cont){
cont.find("img.lazy").lazyload({
threshold : 50,
failure_limit : 50,
effect : "fadeIn"
});
}
img_lazy_fixed($("#liste_fixe"));

Étape 2 : Le HTML

<div id="fixed">
<div>
<ul id="liste_fixe">
	<li>
<span>
<img data-original="images/fixed-1.jpg" />
<noscript><img src="images/fixed-1.jpg"/></noscript>

</span>

<div>
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</a></h4>

Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.
</div></li>

…</ul>
</div>
</div>

Résultat escompté :
affichage fixe

Sources :

Nous vous conseillons la lecture de ces sources qui m’ont été d’une très grande utilité pour parvenir à développer cette solution :

Télécharger les exemples :

Pour faire des tests en direct, voici un *.zip de fichiers que vous pouvez utiliser : Télécharger le dossier.

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+Email this to someone
Partagez cet article!
Ajouter le votre
4 commentaires
Stéphane 24 avril 2014 - 18:05 - Répondre

Merci pour cet excellent tutoriel pour mettre en place des images responsives en gardant l’aspect SEO. Cependant, cela concerne seulement le temps de chargement de page qui bien sûr est un critère important mais on ne parle pas d’attribut alt pour les images. En tout cas j’ai pu quand même apprendre des astuces en terme d’intégration mais il faut souligner que la réalisation se fait avec un minimum de connaissance en javascript.

Jori 24 avril 2014 - 18:25 - Répondre

LazyLoading en SEO… quid du référencement des images? De leur Alt?

Ne deviennent-elles pas virtuellement invisibles aux yeux des robots?

Du coup, un site donc la principale caractéristique est de présenter de nombreuses images ne risque-t-il pas de se tirer une balle dans le pied en installant LazyLoading?

Gilles 25 avril 2014 - 11:07 - Répondre

Dans l’introduction de cet article il est indiqué : « Il ne s’agit ici que d’images qui n’ont pas vocation à être référencées ou indexées par Google. »

C’est à dire que si vous souhaitez mettre en ligne un portfolio avec des images de moyennes et grandes tailles qui ont un réel intérêt à être prises en compte par Google images, il ne faudra alors pas appliquer cette solution.

La solution fournie s’applique essentiellement à des images de type « imagettes » / « thumbnails » dont la version en plus grande taille est bien souvent sur une page à un niveau n+1

Linkonexion 12 mai 2014 - 11:54 - Répondre

Merci pour ces informations c’est exactement ce qu’il me fallait. Je débute dans la création de sites web et ce n’est pas toujours évident de connaître toutes les alternatives ! J’ai encore un peu de mal avec toutes ces données donc je pense que je vais faire appel à un développeur pour m’aider.