Przytnij

Kadrowanie obrazu Przycinanie do koła

Optymalizuj

Kompresja obrazu Powiększanie zdjęć AI Usuwanie tła

Edytuj

Zmiana rozmiaru obrazu

Konwertuj

Inne

Obraz do PDF

Przycinanie zdjęcia w kółko online

Wgraj JPG, PNG, WebP lub AVIF i pobierz okrągły wycinek jako przezroczyste PNG lub WebP.

lub upuść zdjęcie tutaj

O tym narzędziu

Przytnij dowolne zdjęcie do idealnego koła bezpośrednio w przeglądarce. Wgraj JPG, PNG, WebP lub AVIF na stronę, a Cropper.js otworzy je w okrągłej ramce kadrowania. Przeciągnij uchwyty, żeby wyśrodkować twarz lub logo i precyzyjnie dobrać rozmiar koła, potem kliknij Zapisz. Przeglądarka zakoduje wynik jako przezroczyste PNG, WebP lub AVIF, albo jako JPEG z wybranym kolorem tła, i pobierze plik bezpośrednio na twój dysk. W zakładce Sieć w DevTools nie pojawia się żadne żądanie POST podczas kadrowania, ponieważ całe przetwarzanie biegnie lokalnie na twoim urządzeniu. Narzędzie obsługuje pliki do 25 MB i 16 megapikseli, więc spokojnie wczytasz zdjęcie 4000 na 4000 pikseli prosto z aparatu telefonu. Działa tak samo płynnie na komputerze, tablecie i telefonie, bez instalowania żadnej aplikacji ani wtyczki. Najczęściej używają go osoby, które chcą wykadrować portret lub logo do okrągłego awatara w serwisach LinkedIn, Discord, Slack i Instagram, a także twórcy podcastów przygotowujący okrągłą okładkę kanału.

Open the circle crop tool
Jak przyciąć zdjęcie w kształt koła

Jak przyciąć zdjęcie w kształt koła

Wgraj plik JPG, PNG, WebP lub AVIF na stronę, a Cropper.js v2 otworzy go w okrągłej ramce kadrowania. Pełny obraz zostaje widoczny pod ciemną nakładką, a jasne koło w środku pokazuje obszar, który zostanie zachowany. Przeciągnij koło, żeby wyśrodkować twarz lub logo, dostosuj rozmiar uchwytami narożnymi albo gestem szczypania na ekranie dotykowym. Kiedy kadr wygląda dobrze, wybierz format i kliknij Zapisz. Przeglądarka zakoduje plik lokalnie i uruchomi pobieranie w oryginalnej rozdzielczości. Otwórz zakładkę Sieć w DevTools podczas kadrowania i zobacz, że pozostaje pusta. Żadne żądanie POST nie pojawia się podczas wgrywania, przeciągania ani zapisu.

Pick a format and crop
Wybierz format wyjściowy

Wybierz format wyjściowy

Narzędzie eksportuje wynik w czterech formatach i każdy ma inne zastosowanie. PNG zostaje wybrany domyślnie, daje przezroczyste koło i najszerszą kompatybilność z platformami i edytorami. WebP produkuje znacznie mniejszy plik, też z przezroczystością, idealny do publikacji w internecie. AVIF schodzi jeszcze niżej pod względem rozmiaru, zachowuje kanał alfa, ale koduje wolno na telefonie. Dla zdjęcia 8 MP kodowanie AVIF zajmuje około 30 sekund na średnim Androidzie, bo enkoder WASM @jsquash/avif działa na jednym wątku. JPEG to płaskie koło bez przezroczystości, sam wybierasz kolor wypełnienia obszaru poza kołem. Wybierz go tylko, gdy platforma docelowa odrzuca pliki z alfą.

Crop for any social platform
Okrągłe zdjęcia na każdą platformę

Okrągłe zdjęcia na każdą platformę

LinkedIn renderuje zdjęcie profilowe w okrągłej masce na stronie profilu i wymaga co najmniej 400×400 pikseli, żeby wynik wyglądał ostro w siatkach członków. Discord wyświetla ikonę serwera na liście serwerów w rozmiarze 128×128, a avatar użytkownika w czatach jeszcze mniejszy. Instagram pokazuje zdjęcie profilowe w kółku około 110 pikseli na profilu mobilnym i 32 piksele w miniaturach strumienia. Slack pokazuje avatar przestrzeni roboczej około 36 pikseli na liście kanałów. Narzędzie eksportuje w oryginalnej rozdzielczości twojego zdjęcia. Jeśli potrzebujesz dokładnych wymiarów wyjściowych, najpierw zmień rozmiar przez /resize/, potem wykadruj w koło. Dostajesz wynik co do piksela, bez artefaktów przeskalowania.

