Bhinish Dhiman
Comment agrandir une image sans qu'elle devienne floue, et ce que l'agrandissement ne peut pas faire
Traduit de l’original en anglais. Lire l’original
Chargez l'image, choisissez 1.5×, 2×, 3× ou 4× (ou une largeur cible), faites glisser le sélecteur de zone sur un contour pour comparer le volet Lanczos3 au moteur de mise à l'échelle du navigateur, puis téléchargez. Lanczos3 garde des contours plus nets qu'une mise à l'échelle bilinéaire rapide, mais aucun rééchantillonneur n'ajoute de détail : à 2×, chaque pixel capturé couvre quatre pixels de sortie, donc 75% du résultat est interpolé ; à 4×, environ 94%.
Un certain flou peut être évité, un autre non. Le flou évitable vient d’un mauvais filtre de mise à l’échelle, qui bave sur des contours que l’original tenait nettement. Le flou inévitable est déjà dans le fichier : une petite image contient un nombre fixe de pixels mesurés, et l’agrandir les étale sur plus d’espace. Un bon agrandissement traite le premier et reste honnête sur le second.
Deux termes
Le rééchantillonnage d’image consiste à calculer de nouveaux pixels à partir de leurs voisins quand une image change de taille. Un rééchantillonneur redistribue l’information déjà présente. Il ne peut pas en ajouter : c’est toute la différence entre le rééchantillonnage et la super-résolution par réseau neuronal que le mot « upscaler » évoque aujourd’hui pour la plupart des gens.
Lanczos3 est un filtre de rééchantillonnage qui pondère une large fenêtre de pixels source pour chaque nouveau pixel, à l’aide d’une fonction sinc fenêtrée. Il préserve le contraste des contours qu’un filtre plus étroit, comme le bilinéaire, gomme en faisant la moyenne. Son effet secondaire connu est un léger halo qui peut apparaître à côté d’un contour très dur.
Agrandir une image, étape par étape
- Ouvrez l’agrandisseur d’images et cliquez sur Choose an image (choisir une image), ou déposez ou collez-en une n’importe où sur la page. PNG, JPEG, WebP, GIF et AVIF s’ouvrent tous ; un HEIC d’iPhone doit généralement être converti d’abord.
- Sous Enlarge by (agrandir de), choisissez 1.5×, 2×, 3× ou 4×, ou ouvrez More options (plus d’options) et saisissez une largeur en pixels dans Target width (largeur cible). Les deux restent synchronisés, et aucun ne dépasse 4×. La taille sous les facteurs affiche la taille de sortie, la taille source et le nombre de mégapixels.
- Lisez la ligne sous cette taille. Elle indique combien de pixels de sortie couvre chaque pixel capturé et quelle part du résultat est interpolée ; Result la reprend en pourcentage.
- Dans Pick the region (choisir la zone), faites glisser le rectangle (ou utilisez les flèches du clavier ; maintenez Maj pour des pas plus grands) sur un contour : des lettres, un horizon, un câble. Les deux volets montrent cette zone à un pixel de sortie par pixel d’écran, Lanczos3 à gauche et le
drawImagedu navigateur à droite. - Sous More options, Save as, choisissez Smallest, PNG, JPEG ou WebP. Smallest essaie WebP, puis JPEG, puis PNG, et garde celui que votre navigateur a écrit le plus léger ; WebP n’apparaît que si le navigateur sait l’écrire. Pour une image avec des zones transparentes, choisissez PNG ou WebP, car l’option JPEG aplatit tout ce qui est transparent sur du blanc.
- Cliquez sur Download the enlargement (télécharger l’agrandissement). Il enregistre l’image entière, et non la zone affichée dans les volets, sous un nom comme photo@2x.webp, puis affiche la taille et le format du fichier sous Result. La barre en bas de l’écran porte aussi Download.
Quelle part d’un agrandissement a été capturée
Tout agrandissement est surtout de l’interpolation, et la proportion grimpe vite. À un facteur f, chaque pixel capturé couvre f² pixels de sortie : la part interpolée est donc de 1 − 1/f².
| Facteur | Pixels de sortie par pixel capturé | Part interpolée | Proposé par l’outil |
|---|---|---|---|
| 1.5× | 2.25 | 56% | Oui |
| 2× | 4 | 75% | Oui |
| 3× | 9 | 89% | Oui |
| 4× | 16 | 94% | Oui |
| 8× | 64 | 98% | Non |
| 16× | 256 | 99.6% | Non |
C’est pourquoi les préréglages s’arrêtent à 4×. Au-delà, un seul pixel mesuré doit en devenir 64 ou 256, et le résultat est une grande version floue d’une petite image. En pratique, un 2× est généralement indiscernable à distance de lecture normale, un 3× reste acceptable pour une impression vue à bout de bras, et un 4× commence à paraître mou sur les textures fines. Une image de 200 pixels contient 200 pixels de détail, quelle que soit la taille à laquelle vous l’affichez.
Le plafond du canvas qui transforme 2× en 1.18×
La première limite que l’on rencontre n’est pas le filtre. Un canvas de navigateur est plafonné vers 8 192 pixels de côté, et sur les anciens iPhone à environ 16 mégapixels au total ; au-delà, il renvoie une image vide au lieu d’une erreur. L’outil vérifie les deux limites, 8 192 pixels de côté et 16 777 216 pixels au total (4 096 × 4 096), avant de dessiner quoi que ce soit, réduit la sortie pour qu’elle tienne, et l’indique dans un avertissement sous Result.
Prenez une photo de 12 mégapixels, 4000 × 3000. À 2×, elle demande 8000 × 6000, soit 48 mégapixels, presque trois fois le plafond de surface. L’outil produit à la place 4729 × 3547 : un facteur effectif de 1.18×. Tous les autres préréglages donnent ce même fichier : 1.5×, 3× et 4× dépassent eux aussi le plafond sur cette photo, et chacun est ramené à la plus grande taille de ces proportions qui tient.
Le calcul donne la règle utile. Une image carrée peut être doublée jusqu’à 2 048 pixels de côté, puisque 4 096 × 4 096 correspond exactement au plafond, et quadruplée jusqu’à 1 024. L’outil convient aux icônes, captures d’écran, petits scans et vignettes. Une photo sortie directement d’un téléphone est généralement plus grande que tout ce qu’il peut produire.
Le volet de droite montre le navigateur sous son meilleur jour
Comparer Lanczos3 au réglage de plus basse qualité du navigateur reviendrait à truquer le test : le volet de droite utilise donc drawImage avec imageSmoothingQuality réglé sur 'high'. Le code source de l’outil précise que cela donne un filtre proche de Lanczos dans Chrome et Firefox et du bicubique dans Safari, et qu’une page n’a aucun moyen de savoir lequel elle a obtenu.
Sur certaines images, les deux volets paraissent donc identiques, et c’est un vrai résultat. Les zones uniformes sont identiques avec n’importe quel rééchantillonneur ; c’est sur les contours que la différence se voit, c’est pourquoi le sélecteur de zone vous demande d’en viser un. Quand vous ne voyez pas de différence, prenez le fichier le plus léger. L’intérêt d’un filtre nommé, c’est de savoir ce qui a été fait à votre image, dans tous les navigateurs.
Les volets sont dessinés à un pixel de sortie par pixel d’écran, pour une raison qui vaut pour toute comparaison que vous ferez vous-même. Un agrandissement 4× affiché dans un petit aperçu est réduit à nouveau par le navigateur, ce qui masque la différence que vous essayez de juger. Regardez le fichier téléchargé à 100% avant de conclure qu’il est flou.
Autres façons d’agrandir une image
Sous macOS, Outils → Ajuster la taille (Tools → Adjust Size) dans Preview (Aperçu) redimensionne une image. Ce guide n’affirme rien sur le filtre utilisé.
Sous Windows, l’application Photos intégrée recadre et fait pivoter les images, mais ce guide n’a pas de méthode intégrée vérifiée pour en agrandir une. Il n’a pas non plus de méthode en ligne de commande vérifiée, et n’en propose donc pas.
Les upscalers neuronaux effectuent une opération différente. Un modèle entraîné génère de nouveaux pixels dont il prédit la place dans l’image, au lieu de redistribuer ceux qui ont été capturés. Ce guide n’affirme rien sur la qualité de leur travail. Cet outil n’en inclut pas, car il ne pourrait pas être servi : la version WebGPU du moteur d’exécution mesurait 27 648 Ko, au-delà du plafond de 25 Mio par fichier de l’hébergeur de ce site, et les poids du modèle ne se compressent que d’environ 7%. Le rééchantillonneur utilisé à la place pèse 14 Ko.
| Agrandisseur d’images | Preview sur macOS, Ajuster la taille | Un upscaler neuronal | |
|---|---|---|---|
| Méthode | Rééchantillonnage Lanczos3 | Non précisé ici | Un modèle entraîné génère des pixels |
| Ajoute du détail non capturé | Non | Non | Il génère du nouveau détail |
| Montre le résultat à côté d’une alternative | Oui, face au moteur du navigateur | Non | Non traité ici |
| Facteur maximal | 4× | Non précisé ici | Non traité ici |
| Votre image est envoyée quelque part | Non | Non | Dépend du service |
Vérifier que l’image est restée sur votre machine
Chargez la page et agrandissez une image, pour que tout ce dont l’outil a besoin soit arrivé. Déconnectez-vous ensuite du réseau et agrandissez-en une seconde. Si les volets se redessinent et que le téléchargement se termine hors ligne, rien n’a pu être envoyé. L’onglet Réseau des outils de développement raconte la même histoire avec la connexion active : le code propre à la page, et aucune requête qui transporte votre image.
L’agrandisseur d’images est gratuit. Pour recadrer ou faire pivoter avant d’agrandir, utilisez l’éditeur d’images, et pour choisir entre PNG et WebP pour le résultat, l’article combien fait gagner le passage du PNG au WebP, mesuré sur onze images donne les chiffres.