Le guide ultime pour ajouter des images à vos articles WordPress

Mis à jour le 30 mars 2023

Vous avez déjà écrit votre premier article sur WordPress, c’est super ! Maintenant, il est temps d’ajouter des images pour rendre vos contenus plus attractifs. Sans images, un article c’est comme une journée sans soleil : pas très chaleureux ni très lumineux. Les images sont un élément clé pour gagner l’attention de vos visiteurs et illustrer vos propos.

Mais comment faire pour ajouter des images de manière simple et efficace sur WordPress ? Dans ce guide nous allons vous aider à comprendre les différents formats d’images. Comment les optimiser pour le web et le référencement ? En suivant, pas à pas, ce tutoriel vous saurez illustrer vos articles et les rendre plus attirants .Vous allez voir c’est un jeu d’enfant, et avec ces quelques astuces, vous pourrez améliorer la qualité de vos publications et offrir une expérience unique à vos lecteurs.

Prêt pour la visite guidée ? Allez, c’est parti !

Si vous êtes pressé, vous pouvez emprunter les chemins de traverse et aller directement aux réponses qui vous concernent via le sommaire. Et si vous voulez aller encore plus vite, rendez-vous aux points essentiels à retenir, toujours à l’aide du sommaire ci-dessous.

Étape 1 : bien préparer les images pour le web

Avant d’ajouter des images à vos articles WordPress, il est important de bien les choisir et les préparer.

Comment bien choisir ses images ?

Choisissez des images pertinentes pour votre contenu, à même d’attirer l’attention des lecteurs, enrichir le sujet, et, renforcer votre message. Évitez les images floues ou pixelisées qui pourraient nuire à la qualité visuelle de votre article.

Il est préférable d’avoir des images originales qui illustrent vos propos et démontrent votre expertise. En effet quoi de mieux que que ses propres photos de recettes pour votre article de blog cuisine 🧁.

Toutefois il n’est pas toujours possible de faire soi-même ses illustrations. Heureusement vous trouverez sur le web un certain nombre de banques d’images gratuites, qui pourront répondre à votre besoin. On peut citer, parmi les plus populaires, Unsplash, Pixabay ou encore Freepick où vous trouverez également des illustrations, des images vectorielles, des icônes et des PSD. Il existe aussi des plugins WordPress qui vous permettent de télécharger et d’ajouter des images directement depuis votre site.

Et si vous vous sentez l’âme inventive vous avez toujours la possibilité de d’exercer votre créativité avec les IA (Intelligence Artificielle) telles que Midjourney, DALL-E ou encore Canva.

Mais avant toute utilisation d’une image, assurez-vous de vérifier les conditions générales d’utilisation pour éviter toute violation de droit d’auteur et, si nécessaire, créditez l’auteur de l’image.

Quels formats d’image utiliser pour WordPress ?

WordPress prend en charge nativement les formats d’images pour le web les plus courants tels que JPEG, PNG et GIF. Le format JPEG est idéal pour les photographies car il offre un bon compromis entre qualité et taille de fichier. Le format PNG est recommandé pour les images avec des zones transparentes. Le format GIF est quant à lui principalement utilisé pour les animations.

Vous pouvez aussi utiliser des images WebP et SVG qui sont des formats d’image modernes, permettant d’améliorer la vitesse de chargement de votre site, la qualité visuelle de vos images et l’expérience utilisateur de vos visiteurs. Depuis la version 5.8 de WordPress (juillet 2021) WordPress prend en charge WebP et vous pouvez les téléverser sur votre site directement, de la même manière que les formats JPEG, PNG et GIF. Le format SVG n’est toujours pas supporté nativement par WordPress pour des raisons de sécurité.

Pour une meilleure utilisation de ces deux derniers formats d’image nous vous conseillons de mettre en place des plugins.

Comment choisir la bonne taille d’image pour WordPress ?

Il est également important de redimensionner et d’optimiser vos images avant de les ajouter à votre article. Cela permettra de réduire leur taille et d’améliorer les temps de chargement de votre page. La taille et le poids des images sont des éléments clés pour optimiser la vitesse de chargement de votre site web et améliorer l’expérience utilisateur (UX).