Try it inside the limits
Czego to narzędzie nie zrobi

Czego to narzędzie nie zrobi

Limit wgrywania wynosi 25 MB i 16 megapikseli. Pliki większe są odrzucane z czytelnym komunikatem, więc 50-megapikselowy RAW z lustrzanki nie wieszają mobilnej przeglądarki w połowie dekodowania. HEIC działa tylko w Safari, bo to jedyna przeglądarka, która obsługuje go natywnie przez createImageBitmap. Chrome, Firefox i Edge odrzucają HEIC z sugestią konwersji do JPG. Animowane GIF-y eksportują tylko pierwszą klatkę, animacja nie zostaje zachowana. AVIF koduje wolno na telefonie, według biblioteki @jsquash/avif około 30 sekund dla wejścia 8 MP. Narzędzie nie wykrywa twarzy automatycznie, kółko zawsze pozycjonujesz ręcznie.

Crop in your browser now
Jak twoje zdjęcie pozostaje na twoim urządzeniu

Jak twoje zdjęcie pozostaje na twoim urządzeniu

Cropper.js obsługuje kadrowanie w przeglądarce za pomocą Canvas API, a kodowanie wyjścia (canvas.toBlob albo @jsquash/avif dla AVIF) też działa lokalnie. Możesz to zweryfikować samodzielnie. Otwórz DevTools, przejdź do zakładki Sieć, wyczyść wpisy, potem wgraj zdjęcie i przeciągaj uchwyty. Żadne żądanie POST ani PUT z danymi obrazu nie pojawia się na liście. Pobrany plik pochodzi z lokalnego adresu blob utworzonego przez URL.createObjectURL, nie z żadnego serwera. Podczas kliknięcia Zapisz przez ułamek sekundy widać żądanie do blob:, to przeglądarka rozwiązuje lokalny adres, nie wysyła bajtów na zewnątrz. Weryfikacja działa w Chrome, Firefoksie, Safari i Edge.

Make your round profile picture
Okrągłe zdjęcia profilowe na każdą platformę

Okrągłe zdjęcia profilowe na każdą platformę

Większość serwisów społecznościowych wyświetla avatary w okrągłej masce, więc przycięcie zdjęcia do koła przed wgraniem oszczędza ci losowego maskowania po stronie platformy. To samo dotyczy okrągłych logo i odznak brandingowych, siatek zdjęć zespołu na stronach firm i ikon serwerów Discord, które technicznie są kwadratowe, ale wiele grup używa okrągłej grafiki. Sekcja powinna brzmieć jak rada kogoś, kto naprawdę zrobił kilkanaście zdjęć profilowych. Jeden konkretny detal z doświadczenia. Portret z twarzą wyśrodkowaną w kółku, z niewielką ilością przestrzeni nad głową i wokół ramion, wygląda dużo lepiej niż ciasne kadrowanie wypełniające koło do krawędzi. Daj sobie margines.

Jak przyciąć zdjęcie do koła

  1. Wgraj zdjęcie na stronę

    Kliknij obszar wgrywania lub przeciągnij plik JPG, PNG, WebP, AVIF lub GIF bezpośrednio na stronę. Okrągła ramka kadrowania otworzy się automatycznie.

  2. Ustaw koło nad obiektem

    Przeciągnij koło, żeby wyśrodkować twarz lub logo. Powiększ lub pomniejsz je palcami lub kółkiem myszy, aż kadrowanie będzie właściwe.

  3. Wybierz format wyjściowy

    Wybierz PNG lub WebP dla przezroczystego koła, AVIF dla najmniejszego pliku, albo JPEG jeśli potrzebujesz jednolitego koloru tła.

  4. Kliknij Zapisz i pobierz plik

    Przeglądarka zakoduje wynik lokalnie i pobierze go na twoje urządzenie. Nazwa pliku zachowuje oryginalną nazwę z dopisanym "-circle".

Potrzebujesz prostokąta, nie koła?

To narzędzie oferuje jeden kształt, koło. Dla prostokątów ze swobodnym stosunkiem użyj crop image. Dla feedu Instagrama (1080×1080) wybierz kadr kwadratowy albo jedno z narzędzi przycinania per platforma.

Przytnij prostokątnie Hub przycinania

Najczęściej zadawane pytania

Jak przyciąć obraz w kształt koła?

Wgraj zdjęcie na stronę (JPG, PNG, WebP, AVIF, GIF lub BMP). Cropper.js otworzy je z okrągłą ramką wyśrodkowaną na obrazie. Przeciągnij koło, żeby wykadrować obiekt, dostosuj rozmiar uchwytami narożnymi lub gestem szczypania, potem kliknij Zapisz. Przeglądarka zakoduje i pobierze przezroczyste PNG domyślnie. Cały proces trwa poniżej 30 sekund dla typowego zdjęcia.

