Comment illustrer un site web ?
Tout le monde le sait, une image vaut 1000 mots. Un bon site a bien souvent besoin d’illustrations pour transmettre un message ou des valeurs.
Cependant, les images sont à double tranchant et il n’est pas évident de trouver le bon équilibre entre celles-ci et vos contenus.
Comment choisir des photos, les mettre en valeur et les intégrer dans votre mise en page ? Découvrez quelques exemples et bonnes pratiques à respecter pour un site web bien illustré !
L'agencement
Le positionnement d’une image dans une page web représente son sens et son importance. Votre charte graphique doit être suffisamment flexible pour intégrer des images de tout type et de toute importance.
Cependant, avec toutes les contraintes techniques (responsive, performances, contenus administrables), on tourne assez vite en rond quand on doit disposer des médias sur un site web.
Voici quelques exemples que l'on retrouve assez souvent :
Hero
Ce composant a pour objectif de mettre en valeur une image et d’offrir une accroche + une action. On l’utilise comme introduction d’une page web, ou même d’une section entière.
L’avantage de ce genre d’images est qu’on n’a pas besoin de sujet. Ce sont des images d’ambiance, amenées à être recadrées.
Image pleine largeur
Quand vous utilisez toute la largeur disponible, votre image sert alors d’introduction et donne le ton de tout ce qui va suivre.
Tout comme le composant Hero, on peut utiliser une image d’ambiance ou un sujet, en fonction des contenus de la page courante.
Attention toutefois à bien avoir un sujet centré, car les images en fullsize vont être redimensionnées et recadrées en fonction du support.
Image flottante
En utilisant une image flottante, vous souhaitez illustrer le contenu juxtaposée à celle-ci. Ni plus, ni moins. Il est recommandé de prévoir un emplacement pour une légende, ainsi qu’une lightbox dessus, car ce sont des images qui font rarement plus de 400px de large.
Il est donc nécessaire de donner un moyen à vos visiteurs de voir cette image en taille réelle.
Images dans des listes
Très courant dans des pages intermédiaires, ou dans des blogs, l’utilisation d’images dans les listes est parfait pour illustrer ce vers quoi l’utilisateur va aller. Afin de conserver la logique de navigation, il est conseillé de répéter le titre et l’image dans la page de destination.
On retrouve souvent ce genre de composants sur les sites web car ils s’adaptent parfaitement aux grilles responsive existantes, et donc ne demandent que peu, voire pas de travail d’intégration.
Galerie d’images + Lightbox
C’est un composant plus rare, mais on en trouve de temps à autre en fin d’article, comme des actualités ou des évènements, pour disposer l’ensemble des photos “en vrac”.
Associé avec une lightbox pour pouvoir zoomer sur chaque élément, il faut cependant bien le coupler avec des miniatures et un script de lazyload car il y a bien souvent beaucoup d’images à charger.
Le lazyload est une technique permettant de déclencher le chargement des images uniquement quand l’utilisateur va les voir. Par exemple, si une image se trouve en bas de page, on ne la chargera que s’il commence à scroller dans la page.
Cela permet ainsi d’optimiser les performances, et d’économiser des échanges de données inutiles.
Votre charte graphique doit également prendre en compte l’absence d’images. En effet, si vous n’avez pas d’images à mettre, il est inutile d’en chercher une.
Vous pouvez faire prévoir à votre designer une image à utiliser par défaut si l’espace normalement pris par une image est indispensable.
Redimensionnement, cadrage & responsive
Sujet assez récurrent quand il s’agit de la présentation des images, les squelettes impliquent bien souvent qu’une image doit faire la même hauteur que le texte, que le sujet soit toujours cadré, et sur tous les supports.
Il se trouve que ce n’est pas aussi simple que ça, l’informatique, ce n’est hélas pas magique. Et c’est pourquoi le choix d’une bonne photo de base est important.
Si une image est importante, votre sujet devrait être centré et prendre toute la largeur disponible. Ainsi, sur tous les supports, le système conservera le ratio de l’image, ainsi que la position du sujet.
A contrario, une image qui doit s’adapter à des éléments environnants ne devrait être qu’une image d’ambiance, sans sujet. Cela laissera la liberté au système de la recadrer et de respecter le positionnement sans trop de contraintes.
Les faux pas
Parfois évidents, parfois pas tant que ça. Voici quelques exemples de faux-pas que l'on retrouve assez régulièrement sur Internet.
Illustrer à tout prix
Dans un design de site web, les squelettes ne laissent globalement pas le choix. Il faut illustrer chaque page, chaque contenu. Du coup, quand on a rien, on se tourne bien souvent vers une photo générique, ou une photo achetée qui se rapproche du sujet.
Ce qui a pour conséquence de rendre la page impersonnelle, et donc n’illustre pas vos contenus. Il vaut mieux un texte seul que mal accompagné !
Il est par exemple fort probable que vous ayez déjà vu la bande de joyeux lurons en réunion ci-contre :)
Trop de qualité tue la qualité
Quand vous faites faire des photos par un professionnel, on se retrouve bien généralement avec des photos faisant une résolution de dingue et un poids proportionnel.
Un écran, même récent, ne dépasse que très rarement les 1920px de large, cela ne sert donc pas à grand chose d’avoir une image en 4K.
De plus, une image en 4K pèse bien plus lourd, et va demander plus de ressources aux utilisateurs. Même si de plus en plus, les sites Internet intègrent des scripts de lazy-load et d’images redimensionnées et choisies selon le support.
Ne pas utiliser la bonne extension
Il existe plusieurs extensions pour indiquer qu’un fichier est une image. Les principales sont le JPG, le PNG et le GIF. Elles correspondent à la façon dont sont compressées les images, utilisant des algorithmes différents, pour des usages différents.
En effet, le JPG est le format le plus léger, mais il est incapable de comprendre la transparence, qu’il transformera en blanc. Si vos photos contiennent de la transparence, elles devront être en PNG. Quant au GIF, il est bien souvent utilisé pour des “mini-vidéos”, car il s’agit d’un ensemble d’images bouclant sur elles-mêmes.
Le slider
Un slider est un bon moyen de condenser un grand nombre d’illustrations dans un espace relativement réduit. Malheureusement, si la théorie est bonne, le constat est tout autre.
Sur une page d’accueil, l’utilisation d’un slider montre un taux de conversion assez faible car si la première image est vue à tous les coups, la seconde image n’est vue qu’à 20% et la troisième à 5%. Compte-tenu du gâchis de performances indu par un slider, autant ne mettre qu’une image. Elle fera tout aussi bien le job.
Images & SEO
Comme pour toute règle de SEO actuelle, les moteurs cherchent à analyser les images comme le ferait un humain. Pour cela il va vérifier tout d’abord les deux informations textuelles fiables dont il dispose : Le nom de l’image et sa balise alt.
Si la balise alt n’est pas obligatoire, elle devrait être systématiquement renseignée car le nom de votre image pourrait être altéré si vous utilisez un système de redimensionnement. En effet, lorsqu’une image temporaire est générée, elle perd bien souvent la clarté de son nom, d’où l’intérêt d’une balise alt, qui ne serait pas altérée.
De plus, le moteur peut s’appuyer sur les contenus environnants, comme la légende de l’image, ou les textes se trouvant au plus proche de l’image. Cependant, ce n’est jamais une science exacte car nous ne disposons d’aucune source à ce sujet.
Enfin, il se pourrait bien qu’avec le développement des IA capables d’analyser des images, que la façon de les référencer change drastiquement au cours des prochaines années. En effet, ce n’est que spéculation, mais si on arrive correctement à analyser une image et ses sujets, plus besoin de balise alternative, de nom explicite, ou d’analyser les contenus associés.
Voici quelques liens pour aller plus loin sur le sujet :
Ressources
Bibliothèques de photos :
- Pexels : https://www.pexels.com/
- Stocksnap : https://stocksnap.io/
- Shutterstock : https://www.shutterstock.com/fr/
- Adobe Stock: https://stock.adobe.com/
- 20 autres sites web : https://designmodo.com/free-photos/
Sites web pour modifier / recadrer / réduire une image :
- https://tinyjpg.com/
- https://tinypng.com/
- https://resizemyimg.com/
- https://www.iloveimg.com
- https://imageresize.org/
- http://www.picresize.com
- https://www.webdesignerdepot.com/2018/07/the-best-image-compression-tools-for-the-web
Effets CSS disponibles sur les images :
Cette liste est non-exhaustive et représente les outils que nous utilisons régulièrement. Il en existe bien d'autres, probablement mieux. Il est également possible que cette liste contienne des liens obsolètes, selon la date de lecture de l'article.
Si vous venez du futur et que vous en avez connaissance, dites-le nous :D
Le check-up des bonnes pratiques
- Vérifiez que vos images aient toutes une balise alt
- Redimensionnement automatique côté serveur si les images sont trop grandes
- Redimensionnement automatique CSS : https://getbootstrap.com/docs/4.1/content/images/
- Script de lazy-load : https://github.com/verlok/lazyload
- Sources d'images différentes selon supports : https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web
Dans la même catégorie