Tout d’abord, parlons de la taille des images. La taille d’une image se réfère à ses dimensions, généralement mesurées en pixels. Plus une image est grande, plus elle aura de pixels et plus elle sera lourde. Le poids d’une image concerne la quantité de données qu’elle contient, c’est pourquoi une image très colorée sera plus lourde qu’une image en noir et blanc par exemple.

Lors du téléversement de votre image, WordPress va créer, par défaut, un certain nombre de tailles pour les différents endroits de votre site web. Cela va de la miniature à la taille réelle. Votre thème peut lui aussi ajouter des tailles personnalisées selon sa configuration.

• Dimensions des images conseillées pour WordPress : tout va dépendre de l’endroit où votre image va être utilisée. Pour un article de blog, la taille de 1200 x 630 px, est recommandée pour les images à la une (ou image mise en avant) car elle correspond au format optimal pour le partage sur les réseaux sociaux. C’est aussi la taille minimale nécessaire pour que votre article soit éligible au flux Google Discover. Une image de 800 x 600 px peut être suffisante si vous l’insérez dans le corps du texte. La taille de votre image dépend avant tout de votre mise en page.
• Redimensionnement et compression des images : avant de les télécharger sur WordPress, assurez-vous que vos images ne sont pas plus grandes que nécessaire et redimensionnez-les à la taille adaptée à leur emploi. Vous pouvez utiliser des logiciels d’édition d’images tel que Photoshop qui vous permettent de redimensionner, modifier et éditer des images ou des outils gratuits en ligne comme I Love Img. D’autres outils en ligne tels que TinyPNG ou Compressor.io, vous permettent uniquement de compresser vos images sans sacrifier leur qualité. Et bien entendu comme souvent sur WordPress, il existe aussi des plugins qui peuvent vous aider à optimiser automatiquement vos images lors du téléchargement.

Respecter les dimensions et les formats appropriés pour chaque situation, redimensionner et compresser les images avant de les insérer dans votre article : en suivant ces conseils vous pouvez optimiser vos images pour le web et améliorer la performance de votre site.

Qu’est ce que l’image à la une dans un article de blog ?

WordPress possède différents types de blocs d’images tels les blocs image, galerie ou encore bannière, que vous pouvez intégrer à votre contenu, en fonction des besoins de votre mise en page. La plupart des plugins Gutenberg disposent également de leur propres blocs d’images avec des fonctionnalités plus ou moins étendues. Nous allons ici nous concentrer uniquement sur la différence entre l’image à la une et, le bloc d’image simple, natif à toute installation de WordPress.

L’image à la une ou, image mise en avant dans votre éditeur, est une image qui représente le contenu de votre article. Elle est généralement affichée en haut ou à côté du titre de votre article, selon les réglages de votre thème. Elle est aussi présente dans les listes d’articles, les pages d’archives de catégories ou dans les posts repris sur les réseaux sociaux.

Une image « normale » est une image que vous insérez dans le corps de votre texte, à l’endroit où vous le souhaitez. Elle peut servir à illustrer un paragraphe particulier, à compléter une information ou, plus simplement, à décorer votre contenu.

La différence entre une image mise en avant et une image normale réside donc dans leur fonction et leur emplacement. L’ image à la une est destinée à attirer l’attention sur votre article et, à donner un aperçu du sujet. C’est l’image principale de l’article.. Une image située dans le contenu de votre article, de son côté, est destinée à enrichir votre texte et à le rendre plus agréable à lire.

Étape 2 : ajouter des images dans un article WordPress

Une fois que vous avez bien préparé vos images, il est temps de les ajouter à votre article WordPress. En route pour la page de votre article et attelons-nous à notre fameuse image à la une.

1 . Mettre une image à la Une

Dans la colonne de droite, rendez-vous dans l’onglet article, puis ouvrez le menu déroulant “Image mise en avant”. Cliquez sur “Définir l’image mise en avant”

