Recadrer

Recadrer en cercle Recadrer une image

Optimiser

Compresser une image Agrandisseur d'image IA Supprimer l'arrière-plan

Modifier

Redimensionner

Convertir

Autres

Image en PDF

Recadrer une image en ligne

Recadrez vos JPG, PNG, WebP ou AVIF selon n'importe quel ratio : 1:1, 16:9, 9:16, 4:5, 3:2, 4:3 ou en pixels personnalisés.

ou déposez l'image ici

À propos de cet outil

Recadrez n'importe quelle image dans une zone rectangulaire, depuis votre navigateur, grâce à l'outil de recadrage Araluma, propulsé par cropperjs v2. Déposez un fichier JPG, PNG, WebP ou AVIF sur la page et le plan de travail s'ouvre immédiatement. Faites glisser les poignées pour positionner la sélection, verrouillez un ratio (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 ou A4), ou saisissez des dimensions exactes en pixels et le cadre s'y ajuste. La lecture en direct affiche la taille de sortie en pixels source réels avant le clic de téléchargement. Votre image reste sur votre appareil tout du long : l'onglet Réseau des DevTools n'enregistre aucune requête sortante pendant le recadrage. Les sorties PNG et WebP conservent la transparence du fichier original, la sortie JPG remplace les zones transparentes par un fond blanc. Les métadonnées EXIF sont supprimées à chaque export. Cet outil convient à toute personne qui a besoin d'un recadrage rectangulaire rapide et précis sans installer de logiciel, un fichier à la fois.

Recadrer l'image
Comment l'outil de recadrage fonctionne dans votre navigateur

Comment l'outil de recadrage fonctionne dans votre navigateur

Votre image est ouverte directement par le navigateur via l'API File. Aucun envoi vers un serveur n'a lieu et aucune copie temporaire n'est stockée ailleurs que sur votre appareil. Déplacez le cadre à la position voulue, redimensionnez-le par les coins ou les bords, et la lecture en pixels se met à jour à mesure que vous glissez. Les coordonnées s'expriment dans l'espace de pixels de l'image source, donc le chiffre affiché correspond à la taille littérale du fichier de sortie. Ouvrez les DevTools et passez à l'onglet Réseau pendant que vous recadrez : aucune requête sortante n'apparaît. Le fichier que vous déposez et celui que vous téléchargez restent entièrement sur votre appareil pendant toute la session.

Recadrer l'image
Verrouillez un ratio ou saisissez des dimensions exactes en pixels

Verrouillez un ratio ou saisissez des dimensions exactes en pixels

Touchez une puce de ratio (1:1 pour un carré, 16:9 pour le grand écran, 9:16 pour le portrait, 4:5, 3:2, 4:3 ou A4) et le cadre de sélection se verrouille à cette proportion. Déplacez-le où vous voulez sur l'image pour choisir la partie à conserver. Pour atteindre une cible en pixels précise, saisissez la largeur et la hauteur dans les champs de dimension et le cadre se redimensionne en conséquence. Le minimum de la sélection est le plancher intrinsèque de l'élément de sélection de cropperjs v2. La sortie correspond toujours à la taille en pixels source de la sélection. L'outil ne fait pas de mise à l'échelle vers le haut : si votre sélection mesure 600 px de large, le fichier de sortie fait 600 px de large.

Recadrer l'image
La sortie JPG remplace la transparence par du blanc

La sortie JPG remplace la transparence par du blanc

Si votre fichier source comporte des zones transparentes (PNG, WebP avec alpha, ou AVIF avec alpha) et que vous choisissez JPG comme format de sortie, ces pixels transparents sont remplis de blanc. Le JPG n'a pas de canal alpha, il n'existe donc aucun endroit où loger la transparence. Pour conserver la transparence, choisissez PNG, WebP ou AVIF dans le sélecteur de format de l'écran final. Les sorties PNG et WebP transportent le canal alpha d'origine sans modification. L'AVIF prend également en charge l'alpha. Le sélecteur de format étiquette chaque option afin que le compromis soit visible avant le téléchargement.

Recadrer l'image
Déplacez la sélection avec précision au clavier

Déplacez la sélection avec précision au clavier

