Choisir, remplacer et cadrer une image

Une photographie donne le ton de votre page. Choisissez d’abord le sujet, puis adaptez sa place : une photo entière et une photo qui remplit un cadre ne montrent pas forcément les mêmes détails.

1. Sélectionner la bonne image

Ouvrez la page dans Design, passez en Expert, puis sélectionnez la photographie. Ce mode donne accès aux réglages visuels, sans code. Si le clic sélectionne le conteneur, retrouvez l’image dans Calques.

Le groupe Image concerne un élément image. Pour une photographie utilisée en arrière-plan, utilisez les réglages du fond. Pour une source reliée au CMS, changez le contenu ou sa liaison plutôt que de remplacer toutes les images par une même valeur fixe.

2. Importer ou choisir un fichier

Dans Image, choisissez Gestionnaire de fichiers, puis Changer de fichier ou Sélectionner un fichier selon la source actuelle. La bibliothèque du projet s’ouvre.

Cliquez sur le bouton de téléversement, choisissez votre photographie sur votre ordinateur et attendez son apparition dans la bibliothèque. En vue en grille, cliquez sur la photographie à utiliser. Pour remplacer une image, vous pouvez aussi choisir un fichier déjà présent, sans le téléverser à nouveau.

Préparez une image adaptée à la taille d’affichage et vérifiez que vous avez le droit de l’utiliser. Un fichier très lourd ralentit le chargement ; agrandir un petit fichier ne crée pas de détails supplémentaires.

3. Choisir le cadrage

Dans Ajustement de l’objet, comparez Contenir et Couvrir dans le rendu de la page.

• Contenir montre l’image entière dans son cadre. Des espaces peuvent rester autour si les proportions diffèrent.
• Couvrir remplit le cadre. Les bords de la photographie peuvent être coupés.
• Remplir suit les dimensions du cadre et peut déformer une image si les proportions diffèrent.
• Aucun garde la taille naturelle de la photographie dans le cadre. Une partie peut rester hors de la zone visible.
• Réduire conserve la taille naturelle ou réduit l’image pour la faire entrer, selon l’espace disponible.

Le réglage modifie l’affichage, sans découper le fichier d’origine. Pour voir une différence entre Contenir et Couvrir, le cadre doit avoir des proportions différentes de la photographie. Dans la démonstration, sa hauteur est définie et sa largeur suit la page. Sur une image dont la hauteur reste automatique, les deux choix peuvent paraître identiques.

Gardez visibles les visages, le produit et les détails importants. Vérifiez aussi les dimensions de l’élément si la place réservée à l’image ne convient pas.

4. Renseigner le texte alternatif

Dans Texte alt., décrivez brièvement l’information utile. Par exemple : « Lac alpin entouré de montagnes, au bord d’un sentier ». Ce texte aide les personnes qui ne voient pas l’image ; il peut aussi apparaître si le fichier ne charge pas.

Décrivez ce qui sert à comprendre la page. Évitez les listes de mots-clés et les détails sans rapport avec le sujet. Pour une image purement décorative, un texte alternatif vide évite une description inutile. Pour une image cliquable, sa description doit aider à comprendre la destination.

5. Vérifier sur téléphone

Passez au cadre mobile et regardez le sujet de la photographie. Un cadre étroit peut rogner davantage les côtés avec Couvrir. Comparez à nouveau avec Contenir si nécessaire.

Vous pouvez comparer les écrans côte à côte. Si vous changez la hauteur selon l’écran, utilisez une règle d’écran et contrôlez sa portée.

6. Enregistrer et contrôler le site

Enregistrez, rechargez la page pour retrouver vos réglages, puis ouvrez la prévisualisation publiée. Vérifiez que la photographie charge, que son cadrage reste lisible et qu’elle ne dépasse pas l’écran, sur ordinateur et téléphone.

Remplacer la photographie de cet élément ne remplace pas automatiquement toutes les autres utilisations du même fichier. Avant de supprimer un fichier de la bibliothèque, vérifiez où il est utilisé.