Comment fonctionne le recadrage d'images dans le navigateur
Le processus de recadrage s'exécute entièrement dans l'onglet de votre navigateur à l'aide de la Canvas API. Pas de traitement côté serveur, pas d'envoi, pas de services tiers. Chaque étape a lieu sur votre appareil.
- Chargez l'image dans un élément
<img>pour que le navigateur la décode localement. Un calque Canvas affiche l'image mise à l'échelle pour tenir dans la fenêtre d'affichage tandis qu'un rectangle de sélection déplaçable montre la zone de recadrage actuelle. - Faites glisser le rectangle par ses bords ou ses coins pour ajuster la zone de recadrage. Le rectangle reste limité aux bords de l'image afin que vous ne puissiez pas sélectionner une zone en dehors de la photo. Lorsqu'un rapport fixe est actif (1:1, 16:9, 4:3), le redimensionnement préserve automatiquement ce rapport.
- L'affichage des pixels se met à jour en direct pendant que vous faites glisser, montrant la largeur, la hauteur, X et Y actuels du recadrage en coordonnées pixels de l'image. Cela vous permet de viser des dimensions exactes sans tâtonnements.
- Lorsque vous cliquez sur Recadrer et Télécharger, la page dessine uniquement la région sélectionnée de l'image source sur un Canvas hors écran à la résolution pixel d'origine, puis exporte le résultat via
canvas.toBlob()dans le même format que le fichier source. Une URL Blob est générée pour le téléchargement.
Pourquoi recadrer des images en ligne ?
- Le recadrage élimine les bords indésirables, l'espace vide ou l'encombrement visuel. Un seul recadrage améliore souvent la composition d'une photo plus que n'importe quel filtre ou réglage de couleur.
- Le contrôle du rapport hauteur/largeur est essentiel pour les plateformes de publication. Les flux des réseaux sociaux attendent du 1:1 pour les profils, du 16:9 pour les miniatures vidéo et du 4:3 pour la photographie standard. Recadrer au bon rapport évite les désagréments du letterboxing ou des coupures lors de l'envoi.
- Le recadrage côté client est la seule option sur les appareils professionnels verrouillés qui manquent d'un éditeur de photos. Comme rien n'est envoyé, il n'y a pas de risque de fuite de données et aucune révision de conformité nécessaire pour les images sensibles.
- L'affichage des dimensions en direct élimine les tâtonnements. Vous voyez les coordonnées pixels et la taille de la sélection pendant que vous faites glisser, vous pouvez donc recadrer à une largeur et une hauteur exactes sans passer à un outil de mesure de pixels.
Applications courantes du recadrage
Le recadrage est l'une des modifications d'image les plus courantes dans la publication web, les réseaux sociaux et le développement logiciel. Voici trois cas où un recadreur basé sur le navigateur fait gagner du temps.
- Préparer des photos de produits pour une boutique en ligne. Recadrez à un rapport cohérent 1:1 ou 4:5 pour que chaque vignette de catalogue s'aligne dans la grille. L'exportation préserve le format d'origine, donc les photos de produits JPEG restent en JPEG.
- Découper des captures d'écran pour la documentation ou les rapports de bugs. Recadrez la barre d'outils du navigateur, la barre des tâches Windows ou les notifications sensibles avant de joindre l'image à un ticket ou à une pull request.
- Cadrer une image hero ou une bannière pour une page d'atterrissage. Verrouillez le préréglage 16:9, positionnez la partie la plus importante de la photo au centre du rectangle de recadrage et exportez à la résolution d'origine pour la meilleure qualité sur les écrans retina.
Un exemple concret : recadrer une photo de 4000×3000 à 1200×675 pour une bannière hero
Une photo de 4000×3000 pixels provenant d'un appareil photo numérique est bien trop grande pour une bannière web typique. L'espace de la bannière peut être de 1200×675 (un cadre 16:9).
Déposez la photo dans la zone d'envoi. L'image se charge en pleine résolution mais est mise à l'échelle pour tenir dans la fenêtre d'affichage pour une interaction de glissement confortable. Sélectionnez le préréglage de rapport 16:9. Le rectangle de recadrage s'ajuste instantanément à la plus grande région 16:9 qui tient dans l'image. Faites glisser le rectangle pour positionner le point focal — un sommet de montagne, un produit, un visage — dans le cadre. L'affichage en direct montre la sélection actuelle à 4000×2250 (la fenêtre 16:9 de l'image complète). Saisissez une poignée de coin et faites glisser vers l'intérieur jusqu'à ce que la largeur affichée atteigne 1200 px. La hauteur suit automatiquement car le rapport est verrouillé. Cliquez sur Recadrer et télécharger. La page extrait la région sélectionnée de 1200×675 des pixels d'origine et fournit le fichier recadré dans le format source. L'ensemble du processus prend une seconde ou deux et n'utilise aucune bande passante réseau au-delà du chargement initial de la page.
Quels formats d'image sont pris en charge pour le recadrage ?
L'outil accepte tout format que le navigateur peut décoder : PNG, JPEG et WebP couvrent presque tous les cas d'utilisation réels. La sortie recadrée est enregistrée dans le même format que le fichier source. Le PNG reste sans perte, le JPEG conserve son niveau de qualité d'origine et le WebP reste un WebP. Le format est détecté à partir du type MIME du fichier source.
Le recadrage réduit-il la taille du fichier image ?
Le recadrage supprime des pixels, donc la taille du fichier de sortie est généralement plus petite que celle de la source, surtout lorsque vous recadrez une grande bordure ou une zone vide. L'exportation utilise le format de fichier d'origine et ses paramètres d'encodage — le PNG reste sans perte, le JPEG conserve son réglage de qualité d'origine — donc les seules économies proviennent de la réduction du nombre de pixels, pas de la recompression.
Que font les préréglages de rapport hauteur/largeur ?
Les préréglages (1:1, 16:9, 4:3, 3:2, 9:16) verrouillent le rapport largeur/hauteur du rectangle de recadrage. Lorsqu'un préréglage est actif, faire glisser un coin ou un bord ajuste la taille de la sélection tout en maintenant le rapport constant. Passer en mode Libre supprime la contrainte pour pouvoir redimensionner le rectangle arbitrairement. Le rapport est appliqué sur les coordonnées pixels de l'image, donc la sortie exportée a exactement le rapport que vous avez sélectionné.
L'image est-elle envoyée à un serveur ?
Non. L'image ne quitte jamais votre appareil. La page utilise l'API File du navigateur pour lire l'image en mémoire et la Canvas API pour recadrer et exporter le résultat. Vous pouvez le vérifier en ouvrant le panneau Réseau des DevTools de votre navigateur — les seules requêtes sortantes pendant le recadrage sont le chargement initial de la page et les appels publicitaires. Aucune donnée d'image n'est transmise.
Puis-je recadrer une zone spécifique en saisissant des coordonnées pixels exactes ?
La version actuelle ajuste le rectangle de recadrage par interaction de glissement sur l'aperçu de l'image. Vous pouvez lire les coordonnées pixels en direct pour X, Y, la largeur et la hauteur de la sélection. La saisie numérique directe pour le rectangle de recadrage n'est pas disponible dans v1 mais est une amélioration prévue pour une future mise à jour.
Qu'advient-il de l'image originale ?
Le fichier original reste sur votre appareil. La page le lit dans la mémoire du navigateur pour l'affichage et le recadrage, mais ne modifie jamais le fichier source sur le disque. La sortie recadrée est un nouveau fichier que vous téléchargez séparément. L'original reste intact à son emplacement d'origine sur votre ordinateur ou votre téléphone.
Y a-t-il une limite de taille de fichier pour le recadrage ?
L'outil respecte une limite de 30 Mo par fichier dans la zone d'envoi pour garder la mémoire du navigateur sous contrôle sur les appareils moins puissants. Si votre image dépasse 30 Mo, vous pouvez d'abord la redimensionner à l'aide d'un outil de redimensionnement d'images dédié avant de la charger ici pour le recadrage.
Le recadrage fonctionne-t-il sur les téléphones mobiles et les tablettes ?
Oui. Les poignées de recadrage sont dimensionnées en tenant compte des cibles tactiles, et l'interaction utilise des événements pointer qui fonctionnent à la fois avec les clics de souris et les tapotements du doigt. Sur un écran de téléphone, l'aperçu de l'image s'adapte à la largeur disponible et les contrôles s'empilent verticalement pour une utilisation facile à une main.