Atteignez le cadre de recadrage avec la touche Tab, puis appuyez sur les touches fléchées pour déplacer la sélection d'un pixel à la fois. Maintenez Maj enfoncée et le pas passe à dix pixels. Cette navigation au clavier est intégrée à cropperjs v2 comme fonctionnalité native, et non comme une couche d'accessibilité séparée. Elle est utile lorsque vous avez besoin d'un alignement visuel au pixel près qu'un trackpad ne peut pas offrir, ou lorsque vous travaillez sur une configuration au clavier uniquement. La sélection répond aussi au tactile sur mobile : pincez pour zoomer sur le plan de travail, puis faites glisser les coins de la sélection pour recadrer. Aucun mode supplémentaire à activer dans les deux cas.

Recadrer l'image
Formats de sortie : PNG, JPG, WebP et AVIF

Formats de sortie : PNG, JPG, WebP et AVIF

Après le recadrage, choisissez votre format de téléchargement sur l'écran final. Le PNG est sans perte et conserve la transparence. Le JPG applique une compression avec perte à une qualité de 0,9 par défaut, visuellement indiscernable de la source sur la plupart des photos. Le WebP équilibre les modes sans perte et avec perte et prend également en charge la transparence. L'AVIF est encodé via la bibliothèque @jsquash/avif à une qualité de 0,9. Il produit le fichier le plus petit à qualité visuelle équivalente, mais le premier encodage AVIF coûte un téléchargement unique de 870 Ko WASM dans la session. Le format de sortie par défaut correspond à votre entrée : une entrée PNG donne PNG par défaut, une entrée JPG donne JPG. Vous pouvez modifier ce choix à tout moment sur l'écran final.

Recadrer l'image
Quand utiliser un autre outil de recadrage

Quand utiliser un autre outil de recadrage

Cet outil recadre uniquement des rectangles : carrés, ratios paysage, ratios portrait et dimensions personnalisées en pixels. Pour un recadrage circulaire, une photo de profil aux coins transparents, utilisez plutôt Découpe ronde. Il partage le même traitement côté navigateur mais produit un PNG rond. Pour des préréglages spécifiques aux plateformes avec les dimensions par défaut déjà définies (Instagram 1080x1080, miniature YouTube 1280x720, couverture Facebook 1200x630), les pages de recadrage prédéfinies de la famille Crop s'ouvrent avec ces dimensions préchargées, vous n'avez rien à calculer. Si votre image doit changer de format sans recadrage préalable, utilisez l'outil Convertir pour passer en PNG, JPG, WebP ou AVIF.

Comment recadrer une photo en cercle

  1. Déposez votre image

    Ouvrez l'outil et déposez votre fichier JPG, PNG, WebP ou AVIF sur la zone de chargement, ou cliquez pour parcourir le fichier sur votre appareil.

  2. Choisissez un ratio ou une taille en pixels

    Touchez une puce de ratio (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 ou A4) ou saisissez les dimensions exactes en pixels dans les champs de largeur et de hauteur pour définir le cadre.

  3. Positionnez le cadre

    Déplacez le cadre sur la zone de l'image à conserver, puis redimensionnez-le par les coins ou les bords jusqu'à ce que la lecture en direct affiche la taille de sortie souhaitée.

  4. Recadrez et téléchargez

    Cliquez sur Recadrer, choisissez votre format de sortie (PNG, JPG, WebP ou AVIF) sur l'écran final, puis téléchargez le fichier recadré sur votre appareil.

Questions fréquentes

Comment recadrer une image ?

Déposez votre image sur l'outil de recadrage, choisissez un ratio ou saisissez des dimensions en pixels, déplacez le cadre de sélection sur la zone à conserver, puis cliquez sur Recadrer et téléchargez. Tout le processus se déroule dans votre navigateur. Un recadrage typique, du chargement au téléchargement, prend moins de dix secondes sur un appareil moderne.

Comment puis-je recadrer une image PNG en ligne ?

Chargez le PNG dans l'outil, définissez le ratio ou les dimensions, positionnez le cadre, puis cliquez sur Recadrer. Sur l'écran final, sélectionnez PNG comme format de sortie pour conserver le canal alpha intact. Si vous choisissez JPG à la place, les zones transparentes sont remplacées par un fond blanc. La sortie PNG est sans perte, aucune qualité en pixels n'est perdue pendant le recadrage.

Comment recadrer des photos pour Instagram sans application ?

Ouvrez l'outil de recadrage dans votre navigateur, chargez votre photo et touchez la puce 1:1 pour une publication carrée Instagram ou la puce 4:5 pour une publication portrait. Déplacez le cadre pour cadrer votre sujet, cliquez sur Recadrer et téléchargez. La sortie est dimensionnée selon les pixels source de la sélection. Pour une Story ou un Reel Instagram, utilisez plutôt le ratio 9:16.