Jak stworzyć okrągłe zdjęcie profilowe?

Wgraj swoje zdjęcie, przeciągnij okrągłą ramkę tak, żeby twarz była wyśrodkowana z odrobiną przestrzeni wokół głowy. Wybierz PNG lub WebP jako format wyjściowy, żeby zachować przezroczystość poza kółkiem. Po pobraniu plik będzie gotowy do wgrania bezpośrednio do sekcji zdjęcia profilowego na LinkedIn, Discordzie, Slacku lub Instagramie. Jeśli platforma wymaga konkretnych wymiarów pikselowych, najpierw zmień rozmiar zdjęcia za pomocą /resize/, a potem przytnij.

Czy mogę przycinać zdjęcia w okrągłe kształty na telefonie?

Tak. Narzędzie działa w każdej nowoczesnej przeglądarce na iPhone, iPadzie i telefonach z Androidem. Uchwyty kadrowania reagują na dotyk i gesty szczypania. Głównym ograniczeniem na telefonie jest czas kodowania AVIF. Zdjęcie w wysokiej rozdzielczości może zajmować 30 sekund lub więcej, bo koder WASM działa na procesorze. PNG i WebP są znacznie szybsze i sprawdzają się dobrze na średnich urządzeniach.

Czy przechowujecie obrazy, które przesyłam?

Nie. Narzędzie przetwarza obraz w całości w przeglądarce za pomocą Canvas API. Możesz to sprawdzić samodzielnie. Otwórz DevTools (F12), przejdź do zakładki Sieć, wyczyść wpisy, a następnie wgraj zdjęcie i przeciągaj uchwyty. W zakładce Sieć nie pojawi się żadne żądanie POST ani PUT z danymi obrazu. Pobrany plik pochodzi z lokalnego adresu blob, nie z żadnego serwera.

Jakie formaty obrazów mogę użyć z narzędziem do przycinania w koło?

Na wejściu obsługiwane są JPG, PNG, WebP, AVIF, GIF (tylko pierwsza klatka, animacja nie jest zachowywana), BMP i SVG. HEIC działa w Safari, bo Safari obsługuje go natywnie przez createImageBitmap. W Chrome, Firefoksie i Edge pliki HEIC są odrzucane z komunikatem błędu. Narzędzie sprawdza format na podstawie magicznych bajtów, a nie rozszerzenia pliku, więc zmiana nazwy rozszerzenia nic nie zmieni.

Czy mój okrągły przycięty obraz będzie miał przezroczyste tło?

Tak, dla formatów PNG, WebP i AVIF. Obszar poza kółkiem ma wartość alfa 0 (pełna przezroczystość). Po otwarciu pliku w większości aplikacji do projektowania lub komunikatorach tło będzie wyglądało jak szachownica, co sygnalizuje przezroczystość. JPEG nie obsługuje przezroczystości. Wybierając JPEG, wybierasz kolor wypełnienia obszaru poza kółkiem.

Szczegóły

Notatki zespołu o rzemiośle, formatach i drobnych decyzjach stojących za dobrym okrągłym przycięciem.

