Aujourd'hui, nous tombons en panne comment ajouter des images dans WordPress et réduisez leur taille de fichier (pour que vos pages et vos articles se chargent le plus rapidement possible).

Lorsque vous apprenez les bases de la création d'un blog, il y a beaucoup de choses à comprendre, je comprends. Nous avons expliqué comment changer la taille de la police, changer la couleur de la police, créer un lien cliquable et bien plus encore ici.

La bonne nouvelle est qu'en 2020, il est désormais très facile d'apprendre à ajouter des images dans WordPress avec toutes les mises à jour et améliorations de l'utilisabilité qu'ils ont vues au cours de la dernière décennie.

Dans ce didacticiel rapide, je vais vous montrer comment ajouter des images dans des articles WordPress, à la fois dans Classique Éditeur (que je préfère utiliser) et à travers leur plus récent Gutenberg Éditeur.

Maintenant, essayons d'ajouter des images à vos publications WordPress, tout en réduisant autant que possible la taille de leur fichier, pour rester en ligne avec les meilleures pratiques de référencement et pour que vos pages se chargent le plus rapidement possible.

Comment ajouter des images WordPress (et réduire la taille du fichier) en 2020

  1. Ajouter des images aux publications dans l'éditeur WordPress classique
  2. Ajouter des images aux publications dans l'éditeur Gutenberg WordPress
  3. Ajouter une image sélectionnée à un message dans WordPress

Maintenant, rapidement, avant de plonger dans ce didacticiel sur l'ajout d'images à WordPress, je vais vous montrer comment réduire la taille du fichier d'une image (en aidant vos messages à se charger plus rapidement) en 2 étapes faciles.

Installez le plugin (gratuit) de compression d'images JPEG et PNG par Tiny PNG

Plugin de compression d'image WordPress (par Tiny PNG)

Vous pouvez télécharger gratuitement le plugin Compress JPEG & PNG Images pour WordPress ici à partir de la bibliothèque de plugins WordPress.

Alternativement, vous pouvez également rechercher le plugin et l'installer directement à l'intérieur de votre menu du plugin, accessible sur le côté gauche de la section d'administration de votre blog ici – ou consultez ce tutoriel rapide sur la façon d'installer un plugin WordPress:

Ajouter une nouvelle capture d'écran du plugin

Une fois que vous avez installé le plugin Compress JPEG & PNG Images, chaque nouvelle image que vous téléchargez sur votre blog WordPress sera optimisé automatiquement et la taille du fichier réduite autant que possible sans compromettre la qualité de votre image.

Remarque: C'est de loin le meilleur plugin de compression d'image sur le marché. Il permet jusqu'à 500 compressions d'images gratuites par mois (ce qui est beaucoup plus que ce dont vous aurez probablement besoin) avant d'avoir à passer à un plan payant à 0,009 $ / image au-delà de vos 500 premiers mois. C'est une bonne affaire et vous ne trouverez pas de meilleur plugin de compression qui vous donnera plus de crédits gratuits.

Cependant, si vous souhaitez effectuer une compression d'image directement sur votre propre ordinateur (illimité gratuitement), je recommande l'application ImageOptim.

Téléchargez vos images

C'est ça! Sérieusement, c'est aussi simple que cela.

Une fois que vous avez installé le plugin de compression sur votre blog – ou que vous avez d'abord compressé des images individuelles sur votre ordinateur – vous êtes prêt à les télécharger sur vos publications ou pages dans WordPress.

Maintenant, examinons exactement comment ajouter des images à WordPress.

1. Ajouter des images à des publications dans l'éditeur WordPress classique

Si vous êtes comme moi et que vous préférez Présentation de l'éditeur WordPress classique pour ajouter / modifier vos articles, puis suivez ici.

D'un autre côté, si vous utilisez le nouvel éditeur Gutenberg pour le contenu de votre publication, passez à la section suivante pour cette procédure pas à pas. Si vous n'êtes pas sûr de l'éditeur que vous utilisez, jetez un œil aux captures d'écran ci-dessous et comparez-les à l'apparence de votre éditeur. Vous souhaitez utiliser l'éditeur classique, mais vous ne savez pas comment l'obtenir? Prenez 2 minutes pour suivre le didacticiel simple de Yoast sur l'installation de l'éditeur classique sur votre blog WordPress.

1. Ouvrez la publication à laquelle vous ajoutez des images (et trouvez le bon endroit)

Tout d'abord, vous devez vous assurer que vous êtes bien dans la publication à laquelle vous souhaitez ajouter une image.

Ensuite, vous souhaiterez déplacer votre curseur à l'endroit exact de votre publication auquel vous souhaitez ajouter l'image.

2. Cliquez sur le bouton "Ajouter un média" en haut de votre éditeur

Ce bouton ressemblera à ceci ici:

Capture d'écran du bouton Ajouter un média (Éditeur WordPress classique)

