Zaokrąglij rogi obrazu

Kliknij, aby przesłać obraz

JPG / PNG / WEBP

Domyślne Zaokrąglenie

Rozmiar Zaokrąglenia

20%
050%

Format Wyjściowy

Prześlij obraz, aby wyświetlić podgląd

Dodawaj zaokrąglone narożniki do dowolnego obrazu online. Wybierz ustawienie lub przesuń suwak, podglądaj w czasie rzeczywistym i eksportuj przezroczysty PNG pasujący do każdego tła — wszystko lokalnie.

Powiązane Rekomendacje

Generator ICO

Przycinanie obrazów

Zmiana rozmiaru obrazu

Kompresja obrazów

Konwersja obrazów

Czym jest zaokrąglanie rogów obrazu?

Zaokrąglanie rogów obrazu to technika, w której cztery ostre narożniki obrazu zastępuje się gładkimi łukami. Narzędzie rysuje ścieżkę zaokrąglonego prostokąta za pomocą Canvas arcTo(), a następnie wywołuje clip(), by wyciąć obraz w tym obszarze. Obszar poza wycinkiem staje się przezroczystymi pikselami (Alpha=0) przy eksporcie do PNG.

**Jaki efekt wizualny dają zaokrąglone narożniki?** Zaokrąglone narożniki wyglądają miękko i przyjaźnie w porównaniu z ostrymi, ograniczając wizualną surowość. Są powszechnie stosowane w ikonach aplikacji, przyciskach, kartach i awatarach. Superelipsa iOS (squircle) idzie jeszcze dalej, oferując bardziej płynne krzywe.

**Dlaczego wiele ikon aplikacji wymaga zaokrąglonych narożników?** Od iOS, iPadOS i macOS Big Sur system automatycznie nakłada na ikony aplikacji maskę zaokrąglenia, a białe tło źródłowego obrazu powoduje widoczny biały kant. Rozwiązanie: wstępnie wyeksportować zaokrąglony PNG ze źródła, by system nie maskował go ponownie. Dokładnie do tego służy to narzędzie.

**Piksele a procenty:** Piksele są precyzyjne, ale trudne do wyrównania między obrazami; procenty dopasowują się do różnych rozmiarów. W design systemach zwykle stosuje się procenty, np. 22,37 % dla ikon iOS i 25 % dla Android Adaptive Icon.

**Różnica wobec CSS border-radius:** CSS border-radius działa w warstwie wyświetlania, więc wyeksportowany obraz nadal ma ostre narożniki. To narzędzie tworzy prawdziwy PNG z kanałem alfa, który można używać w każdym środowisku bez wsparcia CSS (PowerPoint, wideo, druk).

Przypadki użycia

  • Twórz avatary do komunikatorów i serwisów społecznościowych (Messenger, WhatsApp, Telegram, X, Instagram, Facebook) — generuj idealne koła jednym kliknięciem
  • Szybko dodawaj zaokrąglone narożniki do ikon aplikacji (iOS 22–25 %, Android Adaptive Icon 25 %)
  • Łagodź narożniki głównych zdjęć produktów w e-commerce, zwiększając klikalność i konwersję
  • Przetwarzaj lokalnie materiały z zaokrąglonymi rogami do slajdów PowerPoint, montażu wideo i druku
  • Standaryzuj ikony i elementy projektu do jednego rozmiaru narożników w design systemie (po jednym na raz)

Jak Używać

  1. Kliknij pole uploadu, by wybrać obraz, lub przeciągnij plik JPG, PNG albo WEBP bezpośrednio w to pole
  2. Wybierz ustawienie Mały (10 %), Średni (25 %) lub Duży (50 %) dla natychmiastowych narożników, albo przesuń suwak do wybranej wartości (kliknij, by przełączyć między procentami a pikselami)
  3. Wybierz format wyjściowy: PNG (przezroczyste tło), WEBP (mniejszy rozmiar) lub JPG (białe tło, bez przezroczystości)
  4. Podejrzyj efekt po prawej i kliknij Pobierz — plik zostanie zapisany z automatycznym przyrostkiem -rounded