Quels sont les meilleurs ratios pour recadrer des images pour les réseaux sociaux ?

Utilisez 1:1 pour une publication carrée Instagram, 4:5 pour une publication portrait qui occupe davantage le fil, 9:16 pour une Story ou un Reel, et 16:9 pour une miniature YouTube ou une bannière Twitter. Les couvertures Facebook fonctionnent mieux à la taille 1200x630 pixels, proche d'un ratio 2:1. L'outil propose des puces 1:1, 16:9, 9:16, 4:5, 3:2 et 4:3, ainsi que la saisie en pixels personnalisée.

Puis-je recadrer une image en cercle avec cet outil ?

Non, cet outil ne recadre que des rectangles : carré, paysage, portrait et dimensions personnalisées. Pour un recadrage circulaire avec fond transparent, utilisez plutôt l'outil Découpe ronde. Il utilise le même traitement côté navigateur, votre image reste sur votre appareil, mais il produit un PNG rond aux coins transparents plutôt qu'un rectangle.

Comment recadrer une image à une taille exacte en pixels ?

Saisissez la largeur et la hauteur cibles dans les champs de dimension sur le plan de travail. Le cadre se redimensionne en conséquence et la lecture en direct confirme la taille de sortie en pixels source. La sortie correspond toujours aux dimensions en pixels source de la sélection. L'outil ne fait pas de mise à l'échelle vers le haut, si la sélection est plus petite que votre cible, la sortie le sera aussi.

Les détails

Notes de l'équipe sur l'artisanat, les formats et les petites décisions derrière un bon recadrage rond.

