Σκάλισμα εικόνας: θέλετε έναν επαυξητή ή έναν αλλαγέα μεγέθους;

Ένας αλλαγέας μεγέθους διασυνδέει τα εικονοστοιχεία και ένας επαυξητής τα ανακατασκευάζει. Ποιον χρειάζεστε, με μετρημένα αποτελέσματα 2x και 4x και τα πραγματικά όρια του προγράμματος περιήγησης.

August 9, 2026

"Σκάλισμα εικόνας" καλύπτει δύο εργαλεία που κάνουν αντίθετα πράγματα σε ένα αρχείο. Ένας αλλαγέας μεγέθους επαναδειγματοληπτεί τα εικονοστοιχεία που έχετε ήδη, έτσι ώστε 4000 px πλάτος να γίνει 1080 px πλάτος και η λεπτομέρεια να μένει μέση σε λιγότερα δείγματα. Ένας επαυξητής περνά την εικόνα μέσω ενός εκπαιδευμένου μοντέλου που ανακατασκευάζει τις άκρες και την υφή που το πρωτότυπο δεν αποθήκευσε ποτέ. Και οι δύο αλλάζουν τον αριθμό στο πλαίσιο διαστάσεων. Μόνο ένας από αυτούς μπορεί να προσθέσει λεπτομέρεια, και προσφέρει μόνο 2x ή 4x.

Και οι δύο δικοί μας λειτουργούν μέσα στην καρτέλα του προγράμματος περιήγησης. Ο επαυξητής κατεβάζει το μοντέλο του στη μηχανή σας μία φορά, στη συνέχεια κάθε πλακίδιο μετά από αυτό υπολογίζεται στην GPU σας. Τίποτα δεν δημοσιεύεται πουθενά, γιατί δεν υπάρχει διαδρομή API για να δημοσιεύσετε και καμία ενέργεια διακομιστή στον κώδικα (αυτή είναι η όλη αρχιτεκτονική, περιγραφόμενη στη σελίδα απορρήτου μας). Κάθε άλλος επαυξητής σε αυτή την κατηγορία ανεβάζει το αρχείο σας και στη συνέχεια υπόσχεται να το διαγράψει μία ή δύο ώρες αργότερα.

Ποια είναι η διαφορά μεταξύ αλλαγής μεγέθους και επαύξησης;

Η αλλαγή μεγέθους είναι διασύνδεση. Ο αλλαγέας μεγέθους αναθέτει τη δουλειά στο πρόγραμμα περιήγησης, είτε μέσω του createImageBitmap με `resizeQuality: "high"` είτε μέσω ενός καμβά `drawImage` με imageSmoothingQuality ρυθμισμένο σε υψηλό. Σε κάθε περίπτωση, το εξαγόμενο εικονοστοιχείο είναι ένας σταθμισμένος μέσος όρος των εισερχόμενων εικονοστοιχείων γύρω του. Η μέση δεν μπορεί να παράγει μια άκρη που δεν υπήρχε στα δεδομένα πηγής, οπότε η μεγέθυνση μέσω διασύνδεσης σας δίνει μια μεγαλύτερη, πιο απαλή αντίγραφο των ίδιων πληροφοριών.

Η επαύξηση είναι ανακατασκευή. Η δική μας τρέχει Real-ESRGAN realesr-general-x4v3, ένα γενετικό μοντέλο εκπαιδευμένο να οραματίζεται πειστική λεπτομέρεια σε 4x, περιγραφόμενο στο 2021 paper. Επεξεργάζεται την εικόνα σε πλακίδια 256 px με 16 px επικάλυψη σε κάθε πλευρά, έτσι ώστε ένα πλακίδιο να βλέπει πάντα το πλαίσιο των γειτόνων του πριν γραφτεί η κύρια περιοχή. Το μοντέλο μαντεύει. Αυτά τα μαντεψίματα είναι συνήθως σωστά σε πρόσωπα, υφάσματα και κείμενο, και μπορεί να είναι πολύ λάθος σε λεπτά επαναλαμβανόμενα μοτίβα.

Ποιον πραγματικά θέλω;

Εάν το στοχευόμενο μέγεθος είναι μικρότερο από την πηγή, θέλετε τον αλλαγέα μεγέθους και δεν υπάρχει τίποτα να συζητήσετε. Εάν το στοχευόμενο είναι μεγαλύτερο, το ερώτημα είναι αν μπορείτε να αντέξετε τις περιορισμούς παρακάτω. Να τι κάνουν τα δύο εργαλεία στην κατασκευή μας, ληφθέντα από τον κώδικα αντί από το μάρκετινγκ.

Μια γραμμή αξίζει μια προειδοποίηση. Ο αλλαγέας μεγέθους προεπιλέγει το "μην μεγαλώνετε" να είναι επιλεγμένο, το οποίο περιορίζει οποιοδήποτε πληκτρολογημένο στόχο στις αρχικές διαστάσεις. Ένα ονομαστικό κοινωνικό προκαθορισμένο παρακάμπτει αυτή την περιοριστική επιλογή σκόπιμα, γιατί ένα περιορισμένο πλαίσιο ιστορίας 1080x1920 δεν ταιριάζει σε καμία προδιαγραφή πλατφόρμας.

Πόσο μεγαλώνει το αρχείο όταν το επαυξάνω;

