Περικοπή

Κυκλική περικοπή Περικοπή εικόνας

Βελτιστοποίηση

Συμπίεση εικόνας Αναβάθμιση Εικόνας AI Αφαίρεση φόντου

Επεξεργασία

Αλλαγή μεγέθους εικόνας

Μετατροπή

Άλλα

Εικόνα σε PDF

Κόψε οποιαδήποτε εικόνα σε κύκλο online

Αρχεία JPG, PNG, WebP ή AVIF, αποτέλεσμα PNG με διάφανο φόντο σε δευτερόλεπτα.

ή σύρετε την εικόνα εδώ

Σχετικά με αυτό το εργαλείο

Κόψε οποιαδήποτε φωτογραφία σε τέλειο κύκλο απευθείας στον browser σου, χωρίς εγκατάσταση εφαρμογής. Ανέβασε ένα JPG, PNG, WebP ή AVIF αρχείο στη σελίδα και το Cropper.js v2 ανοίγει αμέσως την εικόνα σε κυκλικό στάδιο με μάσκα. Σύρε τις λαβές για να κεντράρεις το θέμα σου, ρύθμισε το μέγεθος του κύκλου με τις γωνιακές λαβές και κάνε κλικ στο Αποθήκευση. Ο browser κωδικοποιεί το αποτέλεσμα ως PNG, WebP ή AVIF με διαφανές φόντο, ή ως JPEG αν επιλέξεις χρώμα γεμίσματος, και το κατεβάζει απευθείας στη συσκευή σου. Η καρτέλα Network στο DevTools δείχνει μηδέν αιτήματα εξόδου κατά τη διαδικασία της κοπής. Το εργαλείο δέχεται αρχεία έως 25 MB και 16 megapixel και λειτουργεί εξίσου σε desktop και κινητό. Οι περισσότεροι χρήστες το χρησιμοποιούν για να φτιάξουν φωτογραφία προφίλ ή στρογγυλό λογότυπο που να φαίνεται καθαρό στα κυκλικά avatars του LinkedIn, του Discord, του Slack και του Instagram.

Άνοιξε το εργαλείο κυκλικής κοπής
Πώς να κόψεις μια εικόνα σε κύκλο

Πώς να κόψεις μια εικόνα σε κύκλο

Σύρε ένα JPG, PNG, WebP ή AVIF στη σελίδα και το Cropper.js v2 το φορτώνει σε κυκλικό στάδιο με μάσκα. Μια σκούρα επικάλυψη δείχνει την περιοχή που θα αφαιρεθεί και ο φωτεινός κύκλος στη μέση είναι ό,τι μένει. Σύρε τον κύκλο για να κεντράρεις το θέμα σου, κλιμάκωσέ τον με τις γωνιακές λαβές ή με pinch gesture σε touch. Όταν το καδράρισμα σου φαίνεται σωστό, διάλεξε μορφή και κάνε κλικ Αποθήκευση. Ο browser κωδικοποιεί το αρχείο τοπικά και ξεκινά τη λήψη. Άνοιξε την καρτέλα Network στο DevTools κατά τη διαδικασία και δες την να μένει άδεια. Κανένα POST αίτημα δεν εκτελείται κατά το upload, το drag ή το save.

Διάλεξε μορφή και κόψε
Διάλεξε τη μορφή αρχείου εξόδου

Διάλεξε τη μορφή αρχείου εξόδου