Jak Cropper.js v2 rysuje okrągłą maskę
Cropper.js v2 to Web Component zbudowany z elementów cropper-canvas, cropper-image i cropper-handle. Okrągłe kadrowanie nie jest sztuczką CSS border-radius. To operacja kompozycji na płótnie (destination-in) wykonywana w chwili eksportu. Użytkownik widzi pełny obraz z ciemną nakładką, a okrągły obszar zaznaczenia jest obliczany na żywo na podstawie pozycji uchwytów przechowywanych w wewnętrznym stanie komponentu. Po kliknięciu Zapisz tworzone jest tymczasowe płótno o wybranych wymiarach, obraz jest na nie rysowany, a maska kompozytowa usuwa wszystko poza kołem. Dla PNG, WebP i AVIF wynik zawiera kanał alfa, więc tło jest naprawdę przezroczyste. Dla JPEG przezroczyste piksele są wypełniane jednolitym kolorem przed kodowaniem, bo JPEG nie ma specyfikacji kanału alfa. Cropper.js v2 jest publikowany na licencji MIT, repozytorium GitHub: fengyuanchen/cropperjs.
PNG vs WebP vs AVIF vs JPEG dla okrągłych kadrów, kiedy wybrać który
PNG jest bezstratny i powszechnie obsługiwany, ale daje większe pliki. Eksport kółka 512×512 ze zdjęcia 8 MP to średnio 180-350 KB w zależności od złożoności obrazu. WebP jest wizualnie bezstratny przy jakości 85-90, około 25-40 procent mniejszy niż PNG, obsługiwany przez wszystkie nowoczesne przeglądarki od 2023 roku. AVIF używa intra-kodowania z AV1 i zazwyczaj jest 40-50 procent mniejszy niż WebP przy równoważnej jakości wizualnej. Koder WASM @jsquash/avif potrzebuje znacznie więcej czasu, około 3 sekund na komputerze i do 30 sekund na średnim telefonie dla wejścia 8 MP. JPEG koduje najszybciej, około 400 ms na komputerze, ale nie ma kanału alfa. Większość użytkowników powinna wybrać PNG dla niezawodności albo WebP dla mniejszego rozmiaru.
Przewodnik po rozmiarach platform, co "okrągły avatar" naprawdę oznacza w każdym serwisie
LinkedIn wyświetla zdjęcie profilowe w kółku na stronie profilu od około 400×400 pikseli i w mniejszym rozmiarze, około 48 pikseli, w strumieniu. Discord renderuje ikonę serwera (gildii) maksymalnie 512×512 jako kółko, avatar użytkownika 128×128 na liście członków serwera i 32×32 w czacie. Instagram pokazuje zdjęcie profilowe w kółku około 110 pikseli na profilu mobilnym i 32 piksele w miniaturach strumienia. Slack pozwala wgrać avatar przestrzeni roboczej do 512×512, renderowany jako kółko, około 36 pikseli na liście kanałów. Narzędzie eksportuje w oryginalnej rozdzielczości twojego zdjęcia. Jeśli potrzebujesz dokładnego rozmiaru wyjściowego, najpierw zmień rozmiar przez /resize/, a potem przytnij w koło. Dostajesz wynik co do piksela, bez artefaktów przeskalowania.
HEIC i ograniczenie tylko do Safari, wyjaśnienie
HEIC to kontener Apple z kompresją HEVC. Safari 17+ obsługuje HEIC natywnie przez createImageBitmap, dlatego okrągłe kadrowanie zdjęcia z iPhone'a działa w Safari bez konwersji. Chrome, Firefox i Edge nie implementują createImageBitmap dla HEIC według stanu na 2026, zwracają błąd dekodowania. Narzędzie sprawdza magiczne bajty przy wgrywaniu i jeśli wykryje plik HEIC w przeglądarce innej niż Safari, wyświetla przyjazny komunikat sugerujący najpierw konwersję na JPG. Obejście dla użytkowników innych przeglądarek. Otwórz zdjęcie na iPhonie w aplikacji Zdjęcia i udostępnij jako JPG (opcja w arkuszu udostępniania), albo użyj /png-to-jpg/, jeśli masz plik HEIC na komputerze. Uwaga, plik .heic przemianowany na .jpg nadal zostanie odrzucony. Kontrola magicznych bajtów wykryje zmianę nazwy.
Dlaczego obszar poza kołem jest przezroczysty i dlaczego to ma znaczenie
Po eksporcie koła jako PNG lub WebP piksele poza granicą koła mają wartość alfa 0, czyli pełną przezroczystość. Oznacza to, że na platformach renderujących avatary w okrągłej ramce przezroczyste tło staje się niewidoczne, widać własny kolor tła platformy. Na platformach pokazujących plik w pełnym rozmiarze (jak podgląd załącznika lub album ze zdjęciami) przezroczysty obszar wygląda jak szachownica. Jeśli wkleisz koło do narzędzia do projektowania, jak Figma czy Canva, możesz je nałożyć na dowolny kolor bez białej obwódki. Opcja JPEG istnieje dla przypadków, gdy przezroczystość powoduje problemy. Niektóre klienty poczty, niektóre programy do przesyłania obrazów w CMS i starsze platformy usuwają przezroczystość i zastępują ją czarnym tłem. Użycie JPEG z wybranym kolorem wypełnienia tego unika.
Użycie zakładki Sieć w DevTools do weryfikacji przetwarzania w przeglądarce
Otwórz DevTools przeglądarki (F12 lub prawy klik > Zbadaj), przejdź do zakładki Sieć, kliknij Wyczyść, żeby usunąć poprzednie wpisy, a następnie wgraj zdjęcie do narzędzia do okrągłego kadrowania i przeciągaj uchwyty. Obserwuj zakładkę Sieć podczas wgrywania i przeciągania kadrowania. Jedyne żądania, które się pojawiają, to zasoby strony (JS, CSS, czcionki) załadowane przed wgraniem. Żadne nowe żądanie POST ani PUT z danymi obrazu nie zostanie zarejestrowane. Po kliknięciu Zapisz przez ułamek sekundy pojawia się w zakładce żądanie do adresu blob:, to przeglądarka rozwiązuje lokalny blob, nie wysyła danych na serwer. Weryfikację można wykonać w Chrome, Firefoksie, Safari i Edge.