Recadrage d'image

Qu’est-ce qu’un outil de recadrage d’image ?#

Le recadrage a l’air d’être l’opération d’image la plus simple — garder un rectangle, jeter le reste. Mais dès qu’il faut le faire correctement, toute une série de questions surgit : le recadrage conserve-t-il un ratio d’aspect fixe pour un emplacement de vignette ou de bannière, puis-je d’abord redresser un horizon penché, l’export sera-t-il assez léger pour un téléversement, et est-ce que rien de tout cela ne quitte mon appareil ? Cette page est un studio de recadrage complet qui répond aux quatre questions dans le navigateur.

Vous faites glisser une image, tracez un rectangle de sélection par-dessus (ou attrapez l’une de ses huit poignées pour le redimensionner), pivotez ou retournez éventuellement le cadre entier, verrouillez la sélection sur un ratio comme 1:1 ou 16:9, et exportez la région recadrée en PNG, JPEG ou WebP à la qualité de votre choix. Tout repose sur l’API Canvas dans cet onglet — le fichier d’origine est lu localement et le résultat est ré-encodé localement, rien n’est téléversé.

Comment l’utiliser#

1. Faites glisser une image sur la zone de dépôt en pointillés (ou cliquez dessus pour choisir un fichier). L’éditeur apparaît, remplaçant la zone de dépôt.
2. Utilisez la barre d’outils au-dessus de l’aperçu pour transformer le cadre entier avant de recadrer :
   • Pivoter 90° tourne l’image de 90° dans le sens horaire à chaque clic. La sélection de recadrage suit l’espace de coordonnées pivoté, donc elle reste toujours alignée sur ce que vous voyez.
   • Retourner H / Retourner V reflètent le cadre horizontalement ou verticalement.
3. Choisissez un Rapport d’aspect dans la liste déroulante : Libre (tracez n’importe quel rectangle), 1:1 (avatar / profil), 4:3 ou 16:9 (fond d’écran / couverture vidéo). Avec un ratio verrouillé, le rectangle conserve cette forme quand vous le déplacez — les poignées d’angle s’étendent pour contenir votre curseur, les poignées de bord déduisent automatiquement le côté perpendiculaire.
4. Faites glisser le corps du rectangle pour le déplacer ; faites glisser l’une de ses huit poignées pour le redimensionner. La souris et le tactile fonctionnent tous deux.
5. Réglez les options d’export sous l’aperçu :
   • Format de sortie — JPEG (le plus petit, avec perte), WebP (petit, moderne) ou PNG (sans perte ; le curseur de qualité est désactivé car le PNG n’a pas de réglage de qualité).
   • Côté max en sortie — un nombre en pixels ; le côté le plus long du recadrage est plafonné à cette valeur en préservant le ratio. Laissez à 0 pour conserver la résolution complète du recadrage.
   • Qualité — 5–100, utilisée uniquement par JPEG et WebP. 92 est une valeur par défaut raisonnable ; descendez à 80 pour des vignettes.
6. Observez l’indicateur à côté de Télécharger : il affiche la taille de la sélection et la taille de sortie résultante, par ex. 1500×1500 → 800×800 lorsqu’une sélection 1:1 est plafonnée à 800.
7. Cliquez sur Télécharger pour sauvegarder. Utilisez Réinitialiser pour ramener la sélection à sa valeur par défaut centrée.

Caractéristiques principales#

• Redimensionnement à ratio verrouillé qui se comporte naturellement. Les poignées d’angle s’étendent pour atteindre votre curseur sur les deux axes ; les poignées de bord n’ajustent que l’axe tiré et recalculent l’autre à partir du ratio. Pas d’étirement accidentel.
• Sélection consciente des transformations. La rotation et le retournement sont appliquées une fois sur un canevas hors écran, et le rectangle de recadrage vit dans cet espace transformé, donc ce que vous sélectionnez est exactement ce que vous exportez — aucun décalage entre l’aperçu et la sortie.
• Trois formats avec une qualité honnête. Le PNG est marqué sans perte et désactive le curseur au lieu de l’ignorer silencieusement. Le JPEG et le WebP exposent une vraie valeur de qualité transmise directement à l’encodeur.
• Plafond de sortie facultatif. Réglez un côté maximum et le recadrage est mis à l’échelle en préservant le ratio — pratique pour les avatars, les images Open Graph ou les limites de téléversement — sans que vous ayez à calculer.
• Indicateur avant/après en direct. Les dimensions de la sélection et les dimensions finales de sortie sont côte à côte, donc un plafond ou un changement de ratio est visible avant validation.
• 100 % local. L’image est décodée par le navigateur et ré-encodée par le navigateur. Il n’y a aucun point de téléversement.

Exemple commenté#

Vous avez une photo paysage de 4000×3000 et il vous faut une vignette de bannière 16:9 dont le côté le plus long fait 1280 px. Chargez la photo, réglez le Rapport d’aspect sur 16:9 et faites glisser la sélection sur l’horizon. Comme le ratio est verrouillé, le rectangle s’aligne sur un rectangle 16:9 ; supposons que la sélection se fixe à 4000×2250 en pixels source. Saisissez maintenant 1280 dans Côté max en sortie. L’indicateur se met à jour :

recadrage  4000 × 2250  →  1280 × 720

Choisissez Format de sortie : JPEG, laissez la Qualité à 92, puis Télécharger. Vous obtenez un JPEG 1280×720 d’environ 180 à 280 Kio selon la scène — une fraction du fichier d’origine de plusieurs mégaoctets, avec le ratio d’aspect exact dont une bannière hero a besoin et aucune bande noire. Le même flux avec 1:1 et Côté max en sortie 512 produit une photo de profil prête à téléverser.

FAQ#

La sélection ne descend pas en dessous d’une certaine taille — pourquoi ?#

Il y a un bord minimum de 8 pixels, appliqué pour que les poignées restent attrapables et que l’export ne soit jamais une bande dégénérée. Si vous avez besoin d’un recadrage extrêmement serré, ne zoomez pas pour découper une minuscule région — recadrez une zone plus large, puis réduisez-la avec Côté max en sortie.

J’ai verrouillé 16:9 mais le rectangle a changé de taille quand j’ai tiré près du bord.#

C’est la contrainte de borne qui garde le rectangle entièrement dans l’image. Quand un rectangle à ratio verrouillé dépasserait un bord, le côté le plus court est réduit afin que le ratio survive dans l’espace disponible. Déplacez d’abord le rectangle vers le centre, puis redimensionnez.

Dois-je exporter en JPEG ou en WebP ?#

Le WebP à qualité égale est généralement 25 à 35 % plus petit que le JPEG et est désormais pris en charge partout où cela compte. N’utilisez le JPEG que lorsqu’un ancien pipeline en aval refuse le WebP. Préférez le PNG quand le recadrage est un logo, une capture d’écran d’interface ou tout élément aux bords nets et aux aplats de couleur où les artefacts avec perte seraient visibles.

Le recadrage réduit-il la taille du fichier ?#

Il le peut, de deux façons : moins de surface signifie moins de pixels à encoder, et Côté max en sortie peut réduire l’échelle par-dessus. Mais un recadrage 200×200 d’une photo bruitée à qualité 100 peut quand même être plus gros que l’image complète à qualité 80 — le curseur Qualité est le vrai levier pour la taille avec perte.