Depuis quelques années, et avec l’utilisation de plus en plus importante des terminaux mobiles pour naviguer sur internet, les designs responsives sont devenus monnaie courante. Cette tendance n’est d’ailleurs pas prête de s’arrêter, car de plus en plus de sites deviennent responsives. Seulement voilà, il existe encore et toujours quelques barrières à l’utilisation optimale du responsives et nous allons voir comment travailler sur un point particulier, les images, dans un thème WordPress.

Dans cet article, nous allons donc aborder un problème récurrent dans la création de design responsive, les images. Nous verrons comment utiliser les fonctions natives pour améliorer leurs utilisations. Mais avant tout, petit point sur la question.

Navigation sur mobile

Lorsque l’on pense responsive, la première chose sur laquelle on travaille est le gabarit de la page. Le positionnement des blocs, la taille des polices.

Même si cette étape est primordiale, il faut également se mettre à la place de l’utilisateur dans son utilisation générale. En effet, si de plus en plus de personnes utilisent leurs mobiles, beaucoup le font en utilisant la 3G. Ceci implique évidement une connexion relativement limitée, autant dans le débit que dans les limitations en données.

Il est donc important d’optimiser au maximum les images pour que celle-ci n’utilisent pas tout le forfait de vos visiteurs. Souvenez-vous, pour ceux qui l’ont connu, l’époque des connexions 56k, et des sites qui mettaient des minutes à charger.

Si vous n’étiez pas convaincus, voilà une étude menée par Google qui compare le temps de chargement entre mobiles et desktop.

La différence vous parait surement faible, mais en comparant en fonction de l’usage, le besoin de l’information est beaucoup plus rapide.

Les solutions pour accélérer vos sites existent. Minifier vos fichiers CSS et Javascript, utiliser un CDN pour le chargement de ces fichiers … Et optimiser vos images.

Des images responsives

Nous l’avons vu plus haut, un design responsive est avant tout un design qui s’adapte au support sur lequel il est consulté. La plupart des sites responsives utilisent d’ailleurs les « media queries » pour réaliser ce travail et ainsi cibler les mobiles, voir les tablettes.

Si vous utilisez une framework CSS « mobile first » pour réaliser votre site, comme Bootstrap ou Foundation, vous trouverez surement dans le code CSS ces quelques lignes :

img {
   max-width: 100%;
}

Cette technique permet aux images de s’adapter à leurs conteneurs. Cependant, elle ne réduira pas la taille des images, et se contentera donc d’afficher la même image, avec la même résolution.

Pour pallier à cela, il existe plusieurs solutions, qui ont toutes des points positifs comme des points négatifs, comme par exemple :

• Vous pouvez remplacer les images de votre code par des images de fond en css, et utiliser les media queries pour utiliser différentes versions de l’image en fonction du support. Attention à cette méthode, votre SEO risque d’en prendre un coup car les images, étant définies dans le CSS, ne possèdes pas de balise alt, bien appréciées des moteurs de recherches,
• Utiliser une solution Javascript, plutôt rapide pour la création de votre page, mais qui risquera de ralentir votre site internet,
• Utiliser la solution de Matt Wilcox « Adaptive Images« . Cette solution permet de ne pas toucher à votre code et s’implémente donc plutôt facilement dans toute sorte de site ou CMS, qui utilise PHP, mais nécessite que vous sépariez les images que vous souhaitez rendre responsive et les autres.

Vous le voyez, il existe beaucoup de solutions, pour beaucoup de problématiques différentes.

WordPress et les images responsives

Depuis la version 3 de WordPress, les images à la une sont beaucoup mieux gérées. Nous pouvons demander à WordPress de créer plusieurs tailles différentes pour la même images et leur attribuer des noms, afin de les réutiliser.

Notre exemple va vous montrer comment utiliser des images différentes en fonction du support utilisé. Pensez à bien adapter le code en fonction de la taille de votre site, des colonnes, et surtout des points de rupture réalisés avec les media queries. Nous supposons ici que l’affichage sur mobile et celui sur tablette se fait sur une seule colonne, et utilise dont la totalité de la largeur disponible.

Pour cette solution, nous allons donc utiliser ces fonctions et une librairie PHP qui permet de détecter sur quel support le site est visionné, Mobile Detect.

Téléchargez le fichier Mobile_Detect.php, et placez le dans votre thème. Pour notre tutoriel, il sera placé à la racine du thème. Ajoutez cette ligne à votre fichier functions.php :

/**
 * Appel de la librairie Mobile detect.
 */
require get_template_directory() . '/mobile_detect.php';

Nous avons maintenant besoin d’ajouter des tailles supplémentaires à WordPress. Pour cela, ajoutez à la suite ces lignes :

add_image_size('resp_mobile', '480', '9999');
add_image_size('resp_tablette', '1024', '9999');

La première ligne demander à WordPress de créer une miniature de 480px de large, avec une hauteur proportionnelle. La seconde, avec une largeur de 1024px.

Vous voyez arriver la suite, il faut maintenant modifier les fichiers qui utilisent les images à la une. Commencez par ajouter cette ligne dans votre fichier header.php :

<?php

$detect = new Mobile_Detect;

?>

Cette ligne appelle la classe que nous avons ajouté à notre thème tout à l’heure. Elle contient les informations sur le support utilisé par votre utilisateur.

Pour notre exemple, nous allons prendre le code d’un thème que nous réalisons en ce moment :

<?php if ( has_post_thumbnail()) : ?>
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('full'); ?>
</a>
<?php endif; ?>

Nous utilisons ici la fonction the_post_thumbnail() pour afficher notre image à la une. Cette fonction a pour paramètre la taille que vous souhaitez afficher, avec par défaut :

• thumbnail
  Thumbnail: par défaut, avec pour maximum 150 x 150 pixels
• medium
  Résolution moyenne : par défaut un maximum de 300 × 300 pixels
• large
  Grande résolution : par défaut avec un maximum de 640 × 640 pixels
• full
  Image entière : l’image envoyée complète

Souvenez-vous, nous avons créé 2 nouvelles tailles plus haut dans l’article. C’est ici que nous allons les utiliser. Remplace le code qui affiche votre image à la une par celui-ci :

<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php if ($detect->isMobile() && !$detect->isTablet()) {
the_post_thumbnail('single_phone');
} else if ($detect->isTablet()) {
the_post_thumbnail('single_tablet');
} else {
the_post_thumbnail('full');
} ?>
</a>
<?php endif; ?>

Le code s’explique de lui-même. La première condition vérifie que le support est un mobile mais pas une tablette et affiche la plus petite résolution, créée pour le mobile. La seconde affiche la version tablette de l’image, et la dernière, notre version originale.

Et voilà, vous voilà pourvu d’une solution réduisant le temps de chargement de votre image à la une.

Conclusion

Vous l’avez vu, en quelques lignes, nous permettons à WordPress d’afficher la taille optimisée d’une image à la une, réduisant automatiquement le temps de chargement de la page visitée.

Cette solution ne couvre pas les autres images et du travail reste encore à faire, mais apporte une pierre à l’édifice.

Partagez vous aussi vos solutions et astuces dans les commentaires et n’hésitez pas à partager les articles sur vos réseaux sociaux préférés !