Zaokrąglone narożniki i okrągłe zdjęcia na stronach internetowych

Zaokrąglone narożniki pomagają dopasować zdjęcia do kart na stronie, a okrągłe portrety nadają zdjęciom zespołu spójną formę. Kształt powinien jednak służyć treści. Koło, które ucina twarz, lub zaokrąglenie zasłaniające ważny szczegół produktu nie poprawia obrazu.

Efekt można uzyskać na dwa sposoby: zmieniając plik obrazu albo pozwalając przeglądarce zaokrąglić jego wygląd na stronie. Wybór zależy od miejsca użycia oraz od tego, czy później chcesz móc zmienić kształt.

CSS czy zmiana pliku obrazu?

CSS zwykle daje większą swobodę na stronie, nad którą masz kontrolę. Ten sam oryginał można wykorzystać w różnych układach, zmieniać zaokrąglenia w całym serwisie i dopasowywać kadr bez eksportowania kolejnego pliku. Wiele edytorów stron ma ustawienie promienia narożników, które stosuje taki styl automatycznie.

Zmień plik, jeśli strona lub aplikacja pozwala wstawić obraz, ale nie udostępnia ustawień narożników, albo gdy zaokrąglony obraz ma trafić do innego projektu. Przezroczyste narożniki zostaną zapisane w pliku, więc kształt nie będzie zależeć od CSS strony.

Dobierz kształt i promień do treści

Zacznij od zadania obrazu. Koło dobrze sprawdza się przy małym portrecie, bo skupia uwagę na twarzy. Zdjęcie krajobrazu, zrzut ekranu czy szczegół produktu zwykle potrzebuje prostokątnej ramki, która zachowa więcej informacji.

W kartach na stronie wypróbuj niewielki promień, na przykład 12 lub 16 pikseli CSS, i oceń go obok karty, przycisków oraz innych zdjęć. To przykłady, a nie obowiązkowe wartości. Łatwiej utrzymać spójność strony, korzystając z kilku ustalonych promieni, niż dobierając inne zaokrąglenie do każdego zdjęcia.

Oceniaj efekt w rzeczywistym rozmiarze wyświetlania. Delikatne zaokrąglenie dużego obrazu może niemal zniknąć w miniaturze. Narożniki zapisane w pliku skalują się wraz z całym obrazem. Stały promień CSS, na przykład 16 pikseli, zachowuje tę wartość w pikselach CSS, nawet gdy zmienia się szerokość wyświetlanego obrazu.

Przykładowo: obraz 800 × 400 z zaokrągleniem Pixilo ustawionym na 25% ma zapisany promień 50 pikseli. Przy wyświetlaniu w rozmiarze 400 × 200 widoczny promień zmniejszy się do około 25 pikseli CSS. Przy 200 × 100 wyniesie około 12,5 piksela CSS. Dobieraj wartość, sprawdzając rozmiar, który zobaczy odbiorca, a nie tylko podgląd w pełnej wielkości.

Zostaw ważne elementy z dala od narożników. Na zdjęciu grupowym sprawdź osoby przy krawędziach, a na zrzucie ekranu — etykiety i przyciski. Jeśli znika istotny szczegół, zmniejsz zaokrąglenie lub zmień kadr.

Zaokrąglanie narożników w Pixilo

1. Przygotuj kopię do edycji. Zachowaj oryginał osobno. Jeśli obraz wymaga innego kształtu, najpierw użyj narzędzia do kadrowania. Jeśli ma zbyt duże wymiary, zmniejsz kopię przed zaokrągleniem.
2. Wybierz obraz. Otwórz Zaokrąglone narożniki i wybierz jeden plik JPG, PNG lub WebP.
3. Ustaw Zaokrąglenie narożników. Zacznij od niewielkiej wartości i zwiększaj ją, obserwując podgląd. Wszystkie cztery narożniki mają ten sam promień.
4. Wybierz wypełnienie usuniętych narożników. Pozostaw zaznaczoną opcję Przezroczyste tło, jeśli obraz ma pasować do różnych kolorów strony. Wyłącz ją, aby wybrać kolor tła.
5. Pobierz i sprawdź. Kliknij Pobierz PNG, otwórz zapisany plik i sprawdź krawędzie na tle, na którym będzie używany.

Narzędzie zachowuje szerokość i wysokość obrazu w pikselach. Usuwa lub wypełnia narożniki w obrębie tych wymiarów. Nie zmienia rozmiaru zdjęcia ani nie usuwa tła za przedstawionym obiektem.

Co oznacza procent zaokrąglenia?

