La taille des images

Avec une différence d’espace pixel qui peut atteindre un rapport de 1 à 10 entre desktop et mobile, dites-vous bien qu’il faut souvent complètement revoir la mise en page. Autant le texte peut s’assouplir et passer à la ligne, autant l’image va devoir sérieusement s’adapter.

Les photographies gagneront souvent à être centrées plutôt qu’alignées à gauche ou à droite du texte et partager avec lui le peu d’espace disponible. Dans notre exemple, les photos de CNN ont beaucoup plus de force que les photos de La Libre.

La photo sur CNN a beaucoup plus de présence que sur La Libre.
Sources: m.lalibre.be (à gauche) et cnnmobile.com (à droite) – février 2012
Cet exemple est déjà fort ancien (les sites mentionnés ont évolué), mais notre propos reste totalement d’actualité. De nombreux sites d’entreprises continuent de massacrer les images en version mobile.

Mieux vaut centrer les images

Dans cet exemple, la version mobile du journal La Libre aligne, à droite du texte, une petite photo à peine lisible et très décentrée, qui perd énormément de son impact. CNN fait le choix de centrer la photo et lui faire occuper toute la largeur.

Il en est de même des encadrés: mieux vaut les centrer et leur offrir une vraie présence que de tenter de leur faire une maigre place à côté du texte.

Sur la page d’accueil, le scénario est différent, les images viennent en soutien des titres. Elles jouent le rôle de vignettes et donnent une structure à la page qui s’apparente à un menu. Dans un tel cas, privilégiez les gros plans sur des visages ou sur des objets plutôt que les plans larges qui perdent énormément de leur lisibilité lorsqu’ils sont ramenés à un petit format.

En mode vignette, privilégiez les gros plans.
Sources: m.lalibre.be (à gauche) et m.bbc.co.uk (à droite) – février 2012
À nouveau, cet exemple qui date d’il y a plusieurs années reste totalement d’actualité. Visitez le web de manière critique et vous verrez que de nombreux sites demeurent très inélégants en version mobile.

Nous ne rentrerons pas ici dans les détails techniques, mais sachez que de nombreuses discussions ont lieu autour du « Image Responsive Design », à savoir la manière dont vous allez programmer la réactivité des images en fonction de l’espace-écran disponible.

Les principales erreurs à éviter

Voici les principaux pièges que nous avons observés :

• Une image est trop grande, jusqu’à déborder l’espace disponible (c’est ce qui peut arriver quand la taille de l’image est fixée en valeur absolue).
• Une image est trop petite (c’est ce qui arrive, par exemple, quand l’image est redimensionnée brutalement sans adaptation de la mise en page).
• Une image est trop lourde (petite à l’écran, mais son poids de chargement est très lourd, car elle est redimensionnée à la volée, côté client, au lieu d’être compressée côté serveur).

Difficile de couvrir ici toutes les options de gestion « responsive » des images. Certains modèles Wordpress ou Drupal offrent de bonnes solutions clé sur porte, mais pour les sites professionnels sur mesure, les possibilités sont infinies. Vous pouvez même décider de ne pas afficher du tout, ou de remplacer, certaines images en version mobile.

Ci-dessous, voyez comme le WWF gère la variation de l’image du logo. En version desktop, le logo est plus grand, entouré d’un filet graphique et mordant sur l’image principale, tandis que dans la version mobile, il est un peu plus petit et complètement confiné dans le header. Il s’agit de la même page web, qui s’adapte automatiquement à l’espace-écran disponible.

Source : https://www.wwf.fr/especes-prioritaires/tigre - 3 septembre 2018

>> REVENIR AU SOMMAIRE DU DOSSIER <<
Rédiger pour les mobiles (12 bonnes pratiques)