Photos : Unsplash
adalan n'a pas de banque d'images : les photos d'illustration viennent d'Unsplash. Une photo n'est pas obligatoire ; on en met une quand elle porte une idée (ouverture de partie, pause, message, couverture), pas pour remplir.
Trouver la photo
- Si un outil de recherche Unsplash est disponible (connecteur ou serveur MCP Unsplash), l'utiliser. Sinon, chercher sur unsplash.com.
- Chercher en anglais, par l'idée plutôt que par le sujet littéral : summit above clouds, rope team glacier, mountain road aerial, friends summit sunset, compass topographic map.
- Écarter les photos Unsplash+ (marquées « Unsplash+ », payantes et filigranées) : seules les photos sous licence Unsplash gratuite sont utilisables.
Choisir
L'univers visuel d'adalan est celui de la hauteur et de la progression : montagnes, sommets, chemins, cordées, cartes et boussoles, lumière de l'aube ou du crépuscule.
- Lumière naturelle, heure bleue ou dorée : les violets, bleus profonds et orangés s'accordent avec l'encre et la pêche.
- Des personnes petites dans le paysage, de dos ou de loin, en mouvement ou ensemble. Pas de visage qui fixe l'objectif.
- De l'espace calme d'un côté de l'image pour poser le texte (voile à gauche par défaut).
- À écarter : photos de bureau posées, poignées de main, personnes qui montrent un écran, robots, cerveaux lumineux, codes binaires, néons, mains qui touchent un hologramme.
- Une photo d'illustration ne se présente jamais comme une photo d'adalan, de son équipe, de ses bureaux ou d'un client.
Intégrer
- Adresse directe Unsplash avec ses paramètres :
https://images.unsplash.com/photo-<id>?auto=format&fit=crop&w=2400&q=80.w=2400pour un plein cadre,w=1400pour une demi-largeur,w=900pour une vignette. Sur un site, proposer plusieurs tailles ensrcset. - Pour un site en production, on peut aussi télécharger l'image et la servir avec les autres ressources (le site adalan.fr le fait). Via l'API Unsplash, la règle d'Unsplash est d'afficher l'adresse d'origine (hotlink) et de signaler le téléchargement : c'est ce que fait un connecteur.
object-fit: coveretobject-position(variable--posdansadalan.css) pour cadrer.- Texte alternatif en français, qui décrit ce qu'on voit : « Une cordée de quatre alpinistes gravit un glacier ».
Traiter
- Voile encre pour lire le texte : dégradé depuis la gauche (
.photo) ou uniforme depuis le bas (.photo--full). Jamais de voile noir. - Titre en blanc, mot accentué en pêche.
- Si la photo est trop vive, la désaturer légèrement (
filter: saturate(.75) brightness(.82)). - Mouvement facultatif : zoom arrière lent (1,16 à 1,02 sur 9 s), coupé sous
prefers-reduced-motion.
Créditer
La licence Unsplash n'oblige pas à créditer ; adalan crédite toujours.
- Format :
Photo : Prénom Nom / Unsplash(en anglais :Photo: First Last / Unsplash). Le nom est celui affiché sur la page Unsplash du photographe, écrit comme il l'écrit. - Placement : en bas à droite de la photo, en Monaspace 0,72 rem (13 px en présentation), blanc à 55-60 % sur la photo ; en text-3 sous une image sur fond clair.
- Un groupe de vignettes peut porter un crédit commun :
Photos d'illustration : Unsplash.