Slider na stronie internetowej ucina twarze - przyczyna i naprawa

Odbierasz nową stronę. Na laptopie wszystko wygląda świetnie: na górze duże zdjęcia ludzi z Twojej firmy. Otwierasz ją na dużym monitorze i… ludzie na zdjęciach nie mają czół. Komuś ucięło nawet oczy.

Niedawno mieliśmy dokładnie taki przypadek przy nowej stronie firmowej. Slider na stronie internetowej, czyli duży baner na górze, w którym zdjęcia zmieniają się co kilka sekund, na monitorze o szerokości 2560 pikseli ucinał ludziom głowy. Pokażę Ci, skąd to się bierze, dlaczego znikają akurat twarze, jak to naprawić i jak sprawdzić to samemu, zanim zapłacisz za stronę.

Dlaczego slider na dużym monitorze ucina zdjęcie?

Bo ma stałą wysokość. W naszym przypadku było to 640 pikseli na każdym ekranie, od laptopa po największy monitor. Szerokość slidera rośnie razem z ekranem, a wysokość stoi w miejscu.

Zobacz, co to robi z proporcjami. Proporcja to szerokość podzielona przez wysokość:

• na laptopie z ekranem 1440 px slider ma 1440 × 640, czyli proporcję 2,25:1,
• na monitorze 2560 px slider ma 2560 × 640, czyli 4:1. To już nie baner, tylko wąski pasek.

Zdjęcia w sliderze miały proporcję 2,25:1. Na laptopie pasowały idealnie, dlatego nikt niczego nie zauważył. Na dużym monitorze przeglądarka rozciąga zdjęcie do pełnej szerokości 2560 px, a wtedy ma ono ok. 1138 px wysokości. Widać z tego 640 px. Reszta, czyli ok. 44% wysokości zdjęcia, po prostu się nie mieści i znika.

Przeglądarka nie zmniejsza zdjęcia, żeby zmieściło się całe, bo slider ma być wypełniony bez pustych pasków. W kodzie strony (w stylach CSS) odpowiada za to ustawienie object-fit: cover (dla zdjęcia) albo background-size: cover (dla tła). Oba znaczą to samo: wypełnij ramkę w całości, a to, co wystaje, utnij.

Dlaczego znikają czoła i oczy, a nie nogi?

Bo przy wyśrodkowanym zdjęciu przeglądarka tnie je po równo z góry i z dołu. Przy object-fit: cover zdjęcie jest domyślnie wyśrodkowane (object-position ma wartość początkową 50% 50%). Przy tle domyślny jest lewy górny róg, ale jeśli programista ustawi tło na środek (tak było u nas), efekt jest ten sam.

W naszym przykładzie z 44% znikało więc ok. 22% wysokości u góry i drugie tyle u dołu. A gdzie na zdjęciu ludzi są twarze? Zwykle w górnej części kadru. Przycinanie zabiera ok. 250 pikseli od góry zdjęcia, a tam są akurat włosy, czoła i oczy. Dół zdjęcia też znika, tylko rzadko kto to zauważa.

Zdjęcie docięte przed wgraniem: tego żadne ustawienie nie uratuje

Był też drugi błąd, mniej widoczny. Oryginalne zdjęcia miały proporcję 16:9, czyli były wyższe. Przed wgraniem przycięliśmy je do 2,25:1, żeby idealnie pasowały do slidera na laptopie. To był nasz błąd. Zapas nad głowami został wyrzucony, zanim zdjęcie w ogóle trafiło na stronę.

W starszym wpisie o tym, jak wyświetlać zdjęcia na stronę WWW, Przemek radził przygotować każde zdjęcie osobno, w rozmiarze, którego potrzebuje strona. Przy miniaturach produktów to działa. Przy sliderze, który na różnych ekranach ma różną proporcję, nie ma jednego „właściwego” rozmiaru. Do slidera wgrywaj pełny kadr z zapasem nad głowami i po bokach, a kadrowanie zostaw stronie.

Jaki rozmiar zdjęcia na stronę WWW wybrać do slidera? Zapytaj wykonawcę strony o proporcję slidera na najszerszym ekranie i daj zdjęcie z zapasem. Pilnuj też szerokości. Nasze oryginały miały tylko 1376 px szerokości, więc żeby dobrze wyglądały na ekranie 2560 px, musieliśmy je powiększyć porządnym programem. Większy plik trzeba potem odchudzić, o tym przeczytasz we wpisie Jak optymalizować zdjęcia na stronę WWW?.

Jak naprawić slider, żeby nie ucinał twarzy?

Naprawa ma dwie części. Obie robi programista, ale warto wiedzieć, o co prosić.

