Images et formats

Bonnes pratiques pour l’ajout et la modification d’images sur le site.

🖼️ Gérer et optimiser les images

Cette page vous explique les bonnes pratiques à respecter lors de l’ajout ou la modification d’images dans WordPress, ainsi que les différentes manières de modifier une image dans Elementor.

---

📐 Résolution recommandée

Pour garantir une qualité visuelle optimale, assurez-vous que vos images respectent une résolution minimum de 1200 px de large (dans la majorité des cas, mais cela dépend des besoins).

📌 Si une image est trop petite, elle apparaîtra floue ou pixelisée, surtout sur les écrans haute définition.

---

🗂️ Formats et orientation

• Préférez le format paysage (horizontal), surtout pour les images utilisées dans le carrousel des produits ou d'autres éléments comme les cartes présentes à travers le site, ou encore le Hero de début de page (les bannières de hauts de pages).

• Les formats portrait (vertical) peuvent créer un désalignement ou une mise en page incohérente.

  • 👉 Vous pouvez néanmoins tester pour voir si cela reste visuellement correcte.

• Formats d’image à privilégier :

  • .webp (fortement recommandé pour le temps de chargement)

  • .jpg ou .png (en dernier recours)

---

🔄 Conversion & optimisation

✅ Meilleure méthode : WP-Optimize

Utilisez l’outil WP-Optimize pour :

• compresser les images trop lourdes,

• convertir automatiquement vos fichiers .jpg ou .png en .webp.

🔗 Accéder à WP-Optimize : Aller dans WP-Optimize → Images

🛠️ Alternative manuelle

Si vous ne passez pas par WP-Optimize, vous pouvez utiliser un convertisseur externe, comme :

• Squoosh

• Convertio

• iloveimg.com

🎯 Objectif : Avoir une image optimisée et légère, avec un format .webp dans l’idéal pour favoriser le chargement du site web.

---

✏️ Modifier une image dans Elementor

1. 🔳 Modifier une image en Background d’un container

1. Cliquez sur la section ou container contenant l’image.

2. Dans l’onglet Style, repérez le champ Image de fond.

3. Cliquez pour changer ou remplacer l’image.

4. Choisissez une nouvelle image optimisée depuis la bibliothèque.

2. 🖼️ Modifier une image via le widget Image

1. Cliquez sur le widget Image à l’écran.

2. Dans l’onglet Contenu, cliquez sur l’image affichée.

3. Sélectionnez une autre image dans la bibliothèque ou importez-en une nouvelle.

🔁 Pensez à cliquer sur Mettre à jour pour sauvegarder vos modifications.

---

🧠 Aller plus loin

Consultez également la page dédiée : 👉 Optimisation