Les images : le moyen le plus rapide de rendre un site réel

Une vraie photographie bat toutes les astuces de mise en page

Vous pouvez passer une heure à affiner les espacements et la typographie, et une seule vraie photographie de votre atelier, de votre plat ou de votre travail fera plus pour la crédibilité que tout ça. L’imagerie générique fait l’inverse : elle signale qu’il n’y avait rien de réel à montrer.

Utilisée en grand compte autant qu’utilisée tout court. Une image qui court sur toute la largeur, travaillée dans la composition, se lit comme voulue. La même image en petite vignette arrondie dans une rangée de trois se lit comme un template.

Où vivent les images

Une publication porte le site lui-même : HTML, CSS, JavaScript, SVG. Les photographies et les autres fichiers binaires vivent dans votre médiathèque, chargés une fois et réutilisables par chaque version, ce qui fait que changer une page ne veut jamais dire recharger vos photos.

1. 1Ouvrez votre site dans votre espace SayLive et allez dans Médias.
2. 2Chargez vos photos. 50 Mo sont inclus avec le site, et ça s’étend si vous en avez besoin de plus.
3. 3Dites à votre agent de les utiliser : chaque fichier est servi à /_media/son-nom.jpg

Votre agent voit la liste de ce que vous avez chargé, donc une fois les fichiers là, il les place lui-même. Vous n’avez pas à décrire chacun. La documentation couvre la médiathèque, y compris quoi faire quand 50 Mo ne suffisent pas.

Ne liez jamais une photo depuis un autre site

Laissé à lui-même, un assistant fera parfois pointer une image vers une URL trouvée ailleurs. La page a l’air correcte le jour où elle est construite et casse en silence plus tard : l’autre site se réorganise, le fichier bouge, et votre hero devient une icône cassée. Personne ne vous prévient, parce que vos propres fichiers sont tous intacts.

C’est aussi la bande passante de quelqu’un d’autre, et parfois la licence de quelqu’un d’autre. Si vous n’avez pas de photographie à vous pour un bloc, dites-le et décidez : un emplacement visiblement provisoire, une image correctement licenciée que vous chargez vous-même, ou un design qui n’a pas besoin de l’image du tout.

Les quatre règles qui gardent la page rapide

• •Largeur et hauteur fixées dans le HTML, pour que la page ne saute pas pendant que les images chargent
• •Chargement différé pour tout ce qui est sous la ligne de flottaison, pour que le premier écran n’attende pas le reste
• •Un format moderne et un poids raisonnable : un hero ne devrait pas être un fichier de 2 Mo
• •Deux polices au plus, auto-hébergées plutôt que tirées d’un service tiers qui bloque le premier rendu

Ce ne sont pas des raffinements. Un premier écran lent perd des visiteurs avant qu’un mot soit lu, et c’est la seule chose que la plupart des pages construites par IA ratent, parce que le modèle n’a aucune idée du poids du fichier qu’il vient de référencer.

Le texte alternatif, en une ligne

Chaque image informative reçoit un alt qui décrit ce qui est montré, pas « image1 » ni le nom du fichier. Les images purement décoratives reçoivent un alt vide pour qu’un lecteur d’écran les saute. Ça prend quelques secondes à votre agent quand vous le demandez, et c’est la différence entre un site qu’un visiteur aveugle peut utiliser et un site qu’il ne peut pas. Ça nourrit aussi la recherche : le texte alternatif est l’un des dix contrôles du guide SEO.

Pour voir ce que des images en grand donnent vraiment sur une page finie, les exemples valent deux minutes.

Dites ceci