Une fois que vous avez cliqué sur le bouton "Ajouter un média", vous serez présenté avec l'écran où vous pouvez télécharger votre fichier image.

3. Cliquez sur "Télécharger des fichiers"

Cliquez sur l'onglet "Télécharger des fichiers" et vous serez redirigé vers l'écran où vous pouvez utiliser l'outil de sélection pour sélectionner un fichier image à partir de l'endroit où il se trouve sur votre ordinateur.

Téléchargez une nouvelle image dans WordPress (Éditeur classique)

Alternativement, si vous faites glisser un fichier image depuis votre bureau et que vous le téléchargez, vous pouvez ignorer l'écran «Télécharger des fichiers» et simplement vous déplacer directement pour faire glisser l'image vers et la déposer (il y a une démonstration de cela à l'étape suivante) .

4. Téléchargez votre fichier image

Je préfère faire glisser les fichiers image depuis mon bureau et les déposer dans le téléchargeur de fichiers (plutôt que d'utiliser le sélecteur pour les localiser sur mon ordinateur), car c'est beaucoup plus rapide.

Voici une démonstration vidéo / GIF rapide sur la façon d'ajouter une image de votre bureau dans WordPress:

Comment ajouter une nouvelle image à WordPress (Éditeur classique) GIF

Une fois que vous avez téléchargé votre image, le plug-in de compression fonctionnera comme par magie pour aider à réduire la taille du fichier (en arrière-plan).

Remarque: Avant de terminer vos options d'image et de cliquer sur "Insérer dans le message", vous voudrez rédiger un texte alternatif convivial pour votre image – quelque chose qui décrit la nature de ce qui se passe dans votre image, et idéalement tissé dans l'un des cibler les mots clés pour lesquels vous espérez que l'article finira par se classer (dans les résultats de recherche naturels).

5. Sélectionnez vos options d'image et cliquez sur "Insérer dans le message"

Enfin, vous aurez quelques options à définir pour votre image. Ceci comprend:

  • Contrôle de l'alignement de la façon dont votre image apparaît dans votre publication (je sélectionne toujours l'alignement au centre)
  • Faire votre lien d'image vers une autre page ou publier sur votre blog (ou un lien externe vers lequel vous souhaitez diriger les lecteurs)
  • Taille d'affichage (je recommande toujours le téléchargement en taille réelle pour éviter une perte de qualité d'image)

Options d'image dans WordPress

Après avoir sélectionné ces options, vous êtes prêt à cliquer sur "Insérer dans le message" et vous êtes prêt à partir!

Ce bouton sera juste ici dans le coin inférieur droit de votre écran:

Insérer un bouton d'image dans WordPress

Maintenant, vous serez ramené à la fenêtre de votre éditeur et vous verrez l'image que vous venez d'ajouter assise juste là où vous l'avez téléchargée.

Gardez à l'esprit que vous avez encore des options d'édition rapides et faciles si vous décidez de changer quelque chose avec l'affichage de votre nouvelle image:

  • Vous pouvez le redimensionner manuellement en saisissant l'un des coins et en le faisant glisser vers le haut ou vers le bas de la taille
  • Vous pouvez cliquer sur le centre de l'image et la faire glisser dans votre publication pour la repositionner
  • Vous pouvez toujours supprimer l'image en cliquant sur "retour arrière" ou "supprimer" sur votre clavier et recommencer

Et c'est tout! Vous avez appris à ajouter une image à WordPress avec l'éditeur classique.

2. Ajout d'images aux publications dans l'éditeur Gutenberg WordPress

Dans l'éditeur Gutenberg WordPress, vos options de publication seront très différentes de celles que vous verrez dans l'éditeur classique.

Gutenberg adopte une approche d'ajout / édition de contenu via un système de «blocs» comme des blocs de texte, des blocs d'en-tête, des blocs d'image, etc. Plongeons-nous donc dans l'ajout d'images dans Gutenberg.

1. Sélectionnez l'icône «Ajouter une image»

Après vous être assuré que vous ajoutez une image au bon endroit dans votre message, sélectionnez l'icône "Ajouter une image". Cela ressemblera à ceci ici:

Comment ajouter des images dans Gutenberg WordPress Editor

Une fois que vous avez cliqué sur l'icône "Ajouter une image", vous aurez quelques options pour Comment vous pouvez ajouter une image à votre message.

2. Choisissez comment vous allez ajouter l'image

Dans Gutenberg, vous disposez de quelques options rapides pour ajouter une image dans WordPress. Qui comprend:

  • Télécharger (qui ouvrira un écran de sélection qui vous permet de choisir le fichier image sur votre ordinateur)
  • Médiathèque (qui vous amène à votre bibliothèque d'images existante, à partir de laquelle vous pouvez également faire glisser et déposer une image)
  • Insérer depuis l'URL (s'il y a une image située quelque part en ligne que vous souhaitez importer, vous pouvez coller ce lien ici)

