Insérer des images dans WordPress

Insérer des images dans WordPress : concevoir des articles et des pages de manière professionnelle

Les images rendent les articles et les pages WordPress plus visuels, compréhensibles et professionnels. Elles permettent d'aérer les longs textes, d'expliquer des contenus complexes, de présenter des produits, de soutenir des guides et d'améliorer l'impact global de votre site web. En même temps, des images mal préparées peuvent ralentir le temps de chargement, consommer de l'espace de stockage et nuire à l'expérience utilisateur.

Dans ce guide, vous découvrirez comment insérer correctement des images dans l'éditeur WordPress, quels formats d'image sont judicieux, comment renseigner les textes alternatifs (alt), comment fonctionnent les galeries et les images mises en avant, et ce à quoi vous devez faire attention en matière de performance, de référencement (SEO) et d'accessibilité.

Pourquoi les images sont importantes

Les images remplissent plusieurs fonctions sur un site web. Elles ne sont pas de simples décorations, elles permettent d'expliquer un contenu, d'instaurer la confiance et de guider les utilisateurs de manière ciblée.

Les images contribuent à :

• des guides plus compréhensibles,
• un design plus professionnel,
• une meilleure lisibilité des longs articles,
• la présentation des produits,
• l'impact de la marque,
• l'accessibilité, lorsque les textes alternatifs sont correctement renseignés,
• le SEO, lorsque les images sont intégrées en lien avec le thème,
• les aperçus sur les réseaux sociaux, lorsque les images mises en avant sont utilisées.

Les images obtiennent le meilleur effet lorsqu'elles ne sont pas insérées au hasard, mais soutiennent le contenu de manière ciblée.

1. Préparer les images avant le téléversement

Avant de téléverser une image dans WordPress, vous devez la préparer. De nombreuses images issues de smartphones, d'appareils photo ou de logiciels graphiques sont beaucoup plus volumineuses que nécessaire pour un site web.

Vérifiez avant le téléversement :

• L'image est-elle vraiment nécessaire ?
• Le cadrage de l'image est-il correct ?
• Le fichier est-il compressé ?
• La largeur de l'image est-elle adaptée ?
• Le fichier a-t-il un nom explicite ?
• Le bon format de fichier est-il choisi ?
• L'image ne contient-elle pas d'informations confidentielles ?

Pour de nombreuses images de contenu, des largeurs comprises entre environ 1200 et 1920 pixels suffisent. Les petits graphiques, logos ou icônes nécessitent beaucoup moins. Ne téléversez pas de fichiers non modifiés de 5 Mo ou 10 Mo si l'image ne s'affiche qu'en petit sur le site web.

2. Choisir le bon format d'image

Le format de l'image influence la qualité, la taille du fichier et l'affichage. Tous les formats ne sont pas idéaux pour tous les usages.

Pour les images de contenu normales, le WebP est souvent un très bon choix. Pour les graphiques transparents, le PNG peut être judicieux. Pour les photos, le JPG reste très répandu, mais doit être bien compressé.

3. Utiliser de bons noms de fichiers

Le nom du fichier doit être ajusté avant le téléversement. WordPress intègre le nom du fichier dans l'URL de l'élément média. Bien qu'il soit possible de modifier le titre visible par la suite, le fichier lui-même reste généralement enregistré sous son nom d'origine.

De bons noms de fichiers sont :

• courts,
• compréhensibles,
• écrits en minuscules,
• séparés par des traits d'union,
• sans accents ni trémas,
• sans espaces,
• sans caractères spéciaux,
• adaptés au thème.

Exemples :

• Bon : wordpress-insérer-image-editeur-bloc.webp
• Bon : photo-produit-tasse-cafe-noire.jpg
• Moins bon : IMG_8392.JPG
• Moins bon : Image nouveau final grand!!.png

4. Insérer une image dans l'éditeur de blocs

Dans les versions modernes de WordPress, vous insérez la plupart du temps les images via l'éditeur de blocs. Le bloc correspondant s'appelle Image.

Voici comment procéder :

1. Ouvrez l'article ou la page souhaitée.
2. Cliquez à l'endroit où l'image doit apparaître.
3. Cliquez sur le symbole Plus.
4. Recherchez Image.
5. Sélectionnez le bloc Image.
6. Choisissez si vous souhaitez téléverser une image, en sélectionner une dans la Médiathèque ou l'insérer à partir d'une URL.