Pixilo oblicza promień jako procent połowy krótszego boku obrazu. Przy 0% narożniki pozostają proste. Przy 100% każdy narożnik ma największy promień kołowy, który mieści się w obrazie. W przykładzie 800 × 400 połowa krótszego boku to 200 pikseli, a 25% tej wartości wynosi 50 pikseli.

Ten suwak działa inaczej niż procenty w CSS. CSS oblicza poziomy promień procentowy na podstawie szerokości elementu, a pionowy — na podstawie jego wysokości. Dla prostokąta, który nie jest kwadratem, border-radius: 50% tworzy elipsę. Ustawienie 100% w Pixilo tworzy z takiego obrazu kapsułę, a z kwadratu — koło.

Jak zrobić okrągły obraz w Pixilo

Zacznij od kwadratowego obrazu. Szerokie zdjęcie pozostanie szerokie nawet przy maksymalnym zaokrągleniu, dlatego najpierw wybierz kadr.

1. Przytnij do proporcji 1:1. Otwórz oryginał w narzędziu do kadrowania i wybierz kwadrat. Zostaw miejsce wokół głowy lub obiektu, pamiętając, że koło zasłoni narożniki kwadratu.
2. Dobierz wymiary. Kopia 320 × 320 to jedna z możliwości dla portretu wyświetlanego w rozmiarze 160 × 160 pikseli CSS na ekranie 2×. W razie potrzeby użyj narzędzia do zmiany rozmiaru. Oceń szczegóły w docelowej wielkości i nie powiększaj małego oryginału tylko po to, by osiągnąć te wymiary.
3. Zaokrąglij kwadrat. Wybierz przygotowany kwadrat w narzędziu Zaokrąglone narożniki, ustaw Zaokrąglenie narożników na 100% i pozostaw zaznaczoną opcję Przezroczyste tło.
4. Sprawdź zapisane koło. Pobierz PNG i upewnij się, że głowa, włosy i inne ważne szczegóły swobodnie mieszczą się w widocznym obszarze.

Koło znajduje się w kwadratowym pliku PNG z przezroczystymi narożnikami. Szerokość i wysokość pliku się nie zmieniają; okrągły staje się tylko widoczny obrys. Ściana lub pomieszczenie za osobą nadal będą widoczne wewnątrz koła.

Zaokrąglone narożniki w CSS

Jeśli edytor strony ma ustawienie promienia narożników, zacznij od niego. Przy własnym rozwiązaniu reguły CSS muszą dotyczyć elementu obrazu:

1. Dodaj klasę. Jeśli edytujesz HTML bezpośrednio, użyj poniższego przykładu lub dodaj rounded-image do atrybutu class istniejącego elementu <img>. W polu klasy CSS w edytorze wpisz nazwę bez kropki na początku. Sprawdź następnie, czy edytor przypisuje ją do obrazu, czy do otaczającego go elementu.
2. Dodaj CSS. Wklej przykład CSS do arkusza stylów strony lub pola na własny CSS. Zachowaj kropkę na początku .rounded-image — ten selektor wskazuje elementy z daną klasą. Pole na własny CSS zwykle oczekuje samych reguł, bez znaczników HTML <style>.
3. Sprawdź opublikowany obraz. Jeśli korzystasz z poniższego HTML, zastąp ścieżkę i dane obrazu własnymi. Obejrzyj stronę w podglądzie i upewnij się, że style motywu lub edytora nie nadpisują efektu.

Ten przykład zachowuje proporcje obrazu i pozwala mu zmniejszać się w obrębie kontenera:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Gotowa kuchnia z dębowymi szafkami i kamiennym blatem">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Podaj własną ścieżkę pliku, wymiary i tekst alternatywny. Szerokość i wysokość w HTML opisują wymiary pliku źródłowego i pomagają przeglądarce zarezerwować miejsce. CSS określa rozmiar wyświetlania i kształt narożników. Aby użyć poniższego przykładu okrągłego zdjęcia, wykonaj te same kroki z klasą team-avatar i odpowiadającym jej CSS.

Jeśli edytor przypisuje klasę do elementu otaczającego obraz, zmień selektor CSS z .rounded-image na .rounded-image img. W przykładzie okrągłego zdjęcia użyj .team-avatar img zamiast .team-avatar. Dzięki temu reguły rozmiaru i zaokrąglenia obejmą obraz wewnątrz tego elementu.