Une fenêtre “Image mise en avant” va s’ouvrir vous aurez alors le choix d’utiliser une image déjà présente dans votre médiathèque ou d’importer l’image que vous avez soigneusement préparée. Dans ce dernier cas vous pouvez soit uploader votre image en la déplaçant en drag & drop depuis votre ordinateur, soit en indiquant à WordPress son emplacement dans votre dossier.

Une fois votre image téléchargée, vous allez alors pouvoir remplir le champs “Texte alternatif”, vous savez, la fameuse balise alt, si important pour l’accessibilité (les lecteurs d’écran) et pour le SEO, ainsi que le champs “Nom de l’image”. Si vous ne le faites pas à cette étape pas de soucis, il vous sera toujours possible de le faire ou de le modifier par la suite. Cela dit, inutile de perdre votre temps avec des manipulations supplémentaires, autant remplir correctement ces champs dès le téléversement de votre image 😉

Tadaam ! 🥁 Vous avez réussi à mettre une image à la une dans votre article WordPress. Vous pourrez bien entendu supprimer l’image et la remplacer dans le même menu, si celle-ci ne vous convient pas.

À noter : la procédure pour téléverser une image est la même pour l’image mise en avant ou pour tout type d’images.

2. Intégrer une image dans le corps de l’article

Pour insérer le bloc Gutenberg image, natif de WordPress, vous avez trois possibilités :

1. dans la page cliquez sur l’icône « + »de l’Outil d’insertion de bloc et recherchez “image” puis sélectionnez votre bloc image
2. sur une nouvelle ligne utilisez le raccourci clavier /image et appuyez sur Entrée ou cliquer sur l’icône du bloc Image dans le menu qui vous est proposé
3. cliquez sur l’icône “+” de l’Outil d’insertion de bloc à droite du logo dans la barre supérieure de votre page afficher un aperçu des différents styles de blocs et recherchez “image ”, puis sélectionnez votre bloc d’image.

Il ne vous reste plus qu’à choisir la méthode qui vous convient le mieux.

Étape 3 : personnaliser et régler l’affichage des images

Une fois que vous avez inséré une image dans votre contenu avec Gutenberg, vous avez accès à plusieurs réglages pour personnaliser son affichage. Vous pouvez régler son alignement, ajouter une légende ou un texte alternatif (si vous ne l’avez pas déjà fait à l’étape précédente), modifier sa taille ou encore appliquer un filtre de couleur.

Nous avons détaillé, ci-dessous, les différents réglages disponibles pour modifier votre image. Vous n’aurez sans doute pas besoin de tous, mais autant savoir qu’ils existent si vous voulez les employer.

1. Redimensionner les images

Vous pouvez modifier la taille de vos images, bien que, comme nous l’avons vu auparavant, il est préférable d’avoir bien préparé ses images en amont pour optimiser la vitesse de chargement de la page et améliorer le confort des utilisateurs.

Pour modifier la taille de votre image, WordPress vous offre 2 possibilités :

1. choisir parmi les tailles générées par WordPress ou par votre thème en cliquant sur le flèche vers le bas, située de dessous du champs “Taille de l’image”
2. ajuster les dimensions selon un pourcentage prédéfini, 25, 50, 75 et 100 % de sa taille d’origine. Ou insérer les dimensions de votre choix, fixes en pixels dans les réglages du bloc qui se trouvent dans la barre latérale de droite, lorsque vous avez cliqué sur votre image.
3. redimensionner manuellement l’image en vous servant des poignées de redimensionnement représentées par les deux petits ronds à droite et en bas de votre image. Vous pourrez alors choisir visuellement, la taille que vous voulez. Votre image gardera le même ratio. Faites simplement glisser ces ronds vers l’intérieur ou vers l’extérieur de l’image jusqu’à l’obtention de la taille désirée.

Si vous n’êtes pas satisfait des nouvelles dimensions de votre image il vous suffira de cliquer sur le bouton “Réinitialiser” en bas à droite dans la section taille de l’image de la barre latérale 😉

Explorons maintenant les possibilités de réglages offerts par la barre d’outils qui se trouve au dessus de l’image.

2. Aligner les images