Après l'insertion, vous pouvez ajuster l'alignement, la taille, le comportement du lien, le texte alternatif et d'autres paramètres.

5. Téléverser, Médiathèque ou URL ?

Lors de l'insértion d'une image, WordPress propose plusieurs options. Chaque variante a un usage différent.

6. Sélectionner la taille de l'image dans l'éditeur

Après l'insertion, vous pouvez choisir la taille de l'image à afficher. WordPress génère plusieurs tailles d'image lors du téléversement en fonction de vos réglages.

Options typiques :

• Miniature : très petite, adaptée aux aperçus ou aux petits éléments.
• Moyenne : adaptée aux images de contenu plus petites.
• Grande : adaptée aux zones de contenu larges.
• Taille originale : fichier d'origine, à n'utiliser que si cela est vraiment nécessaire.

N'utilisez pas automatiquement la taille originale. Si l'image ne s'affiche qu'en 800 pixels de large dans l'article, il n'est pas nécessaire de charger un fichier de 4000 pixels.

7. Ajuster l'alignement et la présentation

La barre d'outils du bloc Image vous permet de modifier l'alignement. Selon le thème, différentes options sont disponibles.

Alignements possibles :

• aligner à gauche,
• centrer,
• aligner à droite,
• grande largeur,
• pleine largeur.

Tous les thèmes ne prennent pas en charge la « grande largeur » ou la « pleine largeur » de la même manière. Vérifiez toujours le rendu dans l'aperçu après l'enregistrement, en particulier sur les appareils mobiles.

8. Renseigner correctement le texte alternatif (Alt)

Le texte alternatif décrit ce qui est visible sur une image. Il est important pour l'accessibilité, la compréhension des images et les moteurs de recherche. Les lecteurs d'écran peuvent lire les textes alternatifs à haute voix lorsque les utilisateurs ne peuvent pas voir l'image.

Un bon texte alternatif :

• décrit précisément le contenu de l'image,
• n'est pas trop long,
• ne contient pas une liste de mots-clés,
• correspond au contexte de l'article,
• est éventuellement laissé vide pour les images purement décoratives.

Exemples :

• Bon : Éditeur WordPress avec le bloc Image ouvert
• Bon : Photo de produit d'une tasse à café noire sur fond clair
• Mauvais : Image
• Mauvais : WordPress SEO image hébergement Suisse acheter rapide pas cher

Les textes alternatifs doivent être écrits pour des humains, et non comme une collection artificielle de mots-clés.

9. Utiliser les légendes d'images

Une légende d'image est un texte visible situé directement sous l'image. Elle est optionnelle, mais peut être utile si l'image nécessite des explications supplémentaires.

Les légendes sont adaptées pour :

• les captures d'écran dans les guides,
• les diagrammes,
• les statistiques,
• les détails de produits,
• les crédits photographiques,
• les images comparatives,
• les photos avec contexte.

N'utilisez pas de légendes inutilement pour des images purement décoratives.

10. Lier des images ou non ?

Dans les réglages de l'image, vous pouvez définir si une image doit comporter un lien. WordPress propose différentes options selon le bloc et la version.

Cibles de lien possibles :

• Aucun : l'image n'est pas cliquable.
• Fichier média : le clic ouvre le fichier image.
• Page du fichier joint : WordPress crée une page spécifique pour l'image.
• URL personnalisée : l'image renvoie vers l'adresse de votre choix.

Pour les images de contenu normales, Aucun est souvent le meilleur choix. Si une image doit être vue en grand, un lien vers le fichier média peut être judicieux. Les pages de fichiers joints ne sont souvent pas idéales du point de vue du SEO car elles génèrent des pages à faible contenu (thin content).

11. Définir l'image mise en avant

L'image mise en avant (ou Featured Image) est une image spécifique dédiée aux articles ou aux pages. De nombreux thèmes l'affichent dans les listes de blogs, les pages d'archives, les mises en page en cartes, les zones d'en-tête ou les aperçus sur les réseaux sociaux.

Dans l'éditeur, vous trouverez généralement l'image mise en avant dans la barre latérale droite sous l'onglet Image mise en avant.

Une bonne image mise en avant doit :

• correspondre au sujet,
• avoir un format uniforme,
• ne pas être trop volumineuse,
• avoir un aspect professionnel,
• être soignée sur les appareils mobiles,
• recevoir un texte alternatif pertinent, si nécessaire.

