Le titre est trouvé, les couleurs fonctionnent, les horaires et les tarifs sont renseignés. Pourtant, la page ressemble encore à un modèle. Les photos pourraient aussi bien illustrer le site d’un autre atelier.
Remplacer les photos d’un modèle HTML fait souvent partie des dernières retouches. C’est aussi le cas pour une page créée avec l’IA ou livrée par un graphiste. La mise en page peut déjà convenir, alors que les visuels doivent encore refléter les produits, les services ou la collection du moment. En travaillant sur la page existante, on peut juger chaque photo à côté du texte qu’elle accompagne.
Prenons Claywell, un atelier de poterie fictif. En haut de sa page, une photo d’établi remplace une nature morte en noir et blanc pour évoquer le travail de l’argile. Plus bas, une illustration centrée sur un bol prend la place d’une photo de vaisselle pour mieux montrer les détails.
Changer les images directement dans la page HTML
Dans l’éditeur de fichiers HTML en ligne de HtmlDrag, choisissez « Importer HTML » pour ouvrir le fichier. Le fichier Claywell contient déjà ses images, sa police et ses styles. On retrouve ainsi la page du cours dans son ensemble.
Avant de chercher un nouveau visuel, observez la place des photos dans la page. Chez Claywell, la nature morte côtoie un encart jaune consacré au cours et un gros plan sur le modelage à la main. Changer la photo de gauche permet de revoir la première impression tout en gardant le titre, le prix et la photo de droite sous les yeux.
Choisir les visuels en fonction de ce que le lecteur cherche
Une boutique de céramique et un cours de poterie peuvent utiliser des photos similaires, mais les visiteurs n’y cherchent pas la même chose. Les pièces finies donnent une idée du résultat. Un établi avec de l’argile et des outils aide à s’imaginer en train de façonner une pièce. Pour un cours d’initiation, c’est cette impression qui compte dès l’ouverture.
Dans la section consacrée à la matière, le lecteur a déjà envie de regarder de plus près. À côté du titre « Il n’y a pas de forme parfaite », un seul bol révèle mieux le bord irrégulier et la texture de l’émail qu’un ensemble de tasses et d’assiettes. Les deux emplacements répondent à des questions différentes.
| Emplacement | Visuel adapté | Ce qui doit rester visible |
|---|---|---|
| Photo d’accueil ou scène d’activité | Une scène facile à comprendre avec de la marge autour du sujet. | L’activité d’un coup d’œil, avec le titre et le bouton principal. |
| Détail d’un produit ou d’une matière | Un seul sujet bien éclairé avec de la marge autour des contours importants. | La forme, la finition et la caractéristique mentionnée dans le texte. |
| Image d’appoint | Un autre angle, une texture ou un gros plan. | Un détail qui complète la photo principale. |
Lors de la sélection, tenez compte des proportions du fichier, de la marge autour du sujet et des détails visibles à la taille finale. Un format paysage peut perdre son élément principal dans un cadre étroit. À l’inverse, une image verticale avec assez de fond peut convenir à un cadre plus large.
Quelques lignes suffisent pour préciser la recherche, que vous choisissiez dans une photothèque ou confiiez les visuels à quelqu’un.
La page présente un cours de poterie pour débutants. Pour l’accueil, choisir une scène d’atelier avec un établi. Pour la partie sur la matière, montrer un seul bol bien lisible. Prévoir de la marge autour des mains et du bord du bol pour les cadrages sur ordinateur et mobile. Garder la mise en page et les informations validées du cours, et choisir des images fidèles à ce qui est présenté.
Les deux images d’origine donnent le point de départ. L’accueil montre une nature morte et la section sur la matière présente un ensemble de pièces de vaisselle.
Remplacer la photo d’accueil dans la mise en page existante
La nouvelle photo montre les outils, l’argile et l’établi sur lequel on travaille. À droite, le gros plan sur les mains laisse voir les gestes du modelage. Les deux photos donnent ainsi une idée du lieu et des gestes du modelage.
Dans HtmlDrag, faites un clic droit sur la photo à changer et sélectionnez « Remplacer l'image… ». Lorsque plusieurs images et encarts se touchent, vérifiez que vous avez bien sélectionné la photo à remplacer.
Le panneau propose « Téléverser depuis l’appareil » pour utiliser un fichier local et « Utiliser une image en ligne » pour renseigner l’URL d’une image déjà hébergée. La photo d’établi préparée pour cet exemple a été importée depuis l’appareil.
Une fois la photo en place, regardez l’ensemble du haut de page. Un visuel plus détaillé attire le regard, mais le prix du cours et le bouton principal doivent rester faciles à repérer. Une vignette dans la photothèque ne permet pas de juger cet équilibre.
Ici, l’établi riche en textures contraste avec la simplicité de l’encart jaune. La scène reste reconnaissable une fois recadrée. Sur votre propre page, vérifiez que le visuel situe l’activité et que le regard passe facilement du titre au bouton.
Centrer l’image de détail sur un seul sujet
Une image de détail gagne à montrer clairement une caractéristique. Pour de la céramique, ce peut être le bord, l’émail ou la surface. Pour un autre produit, un fermoir, une finition ou une étiquette. Choisissez ce qui doit être visible avant de décider à quel point le cadrage sera serré.
Le deuxième visuel de Claywell est une illustration de bol préparée en amont avec l’IA. Son émail clair et sa silhouette irrégulière accompagnent le texte consacré aux formes de la céramique.
La même fonction sert à remplacer cette image. Le fichier est vertical, alors que le cadre sur ordinateur est plus large. Le fond autour du bol permet de recadrer l’image sans couper son bord.
Le gros plan permet de voir le bol entier en lisant l’explication à côté. Appliquez ce test à vos visuels de produit ou de matière. Le détail cité dans le texte est-il visible ? Si un bord important disparaît, essayez une photo moins serrée ou un autre cadrage avant de retoucher la mise en page.
Pourquoi une nouvelle image est parfois coupée ou floue
L’image et la zone qui l’accueille ont chacune leurs proportions. Si elles diffèrent, la page peut recadrer la photo pour remplir son emplacement. C’est ce que fait la propriété CSS object-fit: cover. Elle conserve les proportions de l’image et rogne ce qui dépasse du cadre.
Une photo peut donc être entière dans votre photothèque et partiellement coupée sur le site. Regardez les bords du sujet dans le cadre réel et choisissez un cadrage qui préserve les détails utiles. Étirer la photo pour la faire rentrer peut déformer le produit ou l’objet présenté.
L’aperçu sur ordinateur permet de juger la première impression à une taille de lecture normale. Comprend-on l’activité sans examiner la photo longtemps ? Le visuel complète-t-il le titre ? Le bouton principal est-il facile à trouver ?
Dans la partie consacrée à la matière, le bol doit être assez grand pour que sa forme et sa surface restent visibles à côté du texte. En regardant chaque image là où elle apparaît, on repère des problèmes qu’une vue d’ensemble réduite peut masquer.
Si la photo semble floue, examinez d’abord le fichier source. Agrandir une petite vignette dans une zone large ne fait pas apparaître les détails manquants. Partez d’un original adapté, exportez-le pour le Web et vérifiez le résultat à sa taille d’affichage. Réduire la taille à l’écran ne réduit pas à lui seul le poids du fichier téléchargé.
Enregistrer les modifications et vérifier la vue mobile
Lorsque les deux photos fonctionnent dans la page, utilisez « Enregistrer la version ». Si vous préparez la mise en ligne, le volet « HTML modifié » de la fenêtre d’export propose « Télécharger le HTML » et « Copier le HTML ».
Les deux remplacements ont été enregistrés dans le projet Claywell. La section sur la matière reste disponible pour les retouches suivantes. Cette version peut servir de point de départ pour de nouvelles dates, un nouveau produit ou des photos de saison.
Regardez aussi la page à la largeur d’un téléphone. Le cadre peut se resserrer, une photo secondaire peut disparaître et les informations du cours peuvent changer de place. Vérifiez que le sujet principal reste reconnaissable. Chez Claywell, la photo de l’établi et l’encart jaune restent côte à côte dans une composition plus étroite.
Une nouvelle photo peut révéler qu’il manque une phrase d’explication. Ajoutez une courte légende sur la matière ou un lien depuis la photo du produit vers sa fiche. Si les visiteurs doivent comparer plusieurs cours, HtmlDrag permet aussi d’insérer un tableau et d’en modifier les cellules, les lignes et les colonnes.
Pendant les retouches, verrouillez au besoin les éléments déjà finalisés pour éviter de les déplacer par mégarde. Vous pouvez aussi supprimer une promotion qui a pris fin. Ces ajustements aident les nouvelles images à rester cohérentes avec le contenu de la page.
Avant d’utiliser la page mise à jour, vérifiez les points suivants.
- Les images prévues ont bien changé et leurs sujets restent reconnaissables.
- Les détails utiles sont visibles sur ordinateur et sur mobile.
- Les fichiers préparés pour le Web restent nets à leur taille d’affichage.
- Les légendes, les textes alternatifs et les crédits correspondent aux nouvelles images.
- Les images cliquables ouvrent les bonnes destinations.
- La version enregistrée et le HTML destiné à la publication contiennent les changements.
Si le sujet de la photo change, pensez aussi à relire le texte alternatif. Le guide de Google sur les images recommande un texte alternatif utile et lié au contenu de la page. Une description concrète de ce que montre l’image est plus utile qu’une suite de mots-clés.
Questions fréquentes sur le remplacement d’images dans une page HTML
Puis-je changer les images d’une page HTML créée avec l’IA ?
Oui, si le fichier HTML s’ouvre correctement dans l’éditeur. Vérifiez que les styles et les images se chargent, puis sélectionnez le visuel à remplacer. Si vous avez déjà préparé une image, vous pouvez l’utiliser directement, sans demander à l’IA d’en générer une autre.
Vaut-il mieux importer un fichier ou utiliser une URL ?
Importez le fichier si vous disposez déjà du visuel validé. Utilisez une URL si l’image est hébergée à une adresse stable et accessible. Vérifiez que l’adresse ouvre directement le fichier image. Si vous disposez seulement du lien d’une galerie ou d’une page de connexion, récupérez d’abord l’adresse de l’image.
Une image verticale peut-elle entrer dans un cadre large ?
Cela dépend de la marge autour du sujet. Avec le bol de Claywell, le fond laisse assez de place pour un recadrage horizontal. Une photo très serrée risque de perdre un détail important. Regardez le résultat dans le cadre réel et à la largeur d’un téléphone.
La légende et le lien changent-ils quand je remplace une image ?
La photo, la légende, le crédit et la destination du lien se vérifient séparément. Après le remplacement, relisez le texte autour de l’image et testez son lien, s’il y en a un.
Quelle taille prévoir pour une image de remplacement ?
La résolution doit convenir à la zone d’affichage, et le poids du fichier à un usage sur le Web. Une grande photo d’accueil demande souvent plus de détails qu’une petite image dans une carte. Jugez le résultat dans la page et consultez la limite d’import en vigueur.
Enregistrer mes modifications met-il mon site en ligne à jour ?
Les changements sont enregistrés dans le projet HtmlDrag. Pour un site hébergé séparément, utilisez le HTML modifié dans le processus de publication de ce site.
La photo de l’établi permet de se projeter dans l’atelier. L’image du bol permet d’en examiner la forme et l’émail. Si votre modèle HTML contient encore des photos génériques ou périmées, ouvrez-le dans l’éditeur HTML visuel et remplacez les photos à l’endroit où elles apparaissent déjà.