Travailler avec des images

Les images renforcent l’attrait visuel de votre site, transmettent efficacement les informations et améliorent l’expérience de vos visiteurs. Ce guide explique les différentes manières d’ajouter des images à votre site Web WordPress.

Vous pouvez faire beaucoup de choses avec les images. C’est pourquoi nous les avons réparties en plusieurs pages :

• Pour vérifier les types de fichiers image que vous pouvez charger sur WordPress.com, consultez le guide Types de fichiers acceptés.
• Chargez une image sur votre site en utilisant le bloc Image.
• Chargez une galerie à l’aide du bloc Galerie ou du bloc Mosaïque d’images.
• Chargez un diaporama à l’aide du bloc Diaporama.
• Chargez une image de style en-tête ou bannière à l’aide du bloc Bannière.
• Ajoutez une image côte à côte avec du texte à l’aide du bloc Média & texte ou comparez deux images à l’aide du bloc Comparer des images.
• Trouvez des images gratuites à utiliser pour votre site Web à partir de ces sources.

• Rognez, redimensionnez, faites pivoter, alignez et légendez des images à l’aide des réglages de bloc de l’éditeur WordPress.
  • Consultez le guide Bloc d’image pour en savoir plus sur ces réglages ou parcourez nos autres blocs de médias.
• Affichez et supprimez des images sur votre site à l’aide de la section Médias de votre tableau de bord.
• Vous pouvez également faire pivoter, rogner et retourner des images dans Médias. Consultez Modifier une image dans les médias pour en savoir plus.
• Optimisez vos images pour vous assurer qu’elles se chargent rapidement et occupent un espace de stockage minimal.

• Résolution des problèmes de chargement d’images : vos images ne se chargent pas ? Voici quelques astuces pour charger des images avec succès.
• Résolution des problèmes d’images floues : découvrez pourquoi les images peuvent apparaître floues sur votre site alors que la photo originale chargée est de bonne qualité.

Voici quelques exemples de la façon dont vous pouvez afficher vos images dans l’éditeur WordPress. Les images sembleront différentes en fonction du thème que vous utilisez sur votre site. N’hésitez pas à les tester sur votre site !

Toutes les images proviennent de la bibliothèque de photos gratuites de Pexels.

Utilisez le bloc Image pour ajouter une seule image.

Style par défaut :

Style arrondi :

Pour afficher deux images l’une à côté de l’autre, vous pouvez utiliser le bloc Galerie :

Si vous avez déjà inséré une image seule, vous pouvez rapidement glisser-déposer une deuxième image à côté d’elle. Lorsque vous faites glisser le fichier image depuis votre ordinateur, maintenez-le jusqu’à ce qu’une ligne verticale apparaisse à côté de votre première image, puis relâchez-la. Voici une démonstration vidéo montrant comment glisser-déposer une nouvelle image à côté d’une image existante :

Utilisez le bloc Média & texte pour placer une image (ou une vidéo) à côté du texte. Il dispose d’une option pratique permettant d’empiler le média et le texte sur les appareils mobiles :

Pour plus d’options d’habillage du texte autour d’une image, consultez notre guide Aligner les images sur le texte.

Utilisez un bloc Bannière pour les images d’en-tête pleine largeur et de style bannière. Vous pouvez définir l’image sur un arrière-plan fixe (également appelé « effet parallaxe » ou « défilement parallaxe »), ajouter une superposition de couleurs et même ajouter du texte et d’autres contenus au-dessus de l’image.

Arrière-plan fixe avec effet parallaxe :

Arrière-plan non fixe :

Utilisez le bloc Galerie pour afficher plusieurs photos ensemble de façon attrayante.

Utilisez le bloc Diaporama pour partager des images sans occuper trop d’espace sur une page ou un article.

Le bloc Mosaïque d’images est disponible dans quatre styles différents :

• Mosaïque d’images
• Cercles
• Mosaïque d’images carrées
• Mosaïque de colonnes

Mosaïque d’images

Cercles

Images carrées avec option d’angles arrondis

Mosaïque de colonnes

Le bloc Comparer des images permet de placer deux images côte à côte (ou au-dessus et au-dessous) et d’utiliser un curseur pour révéler les différences entre les deux images.