Pour aligner une image dans votre article, cliquez sur celle-ci, puis sur l’icône « Alignement » dans la barre d’outils qui apparaît au-dessus de l’image. Vous pouvez choisir entre aligner l’image à gauche, au centre ou à droite. Vous avez également accès aux options Grande largeur et Pleine largeur, si celles-ci sont prises en charge par votre thème ou par vos réglages de mise en page.

3. Mettre un lien sur l’image

Vous pouvez transformer vos images en hyperliens. Pour accéder aux réglages du lien, cliquez sur l’icône « lien » à gauche l’icône « alignement » dans la barre d’outils. Vous pouvez choisir l’action qui va être déclenchée par l’utilisateur en cliquant sur l’image : ouverture d’une page de pièce jointe, ouverture du fichier média d’origine ou ouverture de l’URL personnalisée que vous souhaitez.

Pour créer un lien vers votre URL spécifique, il vous suffit de la saisir dans la zone de texte qui apparaît. Vous pouvez également lier votre image à une page ou un article de votre site, WordPress va automatiquement rechercher la page lorsque vous commencez à saisir son titre. Il ne vous reste plus qu’à sélectionner la page que vous souhaiter associer à votre image. C’est bien pratique lorsque vous avez beaucoup de contenus, pas besoin d’aller chercher l’URL de vos pages dans tout votre site !

Vous pouvez avez encore la possibilité de choisir les réglages du lien en cliquant sur la flèche vers le bas située à droite du champs URL. Vous pouvez décider de laisser le lien s’ouvrir dans la même onglet ou dans un nouvel onglet lorsque votre visiteur va cliquer dessus.

4. Recadrer l’image et les autres outils d’édition de la barre d’outils

Vous pouvez aussi couper directement votre image dans WordPress pour répondre à un besoin spécifique de votre mise en page. Toujours dans la barre d’outils située au dessus de votre image qui apparaît, en cliquant sur cette dernière, vous avez accès à une icône “Recadrer” à droite de l’icône “Lien”. Cliquez sur l’icône et une une nouvelle sélection d’outils d’édition va être disponible.

Examinons les, en allant de gauche à droite, vous pouvez utiliser les commandes suivantes :

1. Zoom (la petite loupe) : vous pouvez zoomer à l’intérieur de votre image jusqu’à 300 % et la déplacer en cliquant et glissant pour afficher la partie de l’image que vous souhaitez agrandir.
2. Proportion de taille (le petit rectangle) : recadrez l’image en fonction de son ratio (rapport largeur/hauteur). Parmi les options disponibles vous aurez le choix entre les réglages suivants :
   • Taille d’origine
   • Carré
   • Paysage : 16:10, 16:9, 4:3, 3:2
   • Portrait : 10:16, 9:16, 3:4, 2:3
3. Rotation (la petit rond avec la flèche en semi pointillés) : d’un simple clic vous faites pivoter successivement votre image de 90°, 180°, 270° ou 360°.
4. Appliquer : pour valider vos modifications sur l’image.
5. Annuler : pour quitter les outils d’édition d’image et abandonner vos modifications.

Il est important de noter que les modifications faites sur votre image vont créer une nouvelle copie de l’image dans la médiathèque de WordPress, sans affecter l’image d’origine.

5. Ajouter du texte sur l’image

Vous pouvez également ajouter du texte sur votre image en cliquant sur l’icône “Ajouter du texte” (le A dans un carré ouvert). Le bloc image va se transformer automatiquement en un bloc bannière qui va vous permettre d’écrire sur votre image. Le bloc paragraphe qui va apparaître sur votre image est identique à celui que vous utilisez pour écrire vos articles et possède les mêmes réglages.

6. Appliquer un filtre bicolore sur l’image

Vous pouvez appliquer des filtres à votre image pour la personnaliser encore plus. Les filtres d’image ont l’avantage de ne pas alourdir votre site puisque ce sont des effets CSS appliqués à votre image. Si vous avez une charte graphique avec des couleurs bien définies vous pouvez même alléger vos visuels en utilisant des images en noir et blanc (plus légères que les images en couleur) et en y appliquant vos couleurs.

Le bloc image vous propose déjà un certain nombre de filtres prédéfinis, mais vous avez la possibilité de choisir n’importe quelle combinaison de couleurs. Si vous voulez utiliser cette option, nous vous conseillons de faire vos essais pour trouver le filtre idéal à utiliser pour tout votre site.

