Avec Responsive Images, vous pouvez améliorer le temps de chargement des pages en créant des images de différentes tailles adaptées à la résolution réelle de l’écran du client. Surtout si le design utilise de très grandes images, par exemple dans un curseur, l’utilisation d’images réactives est recommandée pour obtenir une bonne valeur de vitesse de page. De plus, des images haute résolution Retina peuvent également être utilisées.

Drupal 8 contient déjà les modules nécessaires. Pour Drupal 7, cette fonction peut être réalisée avec les modules « Breakpoints » et « Picture« . Lors de la configuration de Drupal 7, il y a quelques particularités à prendre en compte.

Après avoir installé les modules, vous devez d’abord définir les points d’arrêt. Ceci peut être fait dans le backend sous Configuration  » Média  » Points de rupture et dans le fichier info du thème. Les points de rupture de base, par exemple, peuvent y être saisis :

points de rupture [téléphone] = (largeur min : 0px)
points de rupture [phablet] = (largeur max : 660px)
points de rupture [tablette] = (largeur max : 1024px)
points de rupture [ordinateur] = (largeur min : 1200px)

Dans le module Points de rupture, vous pouvez importer les spécifications du thème et ajouter des points d’arrêt supplémentaires. Ici, vous devez faire attention à l’ordre correct des points, sinon la sortie ne fonctionne pas comme souhaité. Si le module Image est utilisé dans une version > 7.2, les points de rupture doivent être triés par ordre croissant, en commençant par la plus petite taille d’écran. Si l’image < 7.2 est utilisée, l’ordre est décroissant.

Drupal 7 Points de rupture

Une fois que tous les points d’arrêt ont été définis, de nouveaux styles d’image peuvent être créés afin de créer une taille d’image appropriée pour chacun des points d’arrêt. Un style d’image existant peut être utilisé comme modèle et sera cloné.

Styles d’image Drupal pour les points d’arrêt

Cependant, les nouveaux styles d’image doivent encore être adaptés. Le module peut cloner un style existant, mais il ne définit pas automatiquement l’échelle correcte pour les points. Par conséquent, pour tous les nouveaux styles, la taille de mise à l’échelle correcte doit être saisie. Les nouveaux styles sont maintenant listés sous Configuration  » Média  » Styles d’image.

Styles d’image à partir des points d’arrêt

Le module Image est nécessaire pour utiliser les points d’arrêt de l’affichage. Ce module remplace le module image de Drupal. Par conséquent, l’affichage dans les vues et les types de contenu doivent être modifiés. Le module utilise la balise image relativement nouvelle, qui n’est pas encore prise en charge par tous les navigateurs. Par conséquent, vous devriez actuellement utiliser l’option existante pour une balise img ordinaire avec un style d’image simple.

Il se peut que vous ayez besoin de vider les caches pour rendre les images réactives.

Le mode « Responsive Design » de Safari n’est actuellement pas compatible, il affiche toujours la version la plus grande de l’image. Si le mode n’est pas utilisé et que seule la fenêtre du navigateur est réduite, l’image correcte est chargée.