# Recadrer une image pour la bannière

## Attention au droits d'auteurs

Droits d'auteur pour les contenus numériques En tant qu'éditeur de contenu, utilisant l'outil CMS WebForge, vous êtes responsable juridiquement de veiller au respect du droit d'auteur de ce que vous publiez sur votre site, textes, images, musiques, vidéo etc. 
Afin de vous aider en ce sens, cette page vulgarise tant que possible quelques notions de droit : Droits d'auteur pour les contenus numériques 

## 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 ? Nous transmettre des photos 

## Notions de base : Portrait vs Paysage ?

## Tutoriel de recadrage

## Compression au format WEBP

## Vous souhaitez avoir un accès direct à la bannière ?

## Nous transmettre des photos

Paysage vs Portrait Tutoriel recadrage (Photopea) Compression au format WEBP Vous souhaitez avoir un accès direct à la bannière ? Nous transmettre des photos 

Tutoriel vidéo : 

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. 

Paysage vs Portrait Tutoriel recadrage (Photopea) Compression au format WEBP Vous souhaitez avoir un accès direct à la bannière ? Nous transmettre des photos 

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. 

Compression WEBP

Entre 40 - 60%

Paysage vs Portrait Tutoriel recadrage (Photopea) Compression au format WEBP Vous souhaitez avoir un accès direct à la bannière ? Nous transmettre des photos 

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. 

https://www.swisstransfer.com/fr 

SwissTransfer est une plateforme sécurisée de transfert de fichiers en ligne qui permet d'envoyer des fichiers volumineux de manière simple et efficace. 
Contrairement à de nombreux autres services de transfert de fichiers, SwissTransfer accepte des fichiers allant jusqu'à 50 Go, ce qui est particulièrement utile pour les fichiers volumineux qui ne peuvent pas être envoyés en pièce jointe d'un e-mail ou par d'autres moyens traditionnels. 
De plus la sécurité des données est garantie car Infomaniak tient particulièrement à la confidentialité et l'éthique est au coeur de ses préoccupations. 

En détail : https://faq.infomaniak.com/2451