Wartość 16px zaokrągla wszystkie cztery narożniki. CSS pozwala też nadać im różne promienie: border-radius: 16px 16px 0 0 zaokrągla tylko dwa górne. Kolejność wartości to lewy górny, prawy górny, prawy dolny i lewy dolny narożnik. Narzędzie Pixilo obecnie zaokrągla wszystkie cztery jednakowo. Pełną składnię i działanie wartości procentowych opisuje dokumentacja border-radius w MDN.

Zaokrąglenie CSS zmienia wygląd obrazu na danej stronie, ale nie pobierany plik źródłowy. Po osobnym otwarciu lub zapisaniu oryginału kształt nadany przez CSS nie zostanie zachowany. Fragmenty ukryte przez CSS nadal znajdują się w pliku.

Okrągłe zdjęcie za pomocą CSS

Koło w CSS wymaga równej szerokości i wysokości wyświetlania. Zdjęcie źródłowe może być prostokątne: object-fit: cover wypełnia kwadrat bez rozciągania osoby, a promień przycina ten kwadrat do koła.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fizjoterapeutka">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

W tym przykładzie plik źródłowy ma 800 × 1200 pikseli i jest wyświetlany w kwadracie 160 × 160. Dopasuj te wartości do własnego obrazu i układu strony. Jeśli zmieniasz rozmiar wyświetlania dla ekranów mobilnych, zachowaj równą szerokość i wysokość, aby koło nie stało się elipsą.

object-fit: cover zachowuje proporcje i przycina to, co nie mieści się w ramce. object-position: 50% 40% wyśrodkowuje kadr w poziomie, a w przypadku tego pionowego zdjęcia pokazuje nieco wyższy fragment niż domyślne wyśrodkowanie w pionie. Nie przybliża ani nie oddala twarzy. Dopasuj pozycję osobno dla każdego portretu.

MDN szczegółowo opisuje object-fit i object-position. Nie wymuszaj kwadratowego kształtu prostokątnego zdjęcia bez odpowiednich reguł dopasowania, bo może to rozciągnąć przedstawiony obiekt.

Przykład: spójne portrety zespołu

Załóżmy, że klinika ma cztery zdjęcia pracowników: dwa portrety obejmujące głowę i ramiona, jedno szersze zdjęcie z gabinetu oraz jedno ciasne zbliżenie twarzy. Strona zespołu ma pokazywać wszystkie cztery w kołach 160 × 160. Nadanie im jednakowego obrysu to dopiero pierwszy krok.

1. Wybierz kadr wzorcowy. Na podstawie jednego portretu ustal, ile głowy i ramion ma być widoczne. Zostaw miejsce nad włosami i postaraj się umieścić oczy na podobnej wysokości we wszystkich zdjęciach. To wskazówka wizualna, a nie sztywny pomiar dla każdej osoby.
2. Dopasuj wielkość twarzy. Wykadruj zdjęcie z gabinetu ciaśniej, aby osoba nie wydawała się dużo mniejsza niż pozostałe. Jeśli ciasny portret już ucina włosy lub brodę, sięgnij po szerszy oryginał, o ile jest dostępny. Większe koło nie przywróci brakujących fragmentów.
3. Wybierz sposób tworzenia koła. Przy CSS najpierw przygotuj kadry, a następnie zastosuj jednakowe ramki 160 × 160 i dopasuj pozycję każdego zdjęcia. Przy zapisie okrągłych obrazów przygotuj pasujące kwadratowe kopie, na przykład 320 × 320, jeśli to odpowiedni rozmiar, i zastosuj w Pixilo zaokrąglenie 100%.
4. Oceń cały zestaw. Umieść portrety obok imion w rzeczywistym rozmiarze wyświetlania. Sprawdź, czy żadna twarz nie dominuje tylko z powodu ciaśniejszego kadru. Obejrzyj też układ mobilny, w którym zdjęcia mogą znaleźć się jedno pod drugim.

Spójny efekt wynika zarówno z okrągłego obrysu, jak i z podobnego kadrowania oraz wielkości twarzy. Zachowaj przydatny kontekst w kadrze, ale imiona i stanowiska umieść w tekście strony, zamiast zapisywać je na zdjęciu.

Wybór tła i formatu pliku

Zapisz obraz z przezroczystością, jeśli ma pasować do różnych kolorów strony lub trybu ciemnego. Biały narożnik może zlewać się z białą stroną, ale tworzyć kwadratową plamę na ciemnej karcie. Niektóre przeglądarki obrazów pokazują przezroczystość jako biel lub szachownicę. Przetestuj plik na innym tle, zanim uznasz, że zawiera białe piksele.

