Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Pour faire suite à l’article sur l’optimisation des images, je reviens à la charge avec une solution pour rendre vos images adaptatives. Cela rendra votre site (encore) plus performant pour les supports mobiles et donc (encore) mieux noté par Google Page Speed. Je vous explique d’abord exactement ce que ça veut dire et ensuite je vais vous montrer comment mettre cela en place sur votre site WordPress.

Rendre ses images adaptatives, ça veut dire quoi ?

Si le design de votre site est responsive, vous avez remarqué que les images s’adaptent à la résolution du terminal. Bien souvent, cela est géré par une simple homothétie : c’est la même image qui s’affiche mais avec un coefficient de réduction (un zoom négatif). Par exemple, si vous utilisez une image qui fait 1200 pixels de large et d’un poids de 350 ko pour un affichage optimal sur un écran large, ce sera bien la même image qui sera utilisée pour les mobiles et qui fera télécharger aux smartphones les même 350 ko mais pour un affichage beaucoup plus petit. Pas forcément génial pour nos téléphones qui pour la plupart souffrent encore avec la 3G et des bandes passantes réduites…

Pour optimiser cela, un moyen est de créer une nouvelle version de l’image adaptée à chaque point de rupture de votre design. Par exemple, une version de l’image pour les terminaux qui font au moins 480 pixels (les smartphones), puis une autre pour les terminaux dont la résolution ne dépasse pas 768 pixels (les tablettes) ; et ainsi de suite pour les résolutions supérieures. Entre 2 points de rupture, on retrouve le principe de design fluide (ou élastique) avec une homothétie pour adapter l’image à la taille de l’écran.

Ainsi, chaque terminal ne chargera qu’une image optimisée et les performances n’en seront que meilleures. Des études montrent qu’au delà de 5 secondes de chargement sur un mobile, 90% des internautes passent à autre chose. De la même façon, Google prend en compte ce critère dans son classement de positionnement… Pour lui, c’est la taille qui compte… Optimiser ses images est donc bien une action hautement SEO !

1ère solution : par le plugin Pb responsive images

Ce plugin (plus d’infos ici) va optimiser pour vous les images de vos articles et créer pour les points de rupture demandés des versions adaptées de vos images. C’est ensuite en Javascript que la détection de la résolution de l’écran est faite et que l’image la plus optimisée est choisie parmi les différentes versions disponibles. Sans javascript, c’est l’image originale qui sera présentée.

Inconvénient : le paramétrage est technique (à vous de repérer les valeurs de rupture en regardant dans votre code CSS les lignes avec les media queries commençant par @media), mais tout le reste est automatisé.

2ème solution : utiliser « Adaptative Images »

La solution en PHP fournie par « Adaptative Images » est particulièrement intéressante car c’est une solution « server side » ; c’est à dire qu’elle n’utilise pas de code Javascript pour afficher la bonne image mais seulement du code PHP. C’est bien côté serveur que la taille de votre display est estimée et que la « bonne » image est sélectionnée.

Voici comment mettre en oeuvre cette solution sur votre site WordPress en 5 étapes. Ces opérations sont toutes réversibles et simples à faire ; mais réalisez toujours un backup avant ce type d’opération !

1) Télécharger le zip

Vous pouvez trouver ici la dernière version de Adaptative Images. C’est une archive ZIP que vous pouvez extraire n’importe où sur votre ordinateur.

2) Configurer et uploader adaptive-images.php

Vous allez maintenant configurer le fichier adaptive-images.php ; ouvrez le dans un éditeur de code comme Notepad++. Modifiez la variable « $resolutions » en mettant les points de rupture de votre thème. Si vous les ignorez, vous pouvez laisser la configuration par défaut.

Les images générées seront par défaut enregistrées dans un répertoire « ai-cache » mis à la racine de votre site. Vous pouvez modifier cela avec la variable « $cache_path ».

Vous pouvez aussi vous permettre de régler le niveau de compression des images (variable « $jpg_quality » ) par exemple.

Enfin, avec votre logiciel FTP favori (Filezilla ou FireFTP pour Firefox par exemple), mettez à la racine de votre site le fichier adaptive-images.php ; et ce même si votre site est dans un autre répertoire.

3) Modifier le fichier .htaccess

Ajoutez ces lignes dans le fichier .htaccess situé à la racine du site :

# BEGIN Adaptative
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin
RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php
</IfModule>
# END Adaptative

Ces instructions permettent de ne traiter que les images (jpg, gif, png) des pages et articles, et non celles de l’administration WordPress ou des plugins.

Attention, certains plugins (comme W3TotalCache ou WordPress SEO Yoast) remanient votre .htaccess et pourraient modifier ces lignes ; vérifiez de temps en temps qu’elles sont toujours présentes dans le fichier.

4) Ajouter une ligne de script dans header.php

Il s’agit maintenant de modifier le fichier header.php pour y ajouter cette ligne de javascript :

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

Ajouter la juste après la balise <head>. Je vous conseille également d’utiliser un thème enfant et d’y copier / coller le fichier header.php à partir du thème parent.

5) Tester votre site avec un smartphone

Vous verrez des images s’ajouter dans votre répertoire « ai-cache » au fur et à mesure des visites sur vos pages ; cela signifiera que le plugin fonctionne et créé des images adaptées aux visiteurs en fonction de leur terminal.

6) Inconvénient

Le principal soucis de cette solution est de ne pas être compatible avec une solution de cache (W3 Total Cache, Super Cache…). En effet, il ne sera pas possible pour le cache de différencier une image adaptée de son originale puisque le mécanisme se fait par une règle dans le .htaccess.

7) Avantage

N’hésitez pas à re-tester votre site avec Google Page Speed, vous verrez ainsi le résultat immédiatement ! Pour un client, le site est passé ainsi par exemple d’une note de 54/100 pour la partie mobile à 74/100 juste avec cette modification.

Elle vous permettra de gagner en performance, satisfaire vos utilisateurs mais aussi améliorer votre référencement. Merci enfin à Alan Green pour son article sur le sujet.

3ème solution : le plugin RICG Responsive Images

Cet autre plugin (RICG Responsive Images) est repris depuis début 2015 par l’équipe de WordPress et promet donc d’être la référence pour gérer l’adaptativité de vos images, et ce de façon plus intuitive et avec moins de paramétrage technique que le plugin présenté plus haut ; tout en étant compatible avec un cache de page.

En effet, le principe est d’utiliser la bibliothèque Javascript Picturefill pour adapter les images dynamiquement et en utilisant l’attribut HTML5 srcset des images. Cette propriété permet d’attribuer différentes sources à l’image pour différents formats.

Le seul inconvénient de cette solution « miracle » est qu’elle ne transformera pas les images qui ont déjà été placées dans vos articles ; mais seulement celles que vous insérerez avec le bouton « ajouter un media » après la mise en place du plugin (et qui passeront donc par le processus d’upload puisque c’est à ce moment que les différents format sont générés).