Voici un aperçu de ces options (personnellement, je clique simplement sur "Télécharger" et saisis rapidement l'image que je veux depuis mon bureau):

Gutenberg Ajouter des options d'image

3. Téléchargez votre image

Une fois que vous avez sélectionné l'image que vous souhaitez télécharger, cliquez simplement sur le bouton "Ouvrir" et elle sera ajoutée à votre message.

Ouvrir la capture d'écran de l'image

Maintenant que vous avez ajouté l'image, une miniature plus petite apparaîtra comme un nouveau bloc dans votre publication.

Voici une capture d'écran de ce à quoi cela ressemblera:

Capture d'écran ajoutée

4. Paramètres d'image et options d'édition rapide

Avant de poursuivre, vous souhaiterez que vos paramètres d'image soient composés (conformément aux meilleures pratiques de référencement).

Et tout comme avec l'éditeur classique, vous pourrez définir de nombreux paramètres et propriétés différents pour une image. Avec Gutenberg, c'est juste fait un peu différemment. Vos paramètres d'image se trouvent à la place dans la barre latérale droite (après avoir cliqué une fois sur l'image).

Voici à quoi ressemblent ces paramètres:

Options d'édition d'image de Gutenberg

Veillez à définir vos paramètres d'image pour au moins ces deux propriétés:

  • Écrire un texte alternatif convivial pour le référencement qui décrit l'image et se faufile dans une phrase clé
  • Taille de l'image (j'affiche toujours les images en taille réelle pour éviter une perte de qualité)

Vous pouvez également cliquer sur les paramètres «Style» pour ajouter un style plus nuancé et des fonctions de recadrage intégrées avec Gutenberg.

5. Déplacement d'images dans un message via Gutenberg

Un effet secondaire très intéressant de l'attention de l'éditeur de Gutenberg sur l'utilisation de «blocs» de contenu est la facilité avec laquelle vous pouvez déplacer vos images (ou tout autre bloc de contenu d'ailleurs) dans un article.

Après avoir cliqué une fois sur l'image que vous souhaitez réorganiser dans votre message, vous verrez des flèches «haut» et «bas» apparaître juste à côté de l'image.

Cliquez sur ces flèches pour déplacer votre image vers le haut ou vers le bas à l'intérieur de votre message, comme ceci:

Comment déplacer des blocs d'image dans Gutenberg WordPress Editor (GIF)

Et c'est tout! Vous êtes prêt à partir.

Vous avez maintenant appris à ajouter une image à WordPress dans l'éditeur Gutenberg également 🙂

3. Ajouter une image sélectionnée à un message dans WordPress

Les images en vedette sont essentielles dans un blog WordPress, car ce sont les images qui s'affichent en haut de vos articles de blog (et dans les résultats de recherche et sur les plateformes de réseaux sociaux lorsque votre contenu est partagé).

Enfin, voici comment ajouter une image en vedette à un article (ou une page) dans WordPress.

En bas à droite de la fenêtre de votre éditeur WordPress, vous verrez une section pour ajouter une image en vedette. Cliquer sur "Définir l'image en vedette" et vous serez redirigé vers l'écran de téléchargement d'images standard où vous pourrez ajouter l'image que vous souhaitez voir apparaître en haut de votre message (également dans les résultats de recherche et sur les plateformes sociales).

Comment ajouter une image sélectionnée dans WordPress

Après avoir téléchargé l'image que vous souhaitez utiliser et cliqué sur «Définir l'image sélectionnée», vous serez ramené à l'écran de votre éditeur et vous verrez une petite vignette de l'image affichée en bas à droite (pour vous confirmer ajouté la bonne image) comme ceci:

Exemple de capture d'écran de l'image en vedette

Assez simple, non?

Si vous avez sélectionné la mauvaise image (ou si vous souhaitez apporter des modifications ultérieurement), vous pouvez simplement cliquer sur le texte "Supprimer l'image sélectionnée" et vous aurez la possibilité de sélectionner ou de télécharger une image différente pour figurer dans votre message.

Réflexions finales sur la façon d'ajouter une image dans WordPress

L'ajout d'images à vos publications dans WordPress n'a pas besoin d'être difficile.

Que vous utilisiez l'éditeur classique ou Gutenberg pour votre blog, l'équipe derrière WordPress a travaillé dur pour faire de l'ajout d'images un processus très simple.

Si vous rencontrez toujours des problèmes, veuillez me laisser un commentaire au bas de cet article et je serai heureux de vous aider à résoudre les problèmes que vous rencontrez.

C'est tout pour aujourd'hui!

Nous venons de voir comment ajouter des images dans WordPress 👏

Aimez ce que vous voyez? Inscrivez-vous pour obtenir plus de tutoriels et de conseils sur les blogs.

Vous voulez plus de didacticiels de blogging livrés directement dans votre boîte de réception?

Inscrivez-vous aujourd'hui et vous rejoindrez 122 843 autres blogueurs intelligents qui recevront mes meilleurs conseils de blogueur