Dans l’exemple ci-dessous, nous avons choisi une photo en noir et blanc et simplement appliqué le filtre duotone violet et jaune des préréglages. Les possibilités sont cependant infinies, à vous de laisser libre cours à votre imagination.

Passons ensuite aux réglages du bloc image dans la barre latérale.

7. Arrondir l’image

L’onglet style de la barre latérale nous donne le choix entre 2 options :

1. “Par défaut” c’est à dire l’affichage de votre image telle que vous l’avez insérée.
2. “Arrondis” pour que l’image apparaisse sous forme ovale (si votre image était rectangulaire à l’origine) ou sous forme de cercle (si votre image était carrée).

8. Gérer plus finement les arrondis avec les option “Rayon” et “Bordures”

La “bordure”, comme son nom l’indique, va permettre d’ajouter une ligne de couleur sur les bords de votre image. Vous pourrez jouer avec les épaisseurs et les couleurs soit de manière uniforme, soit individuellement pour chaque bord.

Pour appliquer une bordure uniforme insérer le nombre de pixels pour l’épaisseur désirée. Vous pouvez aussi choisir votre unité de mesure en cliquant sur l’icône “px” : px, %, EM, REM, VW ou VH. Puis cliquez sur l’icône “cercle” pour sélectionner la couleur des bordures. Nous verrons dans l’illustration suivante, quelles options vous avez pour modifier les couleurs de bordures.

Il est important de noter que si vous avez appliqué un filtre duotone à votre image. Ce filtre s’appliquera aussi sur les bordures.

Pour régler les bordures individuelles :

1. cliquez d’abord sur l’icône “Lien” , elle va se transformer en lien brisé et désolidariser les bords les uns des autres.
2. Procédez individuellement pour chaque bord comme l’exemple précédent pour choisir l’épaisseur et la couleur.
3. Choix d’une couleur personnalisée : si vous ne souhaitez pas utiliser les couleurs par défaut de WordPress, ou celles réglées dans votre thème, vous avez la possibilité de déterminer une autre couleur en cliquant dans le champs numéro 3 (affiché en transparent au départ), au dessus du choix des couleurs préréglées.
4. Entrez alors le code HEX de votre couleur, ou choisissez-la à l’aide des curseurs, le curseur du dessous sert à régler la transparence.

Pas satisfait des modifications de vos bordures ? Aucun soucis ! Il vous suffit de cliquer sur les trois petits points situés à droite de l’onglet bordures (numéro 1 sur l’image) et ensuite de cliquer sur “Tout réinitialiser” pour revenir au point de départ et supprimer toutes vos modifications. Et éventuellement de tout recommencer depuis le début. 😃

Passons maintenant la personnalisation du “Rayon”, en gardant bien en tête que ces deux réglages peuvent s’additionner pour donner votre style à votre image.

De même que pour la personnalisation de vos bordures, les réglages des rayons de votre images peuvent être soit uniformes (les mêmes réglages appliqués aux quatre angles), soit individuels (un réglage différent pour chaque angle).

Réglages pour les rayons et exemple de combinaison avec les bordures :

1. Pour appliquer un même effet sur les 4 côtés : entrer la valeur en pixels dans la case rayon. vous pouvez aussi faire glisser le curseur jusqu’à obtention du visuel souhaité.
2. Pour appliquer un effet différent pour chacun des côtés : cliquez d’abord sur l’icône “Lien” pour désolidariser les rayons. puis entrez les valeurs en pixels pour chacun des rayons.
3. Vous pouvez combiner les deux réglages individuels des bordures et des rayons.

Vous pouvez laisser votre créativité s’exprimer, mais attention quand même à l’effet “sapin de Noël” et pensez à rester cohérent sur tous vos visuels et à garder une harmonie sur l’ensemble de votre site.

9. Ajouter une légende

Mettre une légende sous vos images peut s’avérer utile pour diverses raisons… entre autres, contextualiser et décrire votre image afin qu’elle soit mieux comprise et, améliorer le référencement en utilisant des mots-clés et des phrases qui correspondent au sujet de votre article.