Τέσσερις επιλογές βρίσκονται στο μενού λήψης. Το PNG κρατά την περιοχή έξω από τον κύκλο πλήρως διαφανή και είναι η ασφαλής προεπιλογή για avatars και λογότυπα. Το WebP υποστηρίζει επίσης διαφάνεια και τυπικά είναι 25 έως 35 τοις εκατό μικρότερο από το PNG. Το AVIF είναι το μικρότερο από τα τρία διαφανή formats, συχνά στο μισό μέγεθος του WebP, αλλά ο @jsquash/avif encoder παίρνει περίπου 3 δευτερόλεπτα σε desktop και έως 30 δευτερόλεπτα σε mid-range κινητό. Το JPEG παράγει επίπεδο κύκλο πάνω σε συμπαγές χρώμα φόντου που διαλέγεις. Δεν έχει alpha channel, οπότε η διαφάνεια αντικαθίσταται από το χρώμα γεμίσματος. Διάλεξε PNG για αξιοπιστία, WebP για μέγεθος, AVIF όταν μετράει το bandwidth, JPEG μόνο όταν ο στόχος απορρίπτει διαφανή αρχεία.

Κόψε για οποιαδήποτε κοινωνική πλατφόρμα
Στρογγυλές φωτογραφίες για κάθε πλατφόρμα

Στρογγυλές φωτογραφίες για κάθε πλατφόρμα

Οι περισσότερες κοινωνικές πλατφόρμες εμφανίζουν τα avatars μέσα σε κυκλική μάσκα, οπότε προ-κόβοντας ελέγχεις τι μένει μέσα. Το LinkedIn δείχνει τη φωτογραφία προφίλ στα 400 επί 400 px στη σελίδα προφίλ και γύρω στα 48 px στο feed. Το Discord αποδίδει το user avatar στα 128 επί 128 στις λίστες μελών server και 32 επί 32 στο chat. Το Instagram εμφανίζει τη φωτογραφία προφίλ κυκλικά γύρω στα 110 px σε κινητό και 32 px στα feed thumbnails. Το Slack χρησιμοποιεί 36 px στη λίστα καναλιών. Το εργαλείο εξάγει στην αρχική ανάλυση, οπότε κάνε resize πρώτα μέσω του /resize/ αν χρειάζεσαι συγκεκριμένο μέγεθος pixel. Αυτό αποφεύγει κάθε artifact upscaling.

Δες τα όρια στην πράξη
Τι δεν κάνει αυτό το εργαλείο

Τι δεν κάνει αυτό το εργαλείο

Αρχεία πάνω από 25 MB ή μεγαλύτερα από 16 megapixel απορρίπτονται με φιλικό μήνυμα. Ο έλεγχος τρέχει στα magic bytes και στις διαστάσεις header, πριν το decode, οπότε μια λήψη DSLR 50 megapixel δεν θα κρεμάσει ποτέ έναν browser κινητού. Τα HEIC αρχεία αποκωδικοποιούνται μόνο στο Safari 17 και νεότερο, που εκθέτει το createImageBitmap natively για τη μορφή. Chrome, Firefox και Edge επιστρέφουν σφάλμα decode και το εργαλείο προτείνει μετατροπή σε JPG πρώτα. Τα animated GIF εξάγουν μόνο το πρώτο frame. Η κωδικοποίηση AVIF τρέχει σε WASM στη CPU και είναι αργή σε κινητό, τυπικά γύρω στα 30 δευτερόλεπτα για 8 megapixel input. Δεν υπάρχει AI εντοπισμός προσώπου ή αντικειμένου. Η τοποθέτηση του κύκλου είναι πάντα χειροκίνητη.

Δοκίμασε το crop στον browser σου
Πώς η εικόνα σου μένει στη συσκευή σου

Πώς η εικόνα σου μένει στη συσκευή σου

Το Cropper.js εκτελεί την κοπή μέσα στο Canvas API του browser. Η κωδικοποίηση γίνεται μέσω canvas.toBlob για PNG, WebP και JPEG, ή μέσω του @jsquash/avif WASM module για AVIF. Και τα δύο μονοπάτια τρέχουν τοπικά μέσα στην καρτέλα του browser σου. Άνοιξε την καρτέλα Network στο DevTools, ανέβασε μια εικόνα και σύρε τις λαβές. Κανένα POST ή PUT αίτημα που να μεταφέρει δεδομένα εικόνας δεν εμφανίζεται. Μετά το κλικ Αποθήκευση, ένα μόνο αίτημα σε blob: URL εμφανίζεται για κλάσμα δευτερολέπτου, που είναι ο browser να επιλύει το local blob για τη λήψη, όχι αποστολή δεδομένων σε server. Το ίδιο μοτίβο επαληθεύεται σε Chrome, Firefox, Safari και Edge.

