Baner na stronie internetowej ucina zdjęcie: proporcje i kadrowanie

Na Twoim laptopie baner na górze strony wygląda tak, jak miał wyglądać. Ktoś otwiera tę samą stronę na dużym monitorze i… ludzie na zdjęciach nie mają czół, a jednej osobie zniknęły oczy.

Dokładnie tak wyglądał niedawno baner na stronie internetowej, którą przeglądaliśmy przed pokazaniem jej klientowi. Chodzi o duże zdjęcie na samej górze strony: projektanci mówią na nie hero image, a gdy zdjęcia zmieniają się co kilka sekund, slider. Wyjaśnię Ci, dlaczego zdjęcie się ucina, czego nie robić ze zdjęciami przed wgraniem, co poprawić w samym banerze i na jakich ekranach to sprawdzić, zanim pokażesz stronę klientom.

Baner o stałej wysokości na dużym monitorze: wąski pasek zamiast zdjęcia

Baner z początku wpisu miał na sztywno 640 pikseli wysokości, niezależnie od ekranu. Szerokość rosła razem z monitorem, wysokość nie.

Na laptopie z ekranem szerokim na 1440 px baner miał wymiary 1440 × 640. Na monitorze 2560 px już 2560 × 640, czyli cztery razy szerszy niż wyższy. Zdjęcie, które na laptopie mieściło się w całości, na dużym ekranie straciło ok. 44% swojej wysokości.

Przeglądarka nie zostawia w banerze pustych pasów. Rozciąga zdjęcie tak, żeby wypełniło całą szerokość, a to, co nie mieści się w pionie, obcina. W kodzie strony odpowiada za to ustawienie background-size: cover (dla zdjęcia w tle) albo object-fit: cover (dla zwykłego zdjęcia).

Proporcje zdjęcia a proporcje banera: dlaczego 2,25:1 nie pasuje do 4:1?

Proporcje zdjęcia to szerokość podzielona przez wysokość. Zdjęcia w naszym banerze miały 2,25:1, czyli dokładnie tyle, ile baner na laptopie (1440 ÷ 640 = 2,25). Dlatego na laptopie nikt niczego nie zauważył.

Policzmy, co się dzieje dalej. Na ekranie 2560 px zdjęcie 2,25:1 rozciągnięte na całą szerokość ma ok. 1138 px wysokości, a baner pokazuje z tego 640 px. Ucięte zostaje ok. 498 px, czyli ok. 44%. Przy ekranie 1920 px (baner 3:1) znika „tylko” 25% wysokości, więc problem rośnie razem z monitorem.

Dlaczego znikają akurat twarze? Bo zdjęcie w tle było ustawione na środek, więc przeglądarka cięła po równo: ok. 22% u góry i ok. 22% na dole. Na zdjęciach ludzi twarze są zwykle w górnej części kadru, a dół z ubraniem albo biurkiem nikogo nie obchodzi. Efekt widzisz jako „ucięte głowy”.

Tak samo baner potrafi uciąć logotypy. Dlatego pasek z logo UE nie powinien być tłem banera, o czym piszę we wpisie Logo UE na stronie firmy: jak oznaczyć projekt z dotacji zgodnie z zasadami.

Nie przycinaj zdjęć do banera przed wgraniem na stronę

Był też drugi błąd, popełniony jeszcze przed wgraniem. Oryginalne zdjęcia miały proporcję 16:9, czyli były wyraźnie wyższe niż 2,25:1. Przycięliśmy je wcześniej, żeby pasowały do banera na laptopie. Zapas nad głowami poleciał do kosza, zanim zdjęcie w ogóle trafiło na stronę.

Uwaga, sam pełny kadr nie wystarczy. Zdjęcie 16:9 w banerze o stałych 640 px na ekranie 2560 px straciłoby nawet ok. 56% wysokości, czyli więcej niż przycięte. Pełny kadr daje dopiero materiał do pracy. Resztę musi zrobić baner, o czym za chwilę.

Jaki rozmiar zdjęcia na stronę WWW przygotować do banera? Pilnuj dwóch rzeczy. Po pierwsze proporcji: daj oryginał z zapasem nad głowami i po bokach, bez docinania pod jeden ekran. Po drugie szerokości: nasze oryginały miały tylko 1376 px, więc żeby nie były rozmyte na monitorze 2560 px, trzeba je było powiększyć porządnym programem. Większe zdjęcie waży więcej, dlatego warto zadbać o kompresję zdjęć na stronie, czyli zmniejszenie wagi pliku, a nie docinanie kadru banera.

