⚡ Accès rapide

Formats recommandés pour le web :

1200 × 628 px en paysage (standard web et Google Discover), 628 × 1200 px en portrait,

WebP pour toutes les images classiques, PNG uniquement si l’image doit garder un fond transparent

Ordre des opérations :

  1. Redimensionner une image : https://squoosh.app/
  2. Compresser une image : https://tinypng.com/
  3. Enlever l’arrière-plan d’une image : https://remove.bg/

Prendre de bonnes photos et réaliser des captures d’écran de qualité

Banques d’images gratuites :

Créer des images avec l'IA :

Générer une image avec un prompt textuel

Générer une image à partir d’une photo réelle


Les images jouent un rôle essentiel dans la crédibilité et l’attractivité de votre page vitrine. Mais si elles sont trop lourdes ou mal préparées, elles ralentissent votre site, dégradent votre référencement et nuisent à l’expérience utilisateur.

Cette page rassemble toutes les bonnes pratiques pour préparer correctement vos images avant de les intégrer dans WordPress.


Pourquoi optimiser vos images ?

Une image brute (prise au smartphone ou téléchargée depuis une IA) peut peser plusieurs mégaoctets.

C’est problématique pour trois raisons :

Objectif simple : une image optimisée pèse en général entre 30 et 150 KB, selon sa taille.

Choisir le bon format d’image

Orientation : paysage ou portrait

Format de fichier : WebP ou PNG

WebP : très léger, excellente qualité, compatible avec WordPress et tous les navigateurs.

→ format recommandé pour toutes les images standard.

PNG : utile uniquement lorsque l’image doit avoir un fond transparent (icônes, objets détourés).

→ à utiliser ponctuellement.

AVIF : meilleure compression mais encore peu compatible, surtout sur les réseaux sociaux.

→ déconseillé pour le moment.


Créer vos propres images (photos, captures d’écran)

Les images authentiques sont les plus efficaces pour une page vitrine : elles montrent votre environnement réel, votre manière de travailler et votre style. Elles instaurent immédiatement confiance et crédibilité.

Pour obtenir de bons résultats, quelques principes simples suffisent : organiser la scène avant de prendre la photo, privilégier une lumière naturelle, stabiliser l’appareil et privilégier les situations réelles plutôt qu’un objet isolé.

Dans le cas d’activités numériques, les captures d’écran deviennent souvent les meilleurs médias : propres, rapides à produire et parfaites pour expliquer un fonctionnement ou une interface.

<aside> <img src="/icons/arrow-right-basic_blue.svg" alt="/icons/arrow-right-basic_blue.svg" width="40px" />

Prendre de bonnes photos et réaliser des captures d’écran de qualité

</aside>

Si vous n’avez pas encore vos propres images

Lorsque vous débutez ou que vous n’avez pas encore de photos ou de vidéos de votre activité, vous pouvez utiliser des alternatives pour illustrer votre page vitrine. Cela vous permet d’avancer immédiatement, en attendant d’avoir vos propres médias.

Il existe deux alternatives pour démarrer immédiatement :

Utiliser une banque d’images gratuite

Les banques d’images gratuites peuvent dépanner, mais il faut rester attentif aux droits d’auteur. Tant que l’image est utilisée uniquement sur votre site, vous pourrez toujours la retirer ou la remplacer si un jour quelqu’un vous réclame des droits.

En revanche, si vous réutilisez cette même image dans un support figé — par exemple un livre, un e-book ou un document que vous vendez — la situation devient plus délicate. Vous ne pourrez plus simplement retirer la photo : il faudra parfois recommencer votre document ou payer des droits. C’est surtout dans ce contexte-là qu’il faut être vigilant. Pour la page vitrine, le risque est beaucoup plus faible.

Free Stock Photos, Royalty Free Stock Images & Copyright Free Pictures · Pexels

5.8 million+ Stunning Free Images to Use Anywhere - Pixabay

Générer des images par IA

L’IA peut vous aider à créer rapidement des visuels propres et exploitables pour votre site, même si vous n’avez pas encore vos propres photos.

Il existe deux manières de générer une image :

1. en partant uniquement d’un prompt textuel,

<aside> <img src="/icons/arrow-right-basic_blue.svg" alt="/icons/arrow-right-basic_blue.svg" width="40px" />

Générer une image avec un prompt textuel

</aside>