Images, RWD & SEO : comment charger le fichier adéquat ?
Les développeurs web doivent faire face à l’évolution permanente des technologies qui les entourent. Nous devons concevoir des sites qui s’adaptent à tous les terminaux (et plus uniquement à des écrans d’ordinateurs) et qui soient performants non seulement pour l’utilisateur mais aussi pour le référencement (SEO).
On conçoit donc des sites « responsifs » pour gérer l’affichage et rendre l’expérience utilisateur idéale en fonction du terminal utilisé (mobile, tablette, pc). Il est également conseillé d’optimiser le temps de chargement des pages, de réduire le nombre de requêtes HTTP, et de compresser nos différents fichiers en faisant un passage obligatoire sur les images.
Comment récupérer et afficher la bonne image en fonction du terminal ?
Etude de cas : sur notre site responsif www.mon-site.com nous avons une image sur le bandeau d’accueil qui fait 1200x500px pour 195ko. Pour l’afficher, un simple code comme celui-ci suffit :
<img src="./images/bandeau_accueil.jpg" alt="Bandeau" />Pour harmoniser l’affichage sur les différents terminaux on peut attribuer une taille fixe en fonction du breakpoint dans lequel on se trouve (par ex 800×500 pour les tablettes, et 320×135 pour les mobiles).
Problème : sur un mobile, nous n’avons pas besoin de charger une grosse image HD de 1200×500 (ça prend du temps, c’est mauvais pour l’UX et Google n’aime pas trop ça d’après son outil PageSpeed). Il nous faudrait dans l’idéal la même image en 320×135. Du coup comment dire à notre html de charger notre image dans la bonne taille ?
On prend notre image, on la retaille dans les 3 formats désirés, ce qui nous donne les trois fichiers suivants :
Unordered List
- bandeau_accueil_large.jpg (1200x500px – 195ko)
- bandeau_accueil_medium.jpg (800x500px – 95ko)
- bandeau_accueil_small.jpg (320x135px – 13ko)
Premier constat, outre la diminution de la taille en pixels, on divise par 14 le poids de notre image « small ». C’est déjà une bonne nouvelle. Maintenant on va se pencher sur la partie HTML, auparavant on avait un simple appel standard. Désormais on va utiliser la balise HTML5 <picture> pour lui spécifier plusieurs sources.
En voici la syntaxe :
<picture alt="Texte sur notre image">
<source srcset="image/bandeau_accueil_large.jpg" media="(min-width: 1200px)">
<source srcset="image/bandeau_accueil_medium.jpg" media="(min-width: 800px)">
<source srcset="image/bandeau_accueil_small.jpg" media="(min-width: 320px)">
<img srcset="image/bandeau_accueil_large.jpg" alt="image par défaut">
</picture>On ajoute une source par taille en spécifiant le chemin adéquat pour chaque image mais aussi sur quel breakpoint on souhaite que cela charge (media). On rajoute également un <img> pour spécifier l’image par défaut si le navigateur ne parvient pas à manipuler ou charger les sources du dessus. Dans notre cas on souhaite que par défaut il s’agisse de l’image la plus grande.
Peut-on utiliser la balise HTML5 <picture> sur n’importe quel navigateur ?
La réponse est non ! Petit détour sur Can I Use concernant notre balise <picture> qui n’est encore que très partiellement compatible. Pour remédier à ce problème nous avons opté pour le polyfill picturefill (plugin javascript) qui va faire en sorte que les notions HTML5 comme picture, srcset sizes, etc… fonctionnent sur les navigateurs anciens. Il suffit de rajouter l’appel au script juste en bas de notre page.
<script src="js/picturefill.min.js"></script>Le résultat ?
Nous obtenons désormais un temps de chargement meilleur sur nos tablettes / smartphones car les images sont plus rapides à charger (HTTP). De son côté PageSpeed ne nous demande plus d’optimiser notre image car elle a été compressée/optimisée et désormais nous est retournée sur le format adéquat.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test balise Picture</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Notre site de test</h1>
<picture alt="Texte sur notre image">
<source srcset="image/bandeau_accueil_large.jpg" media="(min-width: 1200px)">
<source srcset="image/bandeau_accueil_medium.jpg" media="(min-width: 800px)">
<source srcset="image/bandeau_accueil_small.jpg" media="(min-width: 320px)">
<img srcset="image/bandeau_accueil_large.jpg" alt="image par défaut">
</picture>
<script src="picturefill.min.js"></script>
</body>
</html>Il sera intéréssant de suivre dans le temps l’évolution des différentes balises HTML5 et de la compatibilité sur les navigateurs. Il existe également de nombreuses solutions/syntaxes pour répondre à ce problème de chargement d’image en fonction du format, etc… Nous avons opté pour celle-ci car elle nous semblait la plus simple et la plus sûre dans le temps. Affaire à suivre.
Originally published at Sois-net.