Un article sans images génère 2 à 3 fois moins d’engagement qu’un article avec du contenu visuel. Les images aèrent les blocs de texte, retiennent l’attention et aident à expliquer ce qui est difficile à transmettre uniquement avec des mots. De plus, les images, via leurs textes alternatifs et leurs noms de fichier, apportent du trafic depuis Google Images: pour un blog technique, cela représente des centaines de visites supplémentaires par mois.

L’éditeur Gutenberg (l’éditeur par blocs de WordPress) fonctionne avec les images sans aucun plugin. Cinq blocs natifs couvrent tous les scénarios de base: de l’image seule aux galeries et aux couvertures plein écran avec des calques de texte. Mais les débutants se posent encore des questions: quel bloc choisir, comment aligner une image sans casser le texte, comment placer deux images côte à côte, ou pourquoi utiliser un filtre bichromie.

Voici une présentation détaillée de chaque bloc, avec les réglages que les guides courts ne mentionnent pas. Aucun plugin, uniquement les outils natifs de Gutenberg.

💡 Aperçu rapide:

• Ajoutez une image seule avec le bloc «Image» et réglez l’alignement via la barre d’outils: pour une image, cela suffit
• Placez une image à côté du texte avec le bloc «Média & Texte»: il maintient les proportions de manière rigide, le texte ne déborde pas
• Disposez deux images ou plus sur une même ligne avec le bloc «Galerie» et indiquez le nombre de colonnes: la grille s’aligne automatiquement
• Superposez du texte sur une photo avec le bloc «Couverture», ses filtres, sa superposition et son effet de parallaxe optionnel
• Activez la lightbox dans les réglages du bloc «Image»: l’image s’ouvre en plein écran sans recharger la page

Quels blocs Gutenberg fonctionnent avec les images

WordPress fournit par défaut cinq blocs liés aux images. Chacun répond à un besoin spécifique, il ne faut pas les confondre.

• Image (Image), une image seule avec alignement, légende, lien, filtre bichromie et réglages de lightbox. Le bloc de base pour tout article. Documentation
• Galerie (Gallery), une grille de plusieurs images avec réglage des colonnes. Remplace les galeries classiques de l’ancien éditeur et le shortcode [gallery]. Documentation
• Média & Texte (Media & Text), un bloc sur deux colonnes: image à gauche (ou à droite), texte à côté. Une liaison rigide, sans décalage quand la résolution change. Documentation
• Couverture (Cover), une image de fond avec un calque de texte et des boutons par-dessus. Vous pouvez configurer la superposition de couleur, l’opacité et le fond fixe. Documentation
• Fichier (File), un lien de téléchargement avec une fiche. Pour des instructions en PDF et des archives, pas pour afficher une image sur la page.

Les quatre premiers constituent votre arsenal principal. Le bloc «Fichier» ne sert pas à illustrer du contenu, nous ne traiterons donc que les blocs visuels ci-dessous.

Comment ajouter une image seule et configurer l’alignement

Le scénario le plus courant: insérer une image dans le texte et ajuster sa position par rapport aux paragraphes.

Cliquez sur le bouton «+» (ajouter un bloc) dans l’interface de l’éditeur et sélectionnez «Image». Une fenêtre de téléchargement apparaît: vous pouvez glisser un fichier depuis votre ordinateur, le choisir dans la bibliothèque de médias WordPress ou coller une URL. Après le téléchargement, l’image apparaît immédiatement dans l’éditeur et une barre d’outils avec les boutons d’alignement s’affiche au-dessus.

Options d’alignement disponibles:

• Aligner à gauche, l’image est poussée à gauche, le texte s’enroule à droite
• Aligner au centre, l’image au centre, le texte au-dessus et en dessous
• Aligner à droite, version miroir de l’alignement à gauche
• Largeur large, l’image dépasse les limites du bloc de texte mais pas la pleine largeur
• Pleine largeur, l’image s’étend d’un bord à l’autre de la zone de contenu

Les poignées bleues aux coins de l’image permettent de redimensionner en faisant glisser, sans avoir à calculer des pixels en CSS. Dans la barre latérale droite (l’onglet «Bloc»), vous pouvez configurer le texte alternatif pour le SEO et un lien que les utilisateurs suivront en cliquant sur l’image.

Deux conseils qui vous feront gagner du temps. Premier: activez la lightbox (l’option «Agrandir au clic» dans les réglages de lien du bloc): quand on clique, l’image s’ouvre en plein écran, l’utilisateur ne quitte pas la page. Deuxième: le filtre bichromie (icône en forme de cercle dans la barre d’outils du bloc) modifie la palette de couleurs de l’image sans Photoshop, utile quand des captures d’écran de sources différentes jurent visuellement. Le filtre ne modifie pas le fichier source dans la bibliothèque de médias, vous pouvez toujours le réinitialiser.