Φτιάξε μια κυκλική φωτογραφία προφίλ
Στρογγυλή φωτογραφία προφίλ για κάθε κοινωνικό δίκτυο

Στρογγυλή φωτογραφία προφίλ για κάθε κοινωνικό δίκτυο

Οι κυκλικές κοπές χρησιμεύουν όπου εμφανίζονται τα avatars σε κύκλο. Στο LinkedIn, το Discord, το Instagram και το Slack, η πλατφόρμα κόβει τη φωτογραφία σου σε κυκλικό πλαίσιο. Ανεβάζοντας τετράγωνη εικόνα και αφήνοντας την πλατφόρμα να κόψει αυτόματα, συχνά κόβονται μέρη του προσώπου ή μένει περιττός χώρος στο πλαίσιο. Κόβοντας σε κύκλο εσύ ελέγχεις ακριβώς τι φαίνεται. Το ίδιο ισχύει για στρογγυλά λογότυπα, badges ομάδων, branded εικόνες και Discord server icons. Πρακτικός κανόνας για headshots: κράτα το πρόσωπο κεντραρισμένο με λίγο χώρο γύρω από το κεφάλι. Διαβάζεται καλύτερα σε μικρό κυκλικό avatar από ένα tight crop όπου το πιγούνι αγγίζει την άκρη.

Πώς να κόψετε μια φωτογραφία σε κύκλο

  1. Σύρε την εικόνα σου στη σελίδα

    Κάνε κλικ στην περιοχή upload ή σύρε ένα JPG, PNG, WebP, AVIF ή GIF αρχείο απευθείας πάνω σε αυτήν. Το κυκλικό στάδιο κοπής ανοίγει αυτόματα.

  2. Κέντρα τον κύκλο στο θέμα σου

    Σύρε τον κύκλο πάνω στο πρόσωπο ή το λογότυπο σου. Κάνε pinch ή scroll για να αλλάξεις το μέγεθος μέχρι να σου αρέσει η κοπή.

  3. Διάλεξε μορφή εξόδου

    Επίλεξε PNG ή WebP για διαφανή κύκλο, AVIF για το μικρότερο αρχείο, ή JPEG αν χρειάζεσαι συμπαγές χρώμα φόντου.

  4. Κάνε κλικ Αποθήκευση και κατέβασε το αρχείο σου

    Ο browser κωδικοποιεί το αποτέλεσμα τοπικά και το κατεβάζει στη συσκευή σου. Το filename διατηρεί το αρχικό όνομα με -circle στο τέλος.

Χρειάζεσαι ορθογώνιο, όχι κύκλο;

Αυτό το εργαλείο παράγει ένα σχήμα, τον κύκλο. Για ορθογώνια κοπή με ελεύθερη αναλογία χρησιμοποίησε το crop image. Για Instagram feed στα 1080 επί 1080 χρησιμοποίησε το crop σε τετράγωνο ή ένα από τα ανά πλατφόρμα crop tools.

Crop εικόνας Άλλα εργαλεία crop

Συχνές ερωτήσεις

Πώς κόβω μια φωτογραφία σε κύκλο;

Ανέβασε την εικόνα σου (JPG, PNG, WebP, AVIF, GIF ή BMP). Το Cropper.js ανοίγει αμέσως με κυκλική επιλογή κεντραρισμένη στην εικόνα. Σύρε τον κύκλο για να κεντράρεις το θέμα σου, ρύθμισε το μέγεθος με τις γωνιακές λαβές ή με pinch gesture και κάνε κλικ Αποθήκευση. Ο browser κωδικοποιεί και κατεβάζει ένα PNG με διαφανές φόντο. Η διαδικασία δεν παίρνει περισσότερο από 30 δευτερόλεπτα για μια τυπική φωτογραφία.