Πολύ, και το PNG είναι ο λόγος. Τρέξαμε το small.png, 400x269 και 177,1 KB, μέσω και των δύο ρυθμίσεων. Στο 2x βγήκε 800x538 και 782,8 KB. Στο 4x βγήκε 1600x1076 και 2,7 MB. Αυτό είναι περίπου 15x τα bytes εισόδου για 16x τα εικονοστοιχεία, που είναι πώς φαίνεται η έξοδος χωρίς απώλειες όταν το μοντέλο έχει μόλις γεμίσει κάθε επίπεδη περιοχή με νέα μικροϋφή. Ο επαυξητής γράφει PNG σε κάθε περίπτωση, οπότε δεν υπάρχει ρυθμιστής ποιότητας για να ανταλλάξετε.

Στείλτε το αποτέλεσμα στον συμπιεστή πριν το χρησιμοποιήσετε οπουδήποτε. Η λειτουργία "χωρίς συμπίεση" PNG είναι το επίπεδο 3 του oxipng, πραγματικά χωρίς απώλειες, και πήρε ένα 942,4 KB alpha.png κάτω από 383,9 KB. Η λειτουργία παλέτας (imagequant) πήρε το ίδιο αρχείο στα 98,3 KB, που είναι καλό για επίπεδα γραφικά και λάθος για μια φωτογραφική επαύξηση.

Γιατί η επιλογή 2x φαίνεται πιο απαλή από την 4x;

Επειδή το 2x δεν είναι ένα ξεχωριστό μοντέλο. Το realesr-general-x4v3 έχει ακριβώς μία κλίμακα εξόδου, και είναι 4x. Όταν επιλέγετε 2x, τρέχουμε την ταυτόσημη εκτίμηση και στη συνέχεια μειώνουμε κάθε πλακίδιο πίσω στο μισό μέγεθος με τον διασυνδετή καμβά σε υψηλή ποιότητα λείανσης. Έτσι, η εργασία GPU είναι η ίδια και για τα δύο κουμπιά, και το 2x είναι ανακατασκευή ακολουθούμενη από επαναδειγματοληψία με αυτή τη σειρά. Η μείωση γίνεται ανά πλακίδιο, που σημαίνει ότι η πλήρης εικόνα 4x δεν υπάρχει ποτέ στη μνήμη κατά τη διάρκεια μιας εργασίας 2x. Εάν θέλετε την ακατέργαστη έξοδο του μοντέλου, επιλέξτε 4x και μειώστε το εσείς αργότερα στον αλλαγέα μεγέθους. Το πλάτος πηγής που χρειάζεται κάθε πολλαπλασιαστής για να φτάσει τα 3840 px υπολογίζεται ξεχωριστά.

Γιατί ο επαυξητής δεν δέχεται τη φωτογραφία μου 24 MP;

Εξαρτάται αποκλειστικά από το αν ο περιηγητής σας ξεκινά το WebGPU. Με το WebGPU να λειτουργεί, μια εργασία 4x δέχεται περίπου 32 megapixels εισόδου. Χωρίς αυτό, το onnxruntime-web επιστρέφει σε μονό νήμα WASM και η οροφή εισόδου πέφτει σε περίπου 1,1 megapixels, μικρότερη από σχεδόν οποιαδήποτε φωτογραφία τηλεφώνου. Αυτό δεν είναι ένα αυθαίρετο όριο. Η εκτίμηση CPU σε αυτό το μοντέλο διαρκεί λεπτά ανά megapixel, και μια εργασία 24 MP θα κρεμάσει την καρτέλα για το υπόλοιπο της απογευματινής. Ένα αρχείο τη φορά, πάντα.

Τι άλλο αλλάζει ο αλλαγέας μεγέθους εκτός από τον αριθμό εικονοστοιχείων;

Περισσότερα από όσα περιμένουν οι άνθρωποι. Μια πηγή PNG παραμένει PNG και παραμένει χωρίς απώλειες. Όλα τα άλλα επανακωδικοποιούνται, με ποιότητα 90 από προεπιλογή, οπότε η αλλαγή μεγέθους ενός JPEG είναι επίσης μια επανασυμπίεση είτε το θέλατε είτε όχι. Μια πηγή GIF βγαίνει ως PNG, και αν αυτό το GIF ήταν κινούμενο, χάνετε κάθε καρέ εκτός από το πρώτο. Οι πηγές AVIF βγαίνουν επίσης ως PNG. Οι τρεις τρόποι εφαρμογής είναι σημαντικοί όταν οι λόγοι διαστάσεων πηγής και στόχου διαφωνούν: το cover κεντρικά κόβει, το stretch παραμορφώνει και το contain μειώνει τον καμβά στην περιοχή που ταιριάζει αντί να τον γεμίζει με ράβδους. Εάν χρειάζεστε μια συγκεκριμένη περιοχή αντί για ένα συγκεκριμένο μέγεθος, ο κόφτης είναι το σωστό εργαλείο, αν και παίρνει ένα αρχείο τη φορά και επανακωδικοποιεί τις μορφές με απώλειες σε σκληρά κωδικοποιημένη ποιότητα 92.

Τι πρέπει να κάνω με το αρχείο μου τώρα;

Ελέγξτε πρώτα την μακρά πλευρά. Κάτω από περίπου 1600 px και χρειάζεστε μεγαλύτερο, ανοίξτε τον επαυξητή, τρέξτε 2x, στη συνέχεια σπρώξτε το PNG μέσω του συμπιεστή σε λειτουργία χωρίς απώλειες. Πάνω από αυτό, ή ήδη στην ανάλυση που χρειάζεστε, χρησιμοποιήστε τον αλλαγέα μεγέθους και επιλέξτε ένα κοινωνικό προκαθορισμένο ώστε να μην χρειάζεται να κοιτάξετε τις διαστάσεις. Εάν ο στόχος είναι μια ροή, τα τέσσερα σχήματα που δέχεται το Instagram και η οροφή 1080 px πίσω από αυτά είναι η λίστα από την οποία πρέπει να εργαστείτε.