Mais il y a un piège: «aligner à gauche» et «aligner à droite» ne fonctionnent bien que lorsque le texte est assez long. Si le paragraphe est court, l’image «sort» du flux et le titre suivant la chevauche. Dans ce cas, il vaut mieux utiliser le bloc «Média & Texte».

Bloc «Média & Texte»: image et paragraphe dans un seul ensemble

Le bloc Media & Text fixe rigidement le ratio: moitié de la largeur pour l’image, moitié pour le texte. Aucun décalage quand la résolution de l’écran change.

Il s’ajoute de la même manière: bouton «+», recherchez «Média & Texte». Sélectionnez une image et écrivez le texte dans la colonne adjacente. Dans la barre latérale, ces bascules sont disponibles:

• Inverser les places (image à gauche ou à droite)
• Mode plein écran (s’étendre sur toute la largeur disponible)
• Couleur de fond pour la moitié texte

Le bloc est particulièrement pratique pour les instructions pas à pas: capture d’écran d’un réglage à gauche, description de ce qui se passe à droite. Le lecteur ne perd pas le lien entre le texte et l’image en faisant défiler.

En pratique, Media & Text aide aussi dans des situations plus terre-à-terre. Par exemple, vous avez inséré une capture d’écran avec un alignement à gauche, et le H2 suivant «est rentré» dans l’image. Il est trop tard pour changer la structure du paragraphe: enveloppez l’image et le texte dans Media & Text, le problème disparaît en 10 secondes.

Comment placer deux images ou plus côte à côte avec le bloc Galerie

Si vous devez montrer une série de captures d’écran ou faire une collection de photos, utilisez le bloc «Galerie». Contrairement à l’ancien éditeur classique où la galerie existait sous forme de shortcode [gallery] séparé, Gutenberg la gère visuellement.

Ajoutez le bloc «Galerie», téléchargez les images souhaitées, elles s’organisent automatiquement en grille. Dans les réglages du bloc (panneau de droite), sélectionnez le nombre de colonnes: 2, 3, 4 ou plus. Pour deux images côte à côte, réglez «2 colonnes», vous obtiendrez une ligne nette sans ajustement manuel de la taille.

Fonctionnalités supplémentaires du bloc Galerie:

• Recadrage des vignettes, toutes les images sont ramenées à la même taille, la grille est homogène
• Configuration de l’espacement entre les images
• Association d’un lien à chaque image séparément

Si le projet exige une mise en page non standard (des images de tailles différentes dans une même grille), les capacités de la galerie native peuvent ne pas suffire. Le bloc «Colonnes» (Columns) vient alors à la rescousse: des blocs «Image» distincts y sont imbriqués avec des réglages indépendants. Mais pour les scénarios types, les galeries natives sont suffisantes.

Remarque: ne confondez pas le bloc «Galerie» avec plusieurs blocs «Image» disposés en colonnes. La galerie recadre automatiquement les vignettes, toutes les images ont la même hauteur, quelles que soient leurs proportions d’origine. Les colonnes ne font pas cet ajustement: une image se retrouve plus haute qu’une autre, et la ligne «flotte». Pour une collection rapide de photos, utilisez la galerie; pour une mise en page au pixel près, utilisez les colonnes.

Comment superposer du texte sur une image avec le bloc «Couverture»

Le bloc «Couverture» est une image de fond avec un calque de texte. En substance, une bannière à l’intérieur de l’article. Il s’utilise pour mettre en forme des sections d’article, des citations ou des conclusions clés.

Sélectionnez le bloc «Couverture», téléchargez une image et saisissez le texte directement par-dessus. Dans la barre latérale, vous pouvez configurer:

• Couleur de superposition, un remplissage semi-transparent sur l’image, qui rend le texte lisible sur n’importe quel fond
• Opacité, l’intensité de la superposition, de à peine perceptible à presque opaque
• Fond fixe, lors du défilement de la page, l’image reste en place (effet de parallaxe)
• Répétition du fond, remplir le bloc avec un motif répétitif, pour les textures et les ornements

Le fond fixe est une technique appréciée dans les pages d’atterrissage et les portfolios WordPress. L’effet est impressionnant, mais sur mobile, il est souvent désactivé par le navigateur pour des raisons de performance. Ne comptez pas dessus comme technique principale pour les téléphones.

Le bloc «Couverture» s’imbrique dans d’autres blocs: dans des colonnes, des groupes ou des lignes. Et vous pouvez placer non seulement du texte sur la couverture, mais aussi un bouton: ajoutez un bloc «Boutons» à l’intérieur de la couverture, et vous obtenez une bannière CTA prête à l’emploi avec un fond. Tous les outils, sans CSS ni plugins supplémentaires.