La bibliothèque cropperjs v2 et ce qui a changé depuis la v1
Cet outil est construit sur cropperjs version 2.1.1, une réécriture complète de la bibliothèque cropperjs d'origine. La version v2 remplace l'ancienne API basée sur un constructeur (new Cropper(img, { aspectRatio: 1 })) par une architecture en Web Components. Le plan de travail, la superposition de sélection et l'élément image sont tous des éléments HTML personnalisés enregistrés via le CustomElementRegistry du navigateur. Cela signifie que le Shadow DOM gère tous les styles internes, il n'y a pas de fichier cropper.css séparé à importer, ce qui élimine une requête d'actif Vite par rapport à la v1. Le verrouillage du ratio est désormais défini sur l'élément de sélection lui-même (cropperSelection.aspectRatio = 1) plutôt que sur le constructeur, le ratio peut donc être modifié à l'exécution sans réinitialiser l'ensemble de l'interface. La bibliothèque pèse 41 960 octets brut et 12 175 octets gzip, mesuré directement à partir de l'en-tête content-length du CDN jsDelivr. Ces 12 Ko se paient une fois par session et sont réutilisés sur toutes les routes de recadrage préréglées via le découpage de chunks de Vite.
Comment les dimensions en pixels de sortie sont calculées (pas de mise à l'échelle)
Quand vous déplacez la sélection à l'écran, les coordonnées que vous voyez sont dans l'espace de pixels de l'image source, pas dans l'espace des pixels CSS. Cette distinction compte pour les écrans haute densité : un téléphone avec un rapport de pixels périphériques de 3x affiche une image de 300 pixels CSS de large comme 900 pixels réels, mais les coordonnées de la sélection reflètent les 900 pixels réels, pas les 300 pixels CSS. Le fichier de sortie que vous téléchargez contient exactement le nombre de pixels que le rectangle de sélection représente dans l'image source. L'opération de recadrage appelle selection.$toCanvas() de l'API cropperjs v2, une méthode asynchrone qui renvoie un nouvel élément HTMLCanvasElement dimensionné aux pixels de la sélection. Ce canvas est ensuite transmis à canvas.toBlob() pour PNG, JPG ou WebP, ou à l'encodeur @jsquash/avif pour AVIF. Aucune étape de mise à l'échelle vers le haut n'est insérée. Si votre sélection mesure 800 pixels de large, la sortie fait 800 pixels de large. Les préréglages de réseaux sociaux (1080x1080 pour Instagram, 1280x720 pour YouTube) sont livrés à ces tailles uniquement quand l'image source contient assez de pixels pour remplir la sélection.
Suppression des métadonnées EXIF et ce qui est perdu
Chaque export supprime les données EXIF, IPTC, XMP et de profil ICC. Cela se produit au niveau du pipeline canvas : le navigateur dessine les pixels décodés de l'image sur un HTMLCanvasElement et le canvas encode vers un nouveau fichier. Le canvas n'a pas de notion de conteneurs de métadonnées, il stocke uniquement les valeurs de pixels et les paramètres d'encodage. Ce qui est supprimé inclut les coordonnées GPS, la marque et le modèle de l'appareil photo, la focale de l'objectif, les paramètres d'exposition, les champs de droits d'auteur et les balises de profil de couleur. Le profil de couleur sRGB est effectivement l'hypothèse du canvas, les couleurs sont rendues via le pipeline d'affichage du navigateur et ré-encodées sans profil attaché. Pour la plupart des usages web et de réseaux sociaux, la suppression de l'EXIF est préférable car les données GPS peuvent exposer des informations de localisation que l'utilisateur ne souhaitait pas partager. Pour les flux de travail de photographie professionnelle où la précision du profil de couleur compte, notez que la fidélité du profil ICC n'est pas préservée et qu'un outil d'export avec gestion des couleurs doit être utilisé pour la livraison à l'impression ou à la publication.
Ce qui se passe quand vous recadrez un GIF animé
Quand vous déposez un GIF animé sur l'outil, le navigateur décode uniquement la première image dans l'élément image utilisé par le plan de travail. C'est un comportement du navigateur, pas une limitation de cropperjs, l'HTMLImageElement n'expose pas les images individuelles d'un GIF animé au JavaScript d'une manière que l'API canvas peut itérer. Le résultat est que seule la première image est disponible pour la sélection et la sortie finale est une image fixe dans le format que vous choisissez sur l'écran final. Si l'entrée est un GIF et que vous choisissez GIF en sortie, l'implémentation de canvas.toBlob du navigateur n'inclut pas d'encodeur GIF, la sortie retombe donc silencieusement sur PNG. L'outil rejette explicitement le GIF comme option de format de sortie pour éviter cette rétrogradation silencieuse. Si vous avez besoin de recadrer toutes les images d'une animation, il faudrait un outil qui travaille image par image, ce que cet outil ne prend pas en charge.
Navigation au clavier et accessibilité
L'élément de sélection de cropperjs v2 implémente la navigation au clavier dans le cadre de sa spécification de Web Component. Une fois que vous atteignez la sélection avec Tab, les touches fléchées déplacent le cadre d'un pixel à la fois dans la direction pressée. Maj plus une touche fléchée déplace le cadre de dix pixels. C'est nativement accessible sans contournement de lecteur d'écran ni superposition JavaScript personnalisée, le gestionnaire de clavier vit à l'intérieur de la racine shadow de l'élément de sélection et se déclenche au keydown. Cela compte pour les utilisateurs qui dépendent de la navigation au clavier uniquement, y compris certaines configurations de technologies d'assistance, les dispositifs d'accessibilité motrice et les flux de travail de précision où un trackpad ne peut pas atteindre un alignement au pixel près de manière fiable. La lecture en direct des pixels attachée à la sélection se met également à jour à chaque pression de touche, les utilisateurs de lecteurs d'écran avec des régions aria-live sur la lecture peuvent donc entendre les dimensions changer. L'accessibilité au clavier est un domaine où cet outil est en avance sur iLoveIMG et img2go, qui n'implémentent pas la navigation au clavier pour le recadrage.
Compromis de choix de format après le recadrage
Le sélecteur de format sur l'écran final propose quatre options. Le PNG est sans perte, chaque pixel de la zone recadrée est stocké exactement tel qu'il a été décodé depuis la source. La taille de fichier est plus grande que le JPG pour le même contenu, généralement trois à cinq fois plus grande pour une photo. Le JPG applique une compression avec perte à une qualité de 0,9 (sur une échelle de 0 à 1), ce qui correspond approximativement au préréglage haute qualité de la plupart des éditeurs de bureau. À q0,9 la différence entre l'original et la sortie n'est généralement pas visible sur un moniteur standard mais le fichier est sensiblement plus petit. Le WebP au même réglage de qualité produit un fichier environ 25 à 35 pour cent plus petit que le JPG dans nos tests d'encodage, avec la même qualité perceptuelle sur les photos. Le WebP prend également en charge un mode sans perte et préserve la transparence. L'AVIF à une qualité de 0,9 via la bibliothèque @jsquash/avif produit la sortie la plus petite des quatre formats mais le premier encodage dans une session nécessite le téléchargement d'un module WASM de 870 Ko. Les encodages AVIF suivants dans le même onglet sont rapides car le module est déjà chargé.