Pour un blog ou une base de connaissances, des images mises en avant uniformes paraissent nettement plus professionnelles que des formats d'images aléatoires.

12. Utiliser le bloc Galerie

Si vous souhaitez afficher plusieurs images sous forme de grille, utilisez le bloc Galerie. Il permet de sélectionner plusieurs images dans la Médiathèque et de les afficher ensemble.

Les galeries sont adaptées pour :

• les photos de projets,
• les variantes de produits,
• les images avant-après,
• les photos d'événements,
• les références,
• les guides étape par étape.

Avec les galeries, faites particulièrement attention à la taille des fichiers et au Lazy Loading (chargement différé). De nombreuses images volumineuses sur une seule page peuvent considérablement augmenter le temps de chargement.

13. Insérer des images dans des colonnes ou des mises en page

Si vous souhaitez présenter du texte et une image côte à côte, vous pouvez utiliser le bloc Colonnes ou le bloc Groupe. De nombreux thèmes et constructeurs de pages (page builders) offrent des possibilités de mise en page supplémentaires.

Domaines d'application typiques :

• image à gauche, texte à droite,
• comparaison de deux images,
• présentation d'équipe,
• avantages produit,
• sections de fonctionnalités,
• pages d'atterrissage (landing pages).

Vérifiez toujours ces mises en page sur mobile. Ce qui rend bien sur un ordinateur de bureau peut sembler trop étroit ou désordonné sur un smartphone.

14. Insérer des images dans l'éditeur classique

Si vous utilisez l'éditeur classique, l'insertion fonctionne un peu différemment. Vous utilisez le bouton Ajouter un média situé au-dessus de l'éditeur de texte.

La procédure :

1. Ouvrir l'article ou la page.
2. Placer le curseur à l'endroit souhaité.
3. Cliquer sur Ajouter un média.
4. Téléverser l'image ou la choisir dans la Médiathèque.
5. Définir le texte alternatif, l'alignement et la taille.
6. Cliquer sur Insérer dans l'article.

Les mêmes règles de base s'appliquent également dans l'éditeur classique : optimiser les images au préalable, utiliser des noms de fichiers explicites et renseigner les textes alternatifs.

15. Utiliser des captures d'écran dans les guides

Les captures d'écran sont particulièrement utiles pour les articles de base de connaissances et les guides techniques. Elles montrent exactement où l'utilisateur doit cliquer ou quel réglage est visé.

De bonnes captures d'écran doivent :

• ne montrer que la zone concernée,
• ne contenir aucune donnée personnelle,
• ne pas afficher de données clients,
• ne pas être inutilement volumineuses,
• être marquées ou légendées si nécessaire,
• correspondre fidèlement à l'interface décrite.

Si l'interface d'un logiciel change, les captures d'écran doivent également être régulièrement vérifiées et mises à jour.

16. Les images et le temps de chargement

Les images comptent parmi les causes les plus fréquentes de lenteur des sites web. En particulier, plusieurs grandes images dans un seul article peuvent considérablement augmenter le temps de chargement.

Optimisez les temps de chargement grâce à :

• des images compressées,
• des dimensions d'image adaptées,
• le format WebP, si judicieux,
• le Lazy Loading,
• pas de galeries inutiles,
• pas de fichiers originaux téléversés en taille réelle,
• une configuration de mise en cache propre,
• un hébergement rapide.

WordPress prend en charge automatiquement le Lazy Loading pour de nombreuses images. Malgré tout, vous ne devez pas vous reposer uniquement là-dessus. Un fichier trop volumineux reste volumineux, même s'il est chargé plus tard.

17. Les images et l'affichage mobile

De nombreux visiteurs consultent les sites web depuis leur smartphone. C'est pourquoi les images doivent être belles et charger rapidement sur les petits écrans.

Vérifiez :

• L'image s'adapte-t-elle correctement sur mobile ?
• Le cadrage de l'image reste-t-il judicieux sur les petits appareils ?
• L'image ne dépasse-t-elle pas de l'écran ?
• Les galeries sont-elles maniables sur mobile ?
• Le texte à côté des images reste-t-il lisible ?
• Les détails importants ne sont-ils pas affichés en trop petit ?

Utilisez l'aperçu dans l'éditeur WordPress ou testez directement sur un smartphone.

18. Erreurs courantes lors de l'insertion d'images