Si la couverture ralentit le chargement sur mobile, désactivez le fond fixe et compressez l’image à 200-250 Ko. WordPress, à partir de la version 5.8, convertit automatiquement les PNG et JPEG en WebP lors du téléchargement, mais il est préférable de préparer la source en amont via TinyPNG ou une conversion en AVIF.

⁉️🤔 Foire aux questions

Pourquoi le texte «saute» et vient percuter les blocs adjacents après l’ajout d’une image?

Cela se produit lorsque l’image est alignée à gauche ou à droite et qu’il y a trop peu de texte autour. Gutenberg ne «cale» pas automatiquement la hauteur du bloc sous l’image, il se base sur le volume de texte environnant. Solution: enveloppez l’image et le texte dans un bloc «Média & Texte», il maintient les proportions de manière rigide. Ou ajoutez 2 à 3 lignes de texte supplémentaires pour que l’habillage fonctionne correctement.

En quoi le bloc «Galerie» diffère-t-il de plusieurs blocs «Image» placés dans des colonnes?

La galerie fournit une grille unifiée avec un recadrage automatique des vignettes, toutes les images ont la même taille, quelles que soient leurs proportions d’origine. Les colonnes avec des images séparées ne font pas cet ajustement: une image peut se retrouver plus haute qu’une autre, et la ligne «flotte». Pour une collection rapide de photos, prenez la galerie; pour une mise en page précise au pixel près, utilisez les colonnes.

Puis-je ajouter un texte alternatif pour plusieurs images d’une galerie en une seule fois?

Non, le bloc «Galerie» ne prend pas en charge la modification en masse des textes alternatifs. Chaque image de la galerie est un fichier média distinct, et le texte alternatif se définit individuellement: cliquez sur une image spécifique dans la galerie, allez dans la barre latérale et remplissez le champ «Texte alternatif». Ou bien rédigez le texte alternatif à l’avance dans la bibliothèque de médias WordPress, il sera alors repris automatiquement lors de l’insertion.

Le bloc «Couverture» ralentit le chargement de la page sur mobile. Comment y remédier?

Le fond fixe (parallaxe) est le principal coupable. Désactivez l’option «Fond fixe» dans les réglages du bloc, et le navigateur cessera de restituer l’effet lourd pendant le défilement. Deuxième étape, compressez l’image de couverture à 200-250 Ko: des services comme TinyPNG ou la conversion en WebP/AVIF réduisent la taille sans perte de qualité visible. WordPress 5.8+ convertit automatiquement les PNG et JPEG en WebP lors du téléchargement, mais il est préférable de préparer la source en amont.

Le bloc «Fichier» a-t-il un intérêt si je veux simplement montrer une image?

Non. Le bloc «Fichier» affiche un bouton de téléchargement et un nom de fichier, pas l’image elle-même. Il est utile pour des instructions en PDF, des archives ZIP, des fichiers CSV et d’autres documents que l’utilisateur doit enregistrer sur son appareil. Pour montrer une image, utilisez toujours le bloc «Image».

En quoi la lightbox de Gutenberg diffère-t-elle des plugins de lightbox comme FooBox ou Meow Lightbox?

La lightbox native (l’option «Agrandir au clic» dans les réglages de lien du bloc «Image») fonctionne sans code supplémentaire et n’entre pas en conflit avec les thèmes; elle est apparue dans WordPress 6.4 fin 2023. Les plugins offrent plus de réglages: visualisation de galerie avec balayage, effets d’assombrissement, compteur d’images. Si vous placez 2 à 3 images par article, la lightbox native suffit. Pour des galeries photos et des portfolios, installez un plugin.

Quel bloc choisir pour votre besoin: résumé rapide

Gutenberg couvre tous les scénarios de base pour le travail avec les images, sans aucun plugin. Insérez une image seule avec le bloc «Image» et n’oubliez pas le texte alternatif, c’est votre principal atout SEO pour Google Images. Activez la lightbox: la fonctionnalité est gratuite, et les lecteurs sur mobile vous remercieront.

Vous avez besoin d’un ensemble rigide «image + texte», prenez «Média & Texte», il ne se défait sur aucun écran. Une série d’images, «Galerie» avec le réglage des colonnes, le recadrage automatique alignera tout sur une ligne. Du texte sur une photo, «Couverture» avec superposition et parallaxe en option, et vous pouvez ajouter un bouton à l’intérieur pour obtenir une bannière CTA.

Maîtriser ces quatre blocs est réaliste en 10 à 15 minutes dans un article de test. Ouvrez un brouillon, faites glisser les blocs sur le canevas, l’interface de Gutenberg est conçue pour un travail visuel, pas pour le code. Si le prochain article sort avec des images au lieu d’un mur de texte, vous avez déjà une longueur d’avance.