Images et photos · Redimensionneur d'images sociales
Filtres de rééchantillonnage expliqués : le plus proche, bilinéaire, bicubique et Lanczos
· Contexte
redimensionnement d'image rééchantillonnage toile
Chaque redimensionnement doit décider de la couleur d'un nouveau pixel parmi les anciens : copies les plus proches, bilinéaire en moyenne quatre, bicubique pèse seize et Lanczos utilise un sinc fenêtré. Cet article explique chacun le compromis entre le flou, la sonnerie et l'alias, et ce que les navigateurs vous offrent.
Même photo, trois outils, trois résultats — le puzzle concret d'images redimensionnées qui diffèrent par leur netteté et leurs reflets
Deux outils de redimensionnement peuvent produire des fichiers de dimensions identiques et de bords visiblement différents. La géométrie peut correspondre tandis que l'échantillonnage diffère : chaque pixel de sortie a besoin d'une couleur dérivée des informations source, et cette dérivation peut favoriser la netteté, la douceur ou la résistance au crénelage. Les dimensions du fichier ne peuvent à elles seules identifier la méthode.
Social Image Resizer fait délibérément une promesse plus étroite. Avant drawImage, il active le lissage de l'image et demande une qualité de lissage élevée. L'API Canvas 2D n'indique pas à l'application le noyau nommé sélectionné par le navigateur. Le produit ne peut donc pas étiqueter sa sortie la plus proche, bilinéaire, bicubique ou Lanczos avec une certitude au niveau de la source.
Le problème de l'échantillonnage : pourquoi la réduction d'une image sans filtrage produit du moiré et des bords irréguliers, en termes simples
La réduction supprime les échantillons. Si des rayures, des cheveux ou des maillages haute fréquence sont cartographiés sans filtrage adéquat, ils peuvent devenir irréguliers, scintiller ou former de faux motifs. L'élargissement crée de nouvelles positions d'échantillon entre celles existantes. Dans les deux sens, un rééchantillonneur estime la sortie d'une source finie plutôt que de révéler des détails cachés.
Une image de test utile combine des diagonales, des lignes d'un pixel, des grilles répétées et des dégradés lisses. Exportez-le à plusieurs échelles et inspectez les pixels un à un ainsi que la taille d'affichage normale. Les observations montrent comment le navigateur testé gère le contenu difficile sans prétendre procéder à une ingénierie inverse de sa mise en œuvre interne.
Le plus proche et le bilinéaire sont des concepts utiles, mais ToolAcre ne les expose pas comme choix
Le voisin le plus proche choisit conceptuellement l'échantillon source le plus proche et tend à préserver les blocs de pixels durs. L'interpolation bilinéaire mélange conceptuellement les échantillons proches et lisse généralement les transitions. Ces descriptions aident à expliquer les extrêmes visibles, mais ToolAcre ne propose aucun commutateur étiqueté avec l'une ou l'autre méthode et ses tests n'identifient pas le noyau du moteur.
Ne déduisez pas un filtre nommé uniquement à partir d'un seul bord. L'implémentation d'un navigateur peut optimiser ou faire varier le comportement à grande échelle. La seule déclaration fiable sur le produit est que le lissage est activé et que la propriété de qualité est définie sur élevée. Toute classification plus approfondie nécessite des preuves spécifiques au navigateur en dehors de ce module.
Le comportement bicubique n'est pas promis par cette implémentation de canevas
Les méthodes bicubiques utilisent un voisinage et une pondération cubique plus larges, avec des variantes qui échangent la douceur contre le dépassement des bords. Il s’agit d’une base précieuse pour comparer les applications d’images dédiées. Il ne s'agit pas d'un contrat pour la sortie Canvas 2D, car render.js ne sélectionne pas de coefficients cubiques ni n'importe de bibliothèque bicubique.
Si un flux de production nécessite un noyau cubique particulier, utilisez un outil qui le nomme et le teste. Social Image Resizer donne la priorité à la disponibilité du navigateur natif et au fonctionnement local. Son résultat doit être jugé comme une sortie rééchantillonnée par le navigateur sous le moteur et la version enregistrés, et non représenté comme une implémentation scientifique contrôlée d'une variante.
Lanczos est en dehors du contrat d'outillage et n'est pas réclamé par défaut
Lanczos utilise une idée de sinc fenêtré pour préserver les détails tout en contrôlant l'alias, et les bords nets peuvent montrer une sonnerie sous certains paramètres. Le classeur indique qu'il s'agit d'un défaut dans de nombreux outils photo, mais cette prévalence n'est pas indiquée ici. Plus important encore, rien dans ToolAcre ne demande le nom de Lanczos.
Cette omission est importante lors du diagnostic des halos. En voir un ne prouve pas un noyau de Lanczos, et ne pas en voir ne prouve pas un autre algorithme. Comparez la source et la sortie, l'échelle du document et le navigateur, et évitez d'attribuer des causes que l'application ne peut pas observer. Un symptôme visuel peut guider les tests sans certifier le code caché.
Ce que proposent les navigateurs : des bascules de lissage et des conseils de qualité plutôt que des filtres nommés, et pourquoi la sortie varie selon les navigateurs et les versions.
Le canevas du navigateur expose imageSmoothingEnabled et imageSmoothingQuality plutôt qu'un catalogue de filtres. ToolAcre définit le premier vrai et le deuxième haut immédiatement avant de dessiner la source mise à l'échelle. Les moteurs peuvent interpréter une indication différemment ou évoluer entre les versions, c'est pourquoi un code JavaScript identique peut produire de petites différences entre les navigateurs.
La géométrie reste explicite même lorsque l'échantillonnage ne l'est pas. calculateFrame renvoie l'échelle exacte et dessine les dimensions ; drawRect centre et décale le résultat ; le canevas de sortie a des dimensions cibles entières. Séparez ces faits connus du choix d’échantillonnage caché lorsque vous examinez une différence entre les navigateurs.
Ce que cela ne couvre pas : la netteté après le redimensionnement et les scalers sensibles au contenu ou à l'apprentissage automatique
La netteté après le redimensionnement, les méthodes sensibles au contenu et la reconstruction par apprentissage automatique ne sont pas présentes. Il n'existe pas de contrôle de masque flou, de détecteur de contours ou de modèle de détails générés. Les contrôles de qualité de sortie affectent l'encodage des formats avec perte, et non une étape de netteté post-redimensionnement. Traitez-les comme des opérations distinctes.
Un workflow natif du navigateur reste utile précisément parce qu'il est simple et disponible. Pour les cultures sociales de routine, inspectez le résultat réel. Pour l'imagerie scientifique, les masters typographiques ou la préservation du pixel art, choisissez des outils avec des contrôles de filtre explicites et une validation adaptés à ce contenu.
À retenir : le filtre explique l'apparence – Social Image Resizer utilise le propre rééchantillonnage du navigateur, donc connaître ces termes vous indique à quoi vous attendre et ce qu'il faut vérifier.
Le rééchantillonnage explique pourquoi la taille n'est pas tout, mais les preuves doivent correspondre à l'outil. Social Image Resizer demande un dessin de toile lissé et de haute qualité et laisse le noyau exact au navigateur. C'est suffisant pour produire des récoltes utiles sans commercialiser un filtre que le code ne sélectionne jamais.
Conservez une image de test difficile, enregistrez les détails du navigateur et comparez les exportations lorsque la qualité est importante. La terminologie aide à décrire ce que vous voyez ; la mise en œuvre vous indique ce que vous pouvez honnêtement prétendre. Les algorithmes nommés n’ont leur place que là où le code ou les preuves faisant autorité du navigateur les démontrent.