• Téléverser directement les images d'origine : Les gros fichiers nuisent au temps de chargement et alourdissent les sauvegardes.
• Absence de texte alternatif : Mauvais pour l'accessibilité et la compréhension des images.
• Mauvais format : Le PNG pour les grandes photos entraîne souvent des fichiers inutilement lourds.
• Intégrer des images externes sans vérification : Risques juridiques, techniques et de performance.
• Utiliser la taille originale : Le navigateur doit charger des images inutilement grandes.
• Images mises en avant hétérogènes : Les listes de blogs manquent de professionnalisme.
• Trop d'images par page : Temps de chargement longs et mise en page surchargée.
• Images non vérifiées sur mobile : L'affichage peut être dégradé sur smartphone.

SEO et GEO : Utiliser les images comme contexte

Les images peuvent rendre les contenus plus compréhensibles et fournir des signaux supplémentaires. Pour le SEO, le nom du fichier, le texte alternatif, le contexte, le temps de chargement et l'intégration technique sont primordiaux. Les images doivent soutenir le sujet et ne pas servir uniquement de décoration.

Pour la GEO (Generative Engine Optimization), les images sont particulièrement utiles lorsqu'elles ont un caractère explicatif : captures d'écran, diagrammes, images de produits, représentations avant-après ou illustrations étape par étape. Pour que ces contenus soient bien compris, ils doivent être légendés de manière judicieuse et expliqués dans le texte.

Bonnes pratiques :

• expliquer l'image dans l'environnement textuel,
• utiliser un texte alternatif précis,
• décrire les étapes visibles sur les captures d'écran,
• ne pas utiliser d'images de stock inutiles sans valeur informative,
• garder les images à jour,
• laisser les fichiers d'images techniquement accessibles.

Procédure recommandée

1. Sélectionner l'image : N'utiliser que des images qui soutiennent le contenu.
2. Préparer le fichier : Recadrer, réduire la taille et compresser.
3. Ajuster le nom du fichier : Minuscules, traits d'union, pas d'accents ni de caractères spéciaux.
4. Téléverser l'image : Via le bloc Image ou la Médiathèque.
5. Choisir la taille d'image adaptée : Ne pas utiliser automatiquement la taille originale.
6. Renseigner le texte alternatif : Décrire le contenu de l'image de manière naturelle.
7. Vérifier l'alignement : Contrôler le rendu dans l'article.
8. Tester l'aperçu mobile : Vérifier l'affichage sur smartphone.
9. Prendre en compte le temps de chargement : Surtout avec plusieurs images ou galeries.
10. Définir l'image mise en avant : Utile pour l'affichage des blogs et des archives.

Questions fréquentes sur l'insertion d'images dans WordPress

Comment insérer une image dans WordPress ?

Ouvrez l'article ou la page, cliquez sur le symbole Plus, choisissez le bloc Image et téléversez un fichier ou sélectionnez une image dans la Médiathèque.

Quelle taille d'image dois-je utiliser ?

Utilisez la plus petite taille qui reste esthétique dans la mise en page. La taille originale complète est rarement nécessaire pour les images de contenu normales.

Qu'est-ce que le texte alternatif (alt) ?

Le texte alternatif décrit le contenu de l'image pour les lecteurs d'écran, les moteurs de recherche et les situations où l'image ne se charge pas.

Dois-je utiliser le WebP ?

Le WebP est très bien adapté pour de nombreuses images de sites web car il permet une qualité élevée avec une petite taille de fichier. Vérifiez néanmoins si votre flux de travail et votre site web le prennent correctement en charge.

Puis-je insérer des images à partir d'URL externes ?

Techniquement oui, mais ce n'est souvent pas recommandé. Les images externes peuvent disparaître, charger plus lentement, poser des questions de confidentialité ou violer des droits d'utilisation.

Quelle est la différence entre une image et une image mise en avant ?

Une image normale apparaît au sein du contenu. L'image mise en avant est une vignette d'aperçu spécifique que de nombreux thèmes utilisent dans les listes de blogs, les archives ou les partages sur les réseaux sociaux.

Comment insérer plusieurs images ?

Utilisez le bloc Galerie. Il permet de sélectionner plusieurs images dans la Médiathèque et de les afficher sous forme de grille.

Pourquoi mon site charge-t-il lentement après avoir inséré des images ?

Souvent, les images sont trop volumineuses, non compressées ou intégrées en taille réelle d'origine. Optimisez la taille du fichier, le format et les dimensions de l'image.