Αλλάζει το μέγεθος ή η ποιότητα μετά την περικοπή σε κύκλο;

Το εργαλείο εξάγει στην ανάλυση που επέλεξες κατά το crop. Δεν αλλάζει το μέγεθος της εικόνας αυτόματα. Αν χρειάζεσαι ακριβείς διαστάσεις σε pixel, για παράδειγμα 400 επί 400 για LinkedIn, χρησιμοποίησε πρώτα το εργαλείο resize και μετά κάνε το circle crop. Για PNG και WebP η ποιότητα είναι lossless. Για JPEG η συμπίεση είναι lossy από τη φύση του format.

Μπορώ να διατηρήσω διαφανές φόντο στον κύκλο;

Ναι. Τα PNG, WebP και AVIF υποστηρίζουν alpha διαφάνεια, οπότε η περιοχή έξω από τον κύκλο είναι πλήρως διαφανής. Σε design tools και messaging apps το φόντο εμφανίζεται ως checkerboard, που είναι ένδειξη διαφάνειας. Το JPEG δεν υποστηρίζει διαφάνεια. Επιλέγοντας JPEG σου ζητείται να ορίσεις χρώμα γεμίσματος για την εξωτερική περιοχή.

Ποιες μορφές αρχείων δέχεται η είσοδος;

Εισαγωγή: JPG, PNG, WebP, AVIF, GIF (μόνο πρώτο frame, η κινούμενη εικόνα δεν διατηρείται), BMP και SVG. Το HEIC λειτουργεί στο Safari επειδή το Safari το διαχειρίζεται natively μέσω createImageBitmap. Στο Chrome, Firefox και Edge τα HEIC αρχεία απορρίπτονται με φιλικό μήνυμα. Το εργαλείο ελέγχει τα magic bytes, όχι την κατάληξη αρχείου, οπότε ένα μετονομασμένο αρχείο αναγνωρίζεται σωστά.

Γιατί να κάνω περικοπή εικόνας σε κύκλο;

Οι περισσότερες πλατφόρμες κοινωνικής δικτύωσης εμφανίζουν φωτογραφίες προφίλ, avatars και server icons σε κυκλικό πλαίσιο. Ανεβάζοντας τετράγωνη φωτογραφία και αφήνοντας την πλατφόρμα να κόψει αυτόματα, συχνά κόβονται μέρη του προσώπου ή μένει περιττός χώρος στο πλαίσιο. Κόβοντας σε κύκλο εσύ ελέγχεις ακριβώς τι εμφανίζεται. Το ίδιο ισχύει για στρογγυλά λογότυπα, badges ομάδων και branded εικόνες.

Λειτουργεί το εργαλείο σε κινητό;

Το εργαλείο τρέχει σε οποιονδήποτε σύγχρονο browser σε iPhone, iPad και Android. Οι λαβές drag αποκρίνονται σε touch και pinch gestures. Ο κύριος περιορισμός στο κινητό είναι ο χρόνος κωδικοποίησης AVIF. Μια φωτογραφία υψηλής ανάλυσης μπορεί να πάρει 30 δευτερόλεπτα ή περισσότερο, γιατί ο WASM encoder τρέχει στη CPU. Τα PNG και WebP είναι πολύ πιο γρήγορα και λειτουργούν καλά σε mid-range συσκευές.

Οι λεπτομέρειες

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

