Comment recadrer, faire pivoter et redimensionner une image en une seule fois sans perte de netteté

Une tâche typique comporte trois verbes. Une photo de 4032 × 3024 prise en surplomb d’un bureau est sortie de travers : elle a besoin d’un recadrage carré, d’un quart de tour et d’une taille finale de 1080 pixels. Sur trois sites spécialisés, cela fait trois envois, trois téléchargements et trois nouveaux encodages de la même image. Au même endroit, c’est un décodage et un encodage, et la netteté qui survit dépend surtout de la façon dont la dernière étape réduit les pixels.

L’exemple détaillé, étape par étape

Étape	Taille après l’étape	Mégapixels	Ce qui compte ici
Photo d’origine	4032 × 3024	12.19	L’indicateur d’orientation écrit par le téléphone est respecté à l’ouverture ; celle-ci est réellement de travers
Recadrage 1:1 centré (Left 504, Top 0, Width 3024, Height 3024)	3024 × 3024	9.14	(4032 − 3024) ÷ 2 = 504 pixels retirés de chaque côté
Quart de tour avec ↻ 90°	3024 × 3024	9.14	Un carré garde sa taille ; les valeurs de recadrage désignent toujours les mêmes bords
Width réglée sur 1080	1080 × 1080	1.17	1080 ÷ 3024 = 35.7% de la largeur, soit une réduction de 64%
Téléchargement	Un fichier		Un seul encodage, nommé d’après le format que le navigateur a réellement écrit

C’est à la dernière ligne avant le téléchargement que la netteté se gagne ou se perd. Une réduction de 64% dépasse largement le seuil, environ un tiers, à partir duquel le moteur de mise à l’échelle intégré d’un navigateur commence à jeter visiblement du détail.

Pourquoi les fortes réductions deviennent floues

Le rééchantillonnage consiste à calculer de nouveaux pixels à partir de leurs voisins quand une image change de taille. Tout redimensionnement en passe par là ; la question est de savoir avec quel soin.

La méthode propre au navigateur consiste à dessiner l’image sur un canvas plus petit. L’échantillonnage est économique, et sur une réduction de plus d’un tiers environ, il saute le détail situé entre les échantillons : les filets fins deviennent pointillés, le petit texte devient de la bouillie, les cheveux et le feuillage s’adoucissent. Vous ne pouvez pas non plus choisir la méthode. Chrome et Firefox utilisent un procédé proche de Lanczos, Safari utilise le bicubique, et rien dans l’interface canvas ne permet à une page de demander autre chose.

L’éditeur d’images redimensionne plutôt avec Lanczos3, qui calcule chaque pixel de sortie à partir d’une fenêtre pondérée de pixels source au lieu d’un seul échantillon sommaire. C’est pourquoi les contours et les lettres survivent à une réduction de 64%. Le rééchantillonneur pèse 14 Ko compressé en gzip, ne se charge que sur cette page et s’exécute dans un worker : faire glisser une poignée de recadrage reste fluide pendant qu’il travaille. Il ne s’exécute que lorsque la taille change réellement ; à 1:1, il n’y a rien à rééchantillonner.

L’agrandissement passe par le même rééchantillonneur et donne un résultat propre, mais il n’invente rien. Le détail que l’appareil photo n’a jamais capturé n’est pas dans le fichier : c’est le sujet de l’agrandisseur d’images.

Pourquoi un seul passage vaut mieux que trois

Chaque outil séparé décode votre fichier, effectue sa tâche et encode un nouveau fichier. Si le format est JPEG, ou WebP en dessous de la qualité maximale, chacun de ces encodages supprime à nouveau du détail, en plus de ce que le précédent avait supprimé, et vous ne pouvez pas le récupérer. Trois outils, c’est trois encodages ; un seul passage, c’est un seul.

La comparaison de l’outil avec les pages spécialisées :

	L’éditeur d’images	Pages séparées de recadrage, rotation, retournement et redimensionnement
Allers-retours	Un décodage, un encodage	Réencodage entre chaque étape
Ordre des transformations	Indiqué : recadrage, retournement, rotation, redimensionnement	Non documenté
Coordonnées de recadrage	Enregistrées en pixels de l’image d’origine	Recalculées après chaque rotation
Réduction	Lanczos3 dans un worker	Ce que fait le navigateur
Clavier	Champs numériques et sélection accessible au focus	Pointeur uniquement

Smallest, le choix d’export par défaut, essaie WebP, JPEG et PNG et garde celui qui est ressorti le plus léger. Ce sont trois encodages des mêmes pixels finis, et non un encodage qui alimente le suivant : le fichier que vous gardez n’est donc qu’à une seule génération de votre original.

L’ordre est fixe, et il est écrit noir sur blanc

L’ordre des transformations d’image est la séquence dans laquelle le recadrage, le retournement, la rotation et le redimensionnement sont appliqués. Il compte parce que les transformations ne sont pas commutatives : retourner puis faire pivoter ne donne pas la même image que faire pivoter puis retourner.

Ici, c’est toujours le recadrage, puis le retournement, puis la rotation, puis le redimensionnement. Les cadres de recadrage sont enregistrés dans les coordonnées en pixels de la photo d’origine : une valeur Left de 504 saisie avant d’appuyer sur ↻ 90° désigne toujours le même bord ensuite. Le redimensionnement vient en dernier, car rééchantillonner des pixels qu’un recadrage va jeter n’aurait aucun sens.

Une conséquence ressemble à un bug, et n’en est pas un. Comme le retournement s’applique avant la rotation, un retournement horizontal enregistré apparaît comme vertical une fois l’image à 90°. Les boutons de retournement compensent : Flip ↔ retourne toujours dans le sens attendu, et l’indicateur à côté affiche la rotation et les retournements tels que vous les voyez.

Le faire dans l’éditeur d’images

1. Ouvrez l’éditeur d’images et cliquez sur Choose an image (choisir une image), ou déposez-en une dans la zone. Un fichier HEIC venu directement d’un iPhone doit souvent être converti d’abord.
2. Définissez le recadrage sous Crop · drag or type (recadrer en traçant ou en saisissant). Tracez un rectangle sur la photo, choisissez un ratio parmi Free (libre), 1:1, 4:3, 16:9 et 3:2, ou saisissez des valeurs exactes dans Left, Top, Width et Height. Placez le focus sur la sélection avec Tab et les flèches la déplacent d’un pixel à la fois, de vingt avec Maj enfoncée. Reset revient au cadre complet.
3. Tournez et retournez sous Turn : ↺ 90°, ↻ 90°, 180°, Flip ↔ et Flip ↕.
4. Redimensionnez dans le panneau suivant. Saisissez une valeur Width (largeur), Height (hauteur) ou Percent (pourcentage) ; Ratio locked conserve les proportions, et Match crop ramène la taille aux dimensions du recadrage. Les indicateurs Output et Megapixels à côté de l’aperçu en direct se mettent à jour pendant la saisie.
5. Choisissez un format sous Save as : Smallest, PNG, JPEG, ou WebP si votre navigateur sait l’encoder. Le curseur Quality va de 0.30 à 1.00, démarre à 0.85 et se désactive pour le PNG, qui est sans perte.
6. Cliquez sur Download. Le fichier est nommé d’après ce que le navigateur a réellement produit, et Last file indique sa taille.

Ce que l’export change en plus des pixels

• Les métadonnées disparaissent. Le réencodage supprime les données EXIF, ce qui retire les coordonnées GPS qu’un téléphone inscrit dans chaque photo, mais aussi les champs de copyright et d’appareil photo si vous en aviez besoin.
• Le JPEG ne gère pas la transparence. Tout ce qui est transparent est aplati sur du blanc.
• Il existe un plafond de taille. Un canvas de navigateur accepte environ 8 192 pixels de côté, et les anciennes versions d’iOS plafonnent le total vers 16 mégapixels. Au-delà de l’une ou l’autre limite, un canvas renvoie une image vide sans erreur : l’outil plafonne donc la taille et le signale. La vérification couvre aussi le canvas intermédiaire : un scan de 12 000 pixels recadré à 11 000 pixels dépasse toujours le plafond.
• Pas de rotation libre. Seuls les quarts et demi-tours sont possibles. Redresser un horizon de deux degrés obligerait à interpoler, et donc à adoucir, chaque pixel.

Autres façons de faire

Sur Mac, Preview (Aperçu) sait faire deux des trois opérations : Outils → Rogner (Tools → Crop) recadre selon une sélection, et Outils → Ajuster la taille (Tools → Adjust Size) redimensionne. Sous Windows, l’application Photos recadre et fait pivoter les images. Quelle que soit l’application, effectuez toutes les modifications avant d’enregistrer, pour que l’image ne soit encodée qu’une fois.

Vérifier que rien n’a été envoyé

Ouvrez les outils de développement de votre navigateur sur l’onglet Réseau avant de commencer. Le premier redimensionnement télécharge le rééchantillonneur lui-même, un script servi par ce site ; rien de ce qui transporte votre image ne sort, car le recadrage, la rotation et le rééchantillonnage se font tous dans l’onglet.

Faites les trois opérations d’un coup dans l’éditeur d’images. Pour savoir à quelle taille s’imprimeront les pixels obtenus, utilisez le convertisseur de pixels ; pour alléger le fichier enregistré sans toucher à un seul pixel, le compresseur d’images.