Wysokość slidera rosnąca z szerokością ekranu

Zamiast stałych 640 px slider rośnie razem z ekranem. U nas wyszło tak:

• 640 px na laptopie 1440 px,
• do ok. 770 px przy szerokości 1920 px, jeśli okno przeglądarki ma co najmniej ok. 1025 px wysokości,
• ok. 950 px na monitorze 2560 × 1440,
• najwyżej 75% wysokości okna przeglądarki, ale nigdy mniej niż 640 px (w oknie niższym niż ok. 850 px slider zajmie więcej niż 75%).

W kodzie da się to zapisać jedną linijką, np. height: clamp(640px, 40vw, 75vh). Funkcja clamp() bierze wartość środkową (tu 40% szerokości okna przeglądarki, przy oknie otwartym na cały ekran to 40% szerokości ekranu), ale pilnuje, żeby nie spadła poniżej 640 px i, o ile okno na to pozwala, nie przekroczyła 75% jego wysokości. Gdy okno ma mniej niż ok. 850 px wysokości (tak jest na większości laptopów), 75% okna to mniej niż 640 px i wygrywa dolna granica: slider ma 640 px, nawet jeśli zajmuje wtedy więcej niż 75% okna.

Dlatego wysokość zależy też od tego, jak wysokie jest okno przeglądarki. Przy oknie szerokim na 2560 px 40% szerokości dałoby 1024 px, ale okno na monitorze 2560 × 1440 ma ok. 1270 px wysokości, więc działa limit 75% i slider ma ok. 950 px. Na monitorze 1920 × 1080 okno jest zwykle niższe niż ok. 1025 px, bo część wysokości ekranu zabierają pasek zadań i pasek przeglądarki. Wtedy ten sam limit zatrzyma slider poniżej 770 px, np. na ok. 710 px przy oknie wysokim na 950 px.

Punkt kadrowania na twarz dla każdego slajdu

Przycinanie i tak czasem się zdarzy, bo ekranów jest mnóstwo. Chodzi o to, żeby znikało to, co jest dalej od twarzy, a nie sama twarz. Dlatego każdy slajd dostał własny punkt kadrowania, ustawiony na twarz zamiast na środek zdjęcia.

Przy object-position albo background-position zamiast środka (50% 50%) wpisuje się np. 50% 30%, gdzie druga liczba dotyczy pionu. Wtedy z nadmiaru zdjęcia przeglądarka ucina z góry tylko 30%, a 70% z dołu, więc twarz z górnej części kadru zostaje na ekranie. Samo „30%” przesunęłoby zdjęcie w poziomie, nie w pionie.

Po tych dwóch zmianach i wgraniu pełnych kadrów 16:9 twarze na monitorze 2560 px były całe, łącznie z oczami, które wcześniej ucinało.

Jak sprawdzić slider zdjęć przed odbiorem strony?

Nie musisz mieć w domu trzech monitorów. Wystarczy przeglądarka na komputerze. Sprawdź slider w czterech miejscach:

W Chrome naciśnij F12 i włącz tryb urządzeń (ikona telefonu z tabletem w górnym pasku narzędzi). Na pasku nad stroną masz gotowe szerokości, m.in. 1440 px (Laptop L) i 2560 px (4K). Obok szerokości wpisz też wysokość okna, np. 1920 × 950 i 2560 × 1270, bo slider rosnący z ekranem zależy też od wysokości okna.

Szybszy sposób na duży ekran: na zwykłym monitorze 1920 px pomniejsz stronę skrótem Ctrl i minus do 75%. Strona „widzi” wtedy ekran szeroki na ok. 2560 px.

Jeśli sam zmieniasz zdjęcia w sliderze, sprawdzaj każde nowe zdjęcie tak samo. Jak je przygotować w darmowym programie, pokazuje Przemek we wpisie Jak kadrować zdjęcia w Canva?, tylko pamiętaj o zapasie nad głowami.

Najczęstsze pytania o slider na stronie internetowej

Slider sprawdzaj na kilku ekranach, nie na jednym

Ucięte twarze to nie wina zdjęcia ani przeglądarki, tylko stałej wysokości slidera i kadru bez zapasu. Przy odbiorze strony obejrzyj slider na laptopie, na dużym monitorze i na telefonie. Lepiej zobaczyć ucięte twarze samemu niż usłyszeć o nich od klienta, który ma większy ekran niż Ty :-)

Robisz nową stronę albo coś na obecnej wygląda dziwnie na dużym ekranie? Napisz do nas. Jak pracujemy nad stronami internetowymi, przeczytasz w naszej ofercie.