Jeśli dopiero szukasz zdjęcia do banera w darmowych bankach, najpierw sprawdź licencję. Piszę o tym we wpisie Darmowe zdjęcia bez praw autorskich: CC0, CC BY czy Unsplash.

Jak naprawić baner na stronę, żeby nie ucinał twarzy?

U nas pomogły dwie zmiany w kodzie strony plus wgranie pełnych kadrów 16:9. Obie zmiany robi programista, ale dobrze wiedzieć, o co go poprosić.

Wysokość banera zależna od ekranu

Zamiast stałych 640 px baner rośnie razem z szerokością ekranu, ale z dwoma ogranicznikami: nie spada poniżej 640 px i nie zajmuje więcej niż 75% wysokości okna przeglądarki. Wyszło tak:

• 640 px na laptopie 1440 px,
• ok. 770 px na ekranie 1920 px, o ile okno przeglądarki ma co najmniej ok. 1025 px wysokości (w niższym oknie zatrzyma go limit 75%),
• ok. 950 px na monitorze 2560 × 1440, bo tu zadziałał limit 75% wysokości okna: pasek zadań systemu oraz paski kart i adresu przeglądarki zostawiają stronie ok. 1270 px wysokości, a 75% z tego to ok. 950 px.

Programista zapisze to jedną regułą z funkcją clamp(), u nas: height: clamp(640px, 40vw, 75vh). Pierwsza wartość to minimum, ostatnia to maksimum (75vh to 75% wysokości okna), a środkowa (40vw) to 40% szerokości okna. Regułę dostały tylko ekrany szersze niż 900 px, dlatego na telefonie baner zachował dotychczasową wysokość. Bez tego ograniczenia minimum 640 px zadziałałoby także na telefonie.

Kadrowanie zdjęć do banera: punkt na twarz, nie na środek

Ekranów jest tyle, że jakieś przycięcie zawsze się zdarzy. Chodzi o to, żeby znikało tło, a nie twarz. Dlatego każde zdjęcie w banerze dostało własny punkt kadrowania.

W kodzie robi się to ustawieniem background-position (dla zwykłego zdjęcia: object-position). Wartość 50% 50% oznacza środek. Druga liczba to pion: przy 50% 15% przeglądarka zabiera z góry tylko 15% nadmiaru zdjęcia, a 85% z dołu. U nas punkty dla pięciu zdjęć wyszły między 0% a 15%, zależnie od tego, jak wysoko na zdjęciu była twarz.

Przykład: zdjęcie 16:9 na ekranie 2560 px ma 1440 px wysokości, a baner 950 px. Nadmiar to 490 px. Przy środku z góry znika ok. 245 px, przy punkcie 15% tylko ok. 74 px. Te 170 px różnicy to często całe czoło i oczy.

Na telefonie jest odwrotnie. Baner jest wąski i wysoki, więc przeglądarka obcina boki zdjęcia, nie górę. Tam ustawiliśmy osobny punkt, przesunięty w poziomie na osobę ze zdjęcia. Po wszystkich zmianach twarze na monitorze 2560 px były całe, łącznie z oczami, które wcześniej znikały.

Jakie ekrany sprawdzić przy odbiorze strony?

Nie potrzebujesz trzech monitorów. Wystarczy przeglądarka na komputerze i kilka minut. Odbierając stronę, obejrzyj baner co najmniej w czterech rozmiarach, a nie tylko na swoim ekranie. Zaznacz po kolei:

W Chrome naciśnij F12 i włącz tryb urządzeń. U góry wpiszesz dowolną szerokość i wysokość okna, np. 2560 × 1270. Wysokość ma znaczenie, bo baner z limitem 75% okna zachowuje się inaczej w niskim oknie.

Jeszcze prościej: na zwykłym monitorze 1920 px pomniejsz stronę skrótem Ctrl i minus do 75%. Strona zachowa się wtedy tak, jakby ekran miał ok. 2560 px szerokości.

Najczęstsze pytania o baner na stronie internetowej

Pełny kadr i kilka ekranów zamiast jednego

Pamiętaj: zdjęcie do banera dawaj w pełnym kadrze, z zapasem nad głowami, a stronę oglądaj na laptopie, dużym monitorze i telefonie. Lepiej samemu złapać ucięte twarze przy odbiorze, niż usłyszeć o nich od klienta, który ma większy ekran niż Ty :-)

Robisz nową stronę albo baner na obecnej dziwnie wygląda na dużym monitorze? Napisz do nas. Zobacz, jak pracujemy nad stronami internetowymi.