Πώς το Cropper.js v2 σχεδιάζει την κυκλική μάσκα
Το Cropper.js v2 αποστέλλεται ως Web Component. Τα στοιχεία cropper-canvas, cropper-image και cropper-handle συνθέτουν το στάδιο. Η κυκλική κοπή δεν είναι τέχνασμα CSS border-radius. Είναι πράξη σύνθεσης canvas (destination-in) που εφαρμόζεται κατά την εξαγωγή. Ο χρήστης βλέπει ολόκληρη την εικόνα με σκούρα επικάλυψη και η κυκλική περιοχή επιλογής υπολογίζεται σε πραγματικό χρόνο από τις θέσεις των λαβών στο internal state του component. Όταν γίνει κλικ Αποθήκευση, δημιουργείται προσωρινός canvas στις επιλεγμένες διαστάσεις, η εικόνα σχεδιάζεται πάνω του και η σύνθετη μάσκα αφαιρεί ό,τι είναι έξω από τον κύκλο. Για PNG, WebP και AVIF το αποτέλεσμα περιλαμβάνει alpha channel. Για JPEG τα διαφανή pixels γεμίζουν με συμπαγές χρώμα πριν την κωδικοποίηση, επειδή το JPEG δεν έχει προδιαγραφή alpha channel. Το Cropper.js v2 αποστέλλεται με άδεια MIT στο github.com/fengyuanchen/cropperjs.
PNG vs WebP vs AVIF vs JPEG για κυκλικές κοπές. Πότε να επιλέξεις ποιο
Πρακτικός οδηγός απόφασης format. Το PNG είναι lossless και έχει παγκόσμια υποστήριξη, αλλά παράγει μεγαλύτερα αρχεία. Ένα export 512 επί 512 κύκλου από 8 megapixel φωτογραφία είναι κατά μέσο όρο 180 έως 350 KB, ανάλογα με την πολυπλοκότητα της φωτογραφίας. Το WebP είναι οπτικά lossless σε q85 με q90 και 25 έως 40 τοις εκατό μικρότερο από PNG. Υποστηρίζεται από όλους τους σύγχρονους browsers από το 2023. Το AVIF χρησιμοποιεί AV1 intra-coding και είναι τυπικά 40 έως 50 τοις εκατό μικρότερο από WebP σε ισοδύναμη οπτική ποιότητα, αλλά ο @jsquash/avif WASM encoder παίρνει σημαντικά περισσότερο. Περίπου 3 δευτερόλεπτα σε desktop και έως 30 δευτερόλεπτα σε mid-range κινητό για 8 megapixel input. Το JPEG κάνει πιο γρήγορο encode, γύρω στα 400ms σε desktop, αλλά χωρίς alpha. Χρησιμοποίησε το μόνο όταν ο στόχος απορρίπτει διαφανή αρχεία. Οι περισσότεροι χρήστες πρέπει να επιλέξουν PNG για αξιοπιστία ή WebP για μέγεθος.
Οδηγός μεγεθών πλατφόρμας. Τι σημαίνει κυκλικό avatar σε κάθε site
Μετρημένες απαιτήσεις μεγεθών για τις τέσσερις δημοφιλέστερες πλατφόρμες. Στο LinkedIn, η φωτογραφία προφίλ εμφανίζεται 400 επί 400 px ελάχιστο, σε κύκλο στη σελίδα προφίλ και σε μικρότερα μεγέθη γύρω στα 48 px στο feed. Στο Discord, το guild ή server icon είναι 512 επί 512 max και εμφανίζεται κυκλικά. Το user avatar εμφανίζεται στα 128 επί 128 στις λίστες μελών server και 32 επί 32 στο chat. Στο Instagram, η φωτογραφία προφίλ εμφανίζεται κυκλικά γύρω στα 110 px σε κινητό και 32 px στα feed thumbnails. Στο Slack, το workspace avatar είναι 512 επί 512 max για upload και εμφανίζεται κυκλικά στη λίστα καναλιών γύρω στα 36 px. Το εργαλείο εξάγει στην ανάλυση της αρχικής φωτογραφίας. Αν χρειάζεσαι ακριβές output μέγεθος, κάνε resize πρώτα με το /resize/ πριν το circle crop. Αυτό δίνει pixel-accurate output χωρίς upscaling artifacts.
HEIC και ο περιορισμός μόνο για Safari
Η HEIC επιφύλαξη αξίζει αναλυτική εξήγηση γιατί προκαλεί σύγχυση. Το HEIC είναι το container format της Apple που χρησιμοποιεί HEVC συμπίεση. Το Safari 17+ χειρίζεται HEIC natively μέσω createImageBitmap, γι' αυτό το circle crop ενός iPhone photo δουλεύει στο Safari χωρίς μετατροπή. Το Chrome, Firefox και Edge δεν υλοποιούν createImageBitmap για HEIC το 2026 και επιστρέφουν decode error. Το εργαλείο ελέγχει τα magic bytes κατά το upload. Αν ανιχνευθεί HEIC αρχείο σε non-Safari browser, εμφανίζεται φιλικό μήνυμα που προτείνει μετατροπή σε JPG πρώτα. Λύση για non-Safari χρήστες: άνοιξε τη φωτογραφία στο iPhone Photos και κοινοποίησε ως JPG μέσα από το share sheet, ή χρησιμοποίησε το /png-to-jpg/ αν έχεις HEIC αρχείο σε desktop. Σημείωση: αρχείο .heic μετονομασμένο σε .jpg θα απορριφθεί. Ο έλεγχος magic bytes εντοπίζει τη μετονομασία.
Γιατί ο χώρος έξω από τον κύκλο είναι διαφανής και γιατί έχει σημασία
Σήμα Experience για alpha channels και γιατί καθαρό διαφανές φόντο αλλάζει την εμφάνιση των avatars. Όταν εξάγεις PNG ή WebP κυκλική κοπή, τα pixels έξω από τον κύκλο έχουν τιμή alpha μηδέν, δηλαδή πλήρως διαφανή. Αυτό σημαίνει ότι σε πλατφόρμες που εμφανίζουν avatars σε κυκλικό πλαίσιο, το διαφανές φόντο γίνεται αόρατο και το χρώμα φόντου της πλατφόρμας φαίνεται καθαρά. Σε πλατφόρμες που δείχνουν το αρχείο σε πλήρες μέγεθος, για παράδειγμα preview αρχείου ή photo album, η διαφανής περιοχή εμφανίζεται ως checkerboard. Αν επικολλήσεις τον κύκλο σε design tool όπως Figma ή Canva, μπορείς να τον τοποθετήσεις πάνω σε οποιοδήποτε χρώμα χωρίς λευκό halo. Η επιλογή JPEG υπάρχει για περιπτώσεις όπου η διαφάνεια δημιουργεί πρόβλημα. Ορισμένοι email clients, CMS uploaders και παλαιότερες πλατφόρμες αντικαθιστούν τη διαφάνεια με μαύρο.
Επαλήθευση επεξεργασίας στον browser μέσω της καρτέλας Network στο DevTools
Ο βήμα-προς-βήμα τρόπος επαλήθευσης ότι η εικόνα δεν φεύγει από τη συσκευή. Άνοιξε το DevTools του browser με F12 ή δεξί κλικ και Επιθεώρηση, πήγαινε στην καρτέλα Network και κάνε κλικ Clear για να αφαιρέσεις προηγούμενες καταχωρήσεις. Ανέβασε μια εικόνα στο circle crop tool και σύρε τις λαβές. Παρατήρησε την καρτέλα Network κατά τη διάρκεια. Τα μόνα αιτήματα που εμφανίζονται είναι για assets σελίδας όπως JS, CSS και fonts, που φορτώθηκαν πριν το upload. Κανένα νέο POST ή PUT αίτημα που να μεταφέρει δεδομένα εικόνας δεν εμφανίζεται. Μετά το κλικ Αποθήκευση, ένα μόνο αίτημα σε blob: URL εμφανίζεται για κλάσμα δευτερολέπτου. Αυτό είναι ο browser να επιλύει το local blob για τη λήψη, όχι αποστολή δεδομένων σε server. Η επαλήθευση μπορεί να γίνει σε Chrome, Firefox, Safari και Edge.