Recadrer une image au bon format avec Photopea
Paysage vs Portrait
Tutoriel recadrage (Photopea)
Compression au format WEBP
Vous souhaitez avoir un accès direct à la bannière ?
Notions de base : Portrait vs Paysage ?
Tutoriel de recadrage
Paysage vs Portrait
Tutoriel recadrage (Photopea)
Compression au format WEBP
Vous souhaitez avoir un accès direct à la bannière ?
Dans ce tutoriel, nous allons voir comment recadrer facilement une image au format exact demandé pour une bannière web, par exemple 1920 × 680 pixels, en utilisant l’outil gratuit en ligne Photopea.
Ouvrir une image
- Ouvrir Photopea
- Cliquer sur Fichier → Ouvrir
- Sélectionner votre image
Pour trouver des images libres de droits :
- Télécharger une image sur Pexels
Sélectionner l’outil de recadrage
Une fois l’image ouverte :
- Choisir l’outil Recadrage / Crop
- Si nécessaire, utiliser la recherche des outils
- Repérer l’icône de cadrage dans la barre latérale
Par défaut, l’outil est souvent réglé sur Libre.
Définir le bon format
Modifier le réglage pour utiliser :
- un ratio fixe
- ou une taille fixe
Entrer ensuite les dimensions demandées :
- 1920 × 680 pixels
Une zone de sélection apparaît automatiquement sur l’image.
Vous pouvez :
- déplacer le cadrage
- agrandir ou réduire la zone
- conserver automatiquement les bonnes proportions
Le but est de garder la partie la plus intéressante de l’image.
Avec un format de bannière très horizontal, il n’est pas toujours possible de conserver toute la photo d’origine. Il faut donc choisir le cadrage le plus pertinent visuellement.
Valider le recadrage
Une fois satisfait du résultat :
- appuyer sur la touche Entrée
- ou cliquer sur le bouton de validation
L’image possède maintenant les bonnes proportions.
Adapter la taille exacte en pixels
Même avec le bon cadrage, l’image peut encore être beaucoup trop grande.
Pour vérifier cela :
- Aller dans Image → Taille de l’image
Par exemple, l’image peut mesurer :
- 5329 × 1887 pixels
Les proportions sont correctes, mais la taille reste excessive pour une bannière web.
Il suffit alors :
- de remplacer la largeur par 1920 pixels
- de laisser la chaîne activée pour conserver les proportions
La hauteur s’adaptera automatiquement.
Cliquer ensuite sur :
- OK
Résultat
Vous obtenez une image parfaitement adaptée au format demandé pour une bannière web.
Dans ce tutoriel, nous allons voir comment recadrer facilement une image au format exact demandé pour une bannière web, par exemple 1920 × 680 pixels, en utilisant l’outil gratuit en ligne Photopea.
Ouvrir une image
- Ouvrir Photopea
- Cliquer sur Fichier → Ouvrir
- Sélectionner votre image
Pour trouver des images libres de droits :
- Télécharger une image sur Pexels
Sélectionner l’outil de recadrage
Une fois l’image ouverte :
- Choisir l’outil Recadrage / Crop
- Si nécessaire, utiliser la recherche des outils
- Repérer l’icône de cadrage dans la barre latérale
Par défaut, l’outil est souvent réglé sur Libre.
Définir le bon format
Modifier le réglage pour utiliser :
- un ratio fixe
- ou une taille fixe
Entrer ensuite les dimensions demandées :
- 1920 × 680 pixels
Une zone de sélection apparaît automatiquement sur l’image.
Vous pouvez :
- déplacer le cadrage
- agrandir ou réduire la zone
- conserver automatiquement les bonnes proportions
Le but est de garder la partie la plus intéressante de l’image.
Avec un format de bannière très horizontal, il n’est pas toujours possible de conserver toute la photo d’origine. Il faut donc choisir le cadrage le plus pertinent visuellement.
Valider le recadrage
Une fois satisfait du résultat :
- appuyer sur la touche Entrée
- ou cliquer sur le bouton de validation
L’image possède maintenant les bonnes proportions.
Adapter la taille exacte en pixels
Même avec le bon cadrage, l’image peut encore être beaucoup trop grande.
Pour vérifier cela :
- Aller dans Image → Taille de l’image
Par exemple, l’image peut mesurer :
- 5329 × 1887 pixels
Les proportions sont correctes, mais la taille reste excessive pour une bannière web.
Il suffit alors :
- de remplacer la largeur par 1920 pixels
- de laisser la chaîne activée pour conserver les proportions
La hauteur s’adaptera automatiquement.
Cliquer ensuite sur :
- OK
Résultat
Vous obtenez une image parfaitement adaptée au format demandé pour une bannière web.
Compression au format WEBP
Paysage vs Portrait
Tutoriel recadrage (Photopea)
Compression au format WEBP
Vous souhaitez avoir un accès direct à la bannière ?
Il est essentiel de compresser l’image au format WEBP afin de réduire son poids sans dégrader visiblement sa qualité.
Une image trop lourde ralentit le chargement des pages, pénalise l’expérience utilisateur, augmente la consommation de données et peut avoir un impact négatif sur les performances du site. La vitesse de chargement étant un critère pris en compte par les moteurs de recherche, l’optimisation des images constitue également un élément important du référencement naturel (SEO).
Une bannière optimisée au format WEBP permet généralement de réduire la taille du fichier de 40 à 80 % par rapport aux formats JPEG ou PNG traditionnels.
Vous souhaitez avoir un accès direct à la bannière ?
Paysage vs Portrait
Tutoriel recadrage (Photopea)
Compression au format WEBP
Vous souhaitez avoir un accès direct à la bannière ?
Avant de pouvoir donner un accès direct à la gestion des bannières, nous avons besoin de nous assurer que les images utilisées respectent bien les contraintes techniques du site (dimensions, cadrage, format WEBP et niveau de compression).
Pour cette raison, nous demandons dans un premier temps que quelques images de test nous soient transmises après préparation selon ce tutoriel. Cela nous permet de vérifier que les fichiers sont correctement générés et qu'ils s'affichent de manière optimale sur le site.
Cette précaution est importante, car des images trop lourdes peuvent ralentir le chargement des pages, ce qui dégrade l'expérience des visiteur·euse·s et peut également avoir un impact négatif sur le référencement naturel (SEO). À l'inverse, des images trop compressées, mal recadrées ou de dimensions inadaptées peuvent apparaître floues, pixellisées ou tronquées, ce qui nuit à la qualité perçue du site et à son image professionnelle.
Une fois cette validation effectuée, nous pourrons envisager l'ouverture d'un accès autonome à la gestion des bannières pour les futures modifications.



