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
– Affichage Tablette
– 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
[code lang= »html »]<!– 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 » />[/code]
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 lang= »css »]
<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>
[/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 :
[code lang= »html »]
<img alt= » » src= »… » />
[/code]
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
[code lang= »js »]
<!– 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>
[code]
<b>Étape 3 : le HTML</b>
[code lang= »html »]
<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>
[/code]
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é :
[code lang= »html »]
<ul id= »liste_fluide »>
[/code]
Il s’agit du container sur lequel nous allons appliquer notre solution
[code lang= »html »]
<li>
[/code]
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
[code lang= »html »]
<span>
[/code]
Nous appliquons les styles fournis par les CSS sur le span qui contiendra les images
Si nécessaire, nous pouvons appliquer un :
[code lang= »css »]
hidden-xs, équivalent à : display:none;
[/code]
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é.
[code lang= »js »]
<img data-src-large= »images/large-1.jpg » data-src-medium= »images/medium-1.jpg » data-src-small= »images/small-1.jpg » />
[/code]
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 :
[code lang= »js »]
<noscript><img src= »img/ large-1.jpg » width= »720″ heigh= »405″></noscript>
[/code]
Images non responsive, images fixes
Pour des images non responsive, vous pouvez appliquer la même base
Étape 1 : Le JS
[code lang= »js »]
function img_lazy_fixed(cont){
cont.find(« img.lazy »).lazyload({
threshold : 50,
failure_limit : 50,
effect : « fadeIn »
});
}
img_lazy_fixed($(« #liste_fixe »));
[/code]
Étape 2 : Le HTML
[code lang= »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>
[/code]
Résultat escompté :
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 :
- Technique de l’intrinsic ratio pour l’affichage des vidéos sur Alistapart.com
- Technique du padding-bottom hack sur Smashing Magazine
- Medias queries et download des images cross-navigateurs
- Optimisation des logos de SPIP et Responsive Web Design
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.