Gdy opcja Przezroczyste tło jest wyłączona, Pixilo wypełnia wybranym kolorem zarówno usunięte narożniki, jak i istniejące przezroczyste obszary. Nie zastępuje nieprzezroczystego tła wewnątrz zdjęcia. Jeśli narożniki zostały wypełnione bielą, a teraz potrzebujesz przezroczystości, wróć do oryginału i ponownie wyeksportuj plik z włączoną przezroczystością.

PNG zachowuje przezroczystość i nie dodaje kolejnej kompresji stratnej, ale zapis zdjęcia w tym formacie może zwiększyć wielkość pliku. Do publikacji na stronie porównaj kopię WebP, która także może zachować przezroczystość. Konwersja w Pixilo jest stratna, dlatego sprawdź krawędzie i szczegóły po zmianie formatu. JPG nie zachowuje przezroczystych narożników. Więcej o wyborze formatu znajdziesz w poradniku o przezroczystym tle.

Jeśli kształt nadajesz za pomocą CSS, samo zdjęcie nie potrzebuje przezroczystości. Możesz pozostawić odpowiedni JPG lub WebP i zaokrąglić jego wygląd w przeglądarce. CSS nie kompresuje pliku źródłowego. Dobierz wymiary do układu strony, a następnie porównaj wielkość i ostrość pliku dostarczanego odbiorcy.

Sprawdź efekt w docelowym układzie

• Obejrzyj przedstawiony obiekt. Sprawdź twarze, włosy, krawędzie produktów i tekst przy granicach kadru. Kształt powinien zachować informacje potrzebne odbiorcy.
• Sprawdź małe ekrany. Przy kole w CSS upewnij się, że szerokość i wysokość wyświetlania pozostają równe. Oceń też promień narożników w końcowym rozmiarze.
• Wypróbuj różne tła strony. Na jasnym i ciemnym tle szukaj niechcianych pełnych narożników lub jasnej obwódki.
• Sprawdź wersję końcową. Strona lub aplikacja może zmniejszyć obraz, przyciąć go albo zmienić format. Obejrzyj zapisaną lub opublikowaną kopię, również po konwersji formatu.
• Zadbaj o przydatny tekst alternatywny. Opisz rolę obrazu, a nie sam kształt. Portret zespołu powinien identyfikować osobę w danym kontekście; obrazy dekoracyjne zwykle potrzebują pustego tekstu alternatywnego. Zobacz poradnik o tekstach alternatywnych i nazwach plików.

Najczęściej zadawane pytania

Dlaczego zamiast koła powstała elipsa lub kapsuła?

Najpierw sprawdź proporcje. Dla koła w CSS szerokość i wysokość wyświetlania muszą być równe. W Pixilo najpierw przytnij oryginał do kwadratu, a następnie ustaw 100%. Powyższe porównanie pokazuje, dlaczego prostokąt daje inny obrys.

Dlaczego narożniki nadal są białe?

Najpierw przetestuj plik na innym tle, zgodnie z wcześniejszym opisem. Jeśli narożniki zawierają białe piksele, sprawdź, czy wybrano pełny kolor lub przekonwertowano plik do JPG. Strona lub aplikacja mogła też zastąpić przezroczystość bielą. Zapisz nową kopię oryginału z włączoną przezroczystością i sprawdź format po publikacji.

Dlaczego obraz ma proste narożniki wewnątrz zaokrąglonej karty?

Zaokrąglenie karty nie przycina automatycznie znajdującego się w niej obrazu. Zastosuj promień bezpośrednio do obrazu lub użyj zaokrąglonego elementu otaczającego z overflow: hidden, jeśli jego zawartość ma być przycinana razem. Jeśli zawiera też interaktywne przyciski lub pola, sprawdź, czy przycinanie nie ukrywa oznaczenia fokusu klawiatury.

Czy można zrobić koło bez przycinania zdjęcia?

Koło nie może wypełnić całej prostokątnej ramki zdjęcia bez utraty części obszaru lub zmiany kompozycji. Jeśli musisz zachować całą treść, umieść zdjęcie w większym kwadratowym projekcie z odpowiednią ilością miejsca wokół niego, a potem sprawdź granicę koła. Dla szczegółowych treści prostokątna ramka często będzie lepsza.

Czy zaokrąglone obrazy ładują się szybciej?

Sam kształt nie gwarantuje mniejszego pliku do pobrania. Skorzystaj z opisanych wyżej wskazówek dotyczących wymiarów i formatów, a następnie zmierz plik faktycznie dostarczany przez opublikowaną stronę.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)