Si vous n’avez pas déjà rédigé une légende lors du téléversement de votre image dans la médiathèque de WordPress, vous pouvez l’ajouter directement sur votre page. Dans la barre d’outils d’image, à droite de l’icône « Alignement », vous trouverez maintenant l’icône « Légende » (le carré avec trois petits points en bas), cliquez et écrivez dans le champs texte apparu sous votre image. Et voilà rien de plus simple, le tour, est joué vous avez décrit votre image !

PS : Depuis la sortie de WordPress 6.2 l’insertion de légende a changé de place, pour tous ceux qui n’auraient pas encore fait la mise à jour 😱, nous vous laissons encore quelques temps l’ancienne méthode. Pour activer l’option “légende” il vous suffit de cliquer sur l’image et d’écrire votre texte en dessous, là où vous verrez “Ajouter une légende”. Et voilà rien de plus simple, le tour, est joué vous avez décrit votre image !

Attention toutefois à ne pas confondre la légende et le texte alternatif : la légende apparaîtra sous l’image tandis que le texte alternatif sera utilisé par les moteurs de recherche et les lecteurs d’écran pour décrire le contenu visuel.

10. L’onglet avancé

Comme son nom l’indique, l’utilisation de cet onglet concerne surtout les utilisateurs avancés qui veulent personnaliser davantage l’apparence de l’image. Cet onglet vous permet d’ajouter un attribut de titre, une ancre HTML et des classes CSS personnalisées à votre bloc d’image. Il est à noter que cet onglet est présent sur tous les blocs Gutenberg de WordPress.

Les points essentiels à retenir pour ajouter des images à vos articles WordPress

• bien choisir ses images aux formats (JPEG, PNG et GIF) approprié à leur utilisation et les nommer correctement
• optimiser les images en taille et en poids (utiliser un outil de compression pour réduire la taille du fichier sans perdre de qualité) avant de les téléverser dans WordPress
• nommer votre image de manière descriptive et utiliser un texte alternatif pour améliorer l’accessibilité de votre site web et aussi votre référencement.
• ajouter l’image dans l’article soit en la téléversant depuis votre ordinateur, soit en choisissant une image déjà présente dans la médiathèque
• définir un alignement et une taille en fonction de votre mise en page
• utiliser les réglages d’effets visuels (rayons, bordures…) si cela correspond à votre charte graphique
• ajouter une légende selon vos besoins

En utilisant ces réglages, vous pouvez personnaliser l’apparence de votre image pour qu’elle s’intègre parfaitement à votre contenu et corresponde à votre style de marque.

Pro Tips : si comme dans cet article, vos propos nécessitent un certain nombre d’images d’illustration, vous pouvez les téléverser en une seule fois dans votre bibliothèque de médias afin de gagner du temps lors de la rédaction. Il ne faudra pas oublier dans ce cas de bien remplir le texte alternatif de vos images lors de leur insertion dans votre page. Et surtout n’oubliez pas que les images doivent être utilisées à bon escient car trop d’images dans une page va l’alourdir considérablement et ralentir son temps de téléchargement.

Conclusion

Vous avez eu le courage de nous lire jusque là ? Félicitations ! Vous êtes donc prêts maintenant à illustrer vos articles avec des images à la hauteur de votre texte. Vos articles vont devenir encore plus attrayants. Ils vont pouvoir susciter l’engagement de vos lecteurs qui seront plus enclins à dévorer votre contenu et à le partager sur leur réseaux sociaux. Et, cerise sur le gâteau, avec vos images bien optimisées pour le référencement et vos pages plus rapides, vous allez pouvoir aller faire de l’œil à Google et consorts.

Mais attention, même si poster une image avec Gutenberg est devenu pour vous un jeu d’enfant, ne vous laissez pas emporter par le pouvoir maléfique de la personnalisation, sous peine de rester des heures à régler chaque détail de votre image ! Souvenez-vous que le but principal d’une image est de rendre votre article plus attrayant pour vos lecteurs.

Et s’il vous reste encore des questions, n’hésitez pas à demander !