Funkcje

  • Dwie jednostki: swobodne przełączanie między pikselami (0–500 px) a procentami (0–50 %) dla promienia narożnika
  • 3 ustawienia: Mały (10 %), Średni (25 %), Duży (50 %) jednym kliknięciem oraz suwak niestandardowy
  • 3 formaty wyjściowe: eksport jako PNG (z przezroczystością), WEBP (mniejszy rozmiar) lub JPG (białe tło)
  • Podgląd na żywo: reguluj suwak i natychmiast widz efekt, szachownicowe tło wyraźnie pokazuje przezroczystość
  • Przeciągnij i upuść: kliknij lub przeciągnij JPG, PNG albo WEBP bezpośrednio w pole uploadu
  • Przetwarzanie lokalne: wszystko działa w Canvas przeglądarki, obraz nie opuszcza urządzenia

Best Practices

Wybieraj PNG zamiast JPG, gdy potrzebujesz przezroczystości

JPG nie obsługuje kanału alfa. Po wybraniu JPG narożniki zostaną wypełnione białym i pojawią się nieestetyczne białe bloki. JPG wybieraj tylko wtedy, gdy na pewno nie potrzebujesz przezroczystości, w pozostałych przypadkach domyślnie sięgaj po PNG.

Wybieraj WEBP dla przezroczystych zasobów, które mają być małe

WEBP obsługuje przezroczystość i jest o 25–35 % mniejszy od PNG — świetnie sprawdza się w webowych zasobach. Pamiętaj, że część starszych programów graficznych nie rozpoznaje WEBP, więc przy współpracy między narzędziami preferuj PNG.

Dobór promienia narożnika ikony aplikacji

iOS automatycznie dodaje do ikon aplikacji narożniki o promieniu ok. 22,37 %, ale białe tło na źródłowej grafice daje widoczną białą obwódkę. Rozwiązanie: najpierw wygeneruj zaokrąglony PNG tym narzędziem (zalecane 22–25 %). Dla Android Adaptive Icon bezpieczny promień to 25 %.

Do awatarów używaj promienia 50 % dla idealnego koła

Większość platform społecznościowych (Messenger, WhatsApp, X, Instagram itp.) wyświetla awatary jako idealne koło. Ustawienie 50 % generuje przezroczysty okrągły PNG jednym kliknięciem, dopasowany do jasnych i ciemnych motywów.

Wytyczne ikon aplikacji iOS

Nie nakładaj CSS border-radius na wyeksportowany zaokrąglony obraz

Gdy wyeksportujesz zaokrąglony PNG z tego narzędzia, nie umieszczaj go w kontenerze z CSS border-radius + overflow:hidden — krawędzie zostaną poddane podwójnej obróbce i staną się rozmyte. Zaokrąglony obraz wyświetlaj zwykłym tagiem img.

Potrzebujesz bardziej złożonego kształtu (różny promień narożników, tylko górne)?

Narzędzie obsługuje wyłącznie równe narożniki po wszystkich czterech stronach. Aby zaokrąglić tylko górę, tylko dół lub każdy narożnik inaczej (np. TabBar, ekrany powitalne), skorzystaj z edytora obrazów lub narzędzia projektowego jak Figma.

Często Zadawane Pytania

Jak zaokrąglić rogi obrazu?

Po wgraniu kliknij ustawienie Mały, Średni lub Duży, by szybko zaokrąglić narożniki, albo przesuń suwak, by ustawić własną wartość w pikselach (0–500 px) lub procentach (0–50 %). Po prawej stronie zobaczysz podgląd w czasie rzeczywistym. Gdy efekt spełnia oczekiwania, kliknij Pobierz — plik zostanie zapisany z automatycznym przyrostkiem -rounded.

Lepiej używać pikseli czy procentów?

Piksele dają precyzyjną kontrolę i sprawdzają się przy elementach o stałym rozmiarze. Procenty skalują się po krótszym boku obrazu i lepiej dopasowują do różnych rozmiarów. Narzędzie pozwala przełączyć jednostki jednym kliknięciem, a 50 % zawsze daje idealne koło — idealne na avatar.

Co dzieje się z zaokrąglonym obszarem?

Przy PNG lub WEBP zaokrąglony obszar jest w pełni przezroczysty (Alpha=0) i naturalnie łączy się z każdym tłem. Przy JPG zostaje wypełniony białym (w interfejsie pojawia się żółte ostrzeżenie); JPG wybieraj tylko wtedy, gdy przezroczystość nie jest potrzebna.

Jakie formaty obrazów są obsługiwane?

Wejście obsługuje JPG, PNG i WEBP. Wyjście może mieć format PNG (przezroczysty), WEBP (mniejszy) lub JPG (białe tło). Pobierany plik otrzymuje automatycznie przyrostek -rounded, by nie pomylić go z oryginałem.

Jakie są limity promienia narożnika?

Tryb procentowy: 0–50 % (50 % daje idealne koło), tryb pikselowy: 0–500 px. Im większa wartość, tym bardziej zaokrąglony narożnik. Narzędzie korzysta z Canvas arcTo + clip do rysowania standardowych łuków — nie obsługuje superelips Squircle.

Czy mogę zrobić awatar albo ikonę aplikacji?

Tak. Aby uzyskać idealnie okrągły awatar, użyj ustawienia 50 %. Dla ikon iOS zalecane jest 22–25 % (ustawienie 25 % zrobi to jednym kliknięciem). Dla Android Adaptive Icon bezpieczny promień to 25 %. Przezroczysty PNG pasuje do każdego motywu.

Czy zaokrąglenie rozmywa obraz?

Nie. Narzędzie pracuje w oryginalnej rozdzielczości przez wycinanie po ścieżce w Canvas, bez ponownego próbkowania i kompresji. Jakość wyjścia jest identyczna z oryginałem — wycinane są jedynie narożniki, a krawędzie pozostają ostre.

Czy mój obraz jest wysyłany na serwer?

Nie. Wszystko odbywa się lokalnie w przeglądarce przez Canvas API. Obraz nie jest przesyłany na żaden serwer i jest usuwany po opuszczeniu strony. Zdjęcia osobiste, skany dokumentów i poufne materiały można przetwarzać bez obaw.

Dlaczego efekt zaokrąglenia nie jest widoczny?

Sprawdź: ① wartość promienia jest większa niż 0 (suwak nie jest w skrajnym lewym położeniu); ② obraz wczytał się poprawnie (musi być JPG, PNG lub WEBP); ③ przeglądarka obsługuje HTML5 Canvas (wszystkie nowoczesne tak). Jeśli problem nie ustępuje, odśwież stronę i wgraj obraz ponownie.

Czym to się różni od CSS border-radius?

CSS border-radius działa tylko w warstwie wyświetlania przeglądarki i nie zapisuje zaokrąglenia w pliku graficznym. To narzędzie eksportuje prawdziwy plik PNG z kanałem alfa, dzięki czemu zaokrąglony obraz działa w PowerPoint, edycji wideo, druku i wszelkich środowiskach bez wsparcia CSS.

Słownik

Promień narożnika (Border Radius)
Promień łuku zaokrąglonego narożnika. Większa wartość oznacza bardziej zaokrąglony narożnik; maksimum to połowa krótszego boku obrazu, co daje idealne koło. Narzędzie obsługuje piksele (0–500 px) i procenty (0–50 %).
Kanał alfa
Kanał przezroczystości wbudowany w PNG i WEBP, 0–255 na piksel. Narzędzie ustawia piksele zaokrąglonych narożników na Alpha=0, dzięki czemu wyjście jest w pełni przezroczyste i naturalnie komponuje się z każdym tłem.
Squircle (superelipsa)
Kształt zaokrąglenia wprowadzony w iOS 7+, bardziej gładki niż standardowy narożnik, opisany równaniem x⁴+y⁴=r⁴. Narzędzie generuje standardowe łuki; jeśli potrzebujesz Squircle, użyj Figma lub Sketch.
Adaptive Icon
Format ikony Androida 8.0+ z rozdzielonymi warstwami pierwszego planu i tła. Bezpieczny promień to 25 %, launcher OEM nakłada własną maskę (koło, squircle itp.).
Canvas arcTo
Metoda Canvas 2D API do rysowania łuku. Narzędzie łączy arcTo + clip, by zbudować ścieżkę zaokrąglonego prostokąta, wyciąć w nim obraz i przy eksporcie uczynić zewnętrzny obszar przezroczystym.

Szybki przegląd promieni narożników na platformach

Platforma / elementRozmiar bazowyZalecany promieńOk. (px)
Ikona aplikacji iOS / iPadOS1024 × 1024Ok. 22,37 %≈ 229 px
Android Adaptive Icon108 × 108Ok. 25 %≈ 27 px
Ikona aplikacji macOS Sonoma1024 × 1024Superelipsa SquircleBrak stałego px
Karta Windows 11—Ok. 8 px8 px
Material Design 3 Large—Ok. 28 px28 px
Awatar Messenger / WhatsApp640 × 64050 % (idealne koło)320 px
Awatar Twitter / Instagram400 × 40050 % (idealne koło)200 px
Główne zdjęcie e-commerce800 × 80016–24 px zalecane16-24 px

Authoritative References