Baner na stronę główną sklepu - wymiary, waga pliku i wpływ na szybkość strony
Aleksandra Marecka
Aleksandra Marecka
Head of Digital Marketing
Baner na stronę główną sklepu - wymiary, waga pliku i wpływ na szybkość strony
Baner na stronę główną sklepu powinien mieć wymiary dopasowane do szerokości kontenera w Twoim szablonie, osobną wersję na telefon i jak najmniejszą wagę pliku, bo zwykle to on jest największym elementem pierwszego ekranu. Google ocenia szybkość wczytania tego elementu wskaźnikiem LCP - dobry wynik to 2,5 sekundy lub mniej. Dlatego hero banner przygotowuje się w dwóch kadrach (poziomym i pionowym), zapisuje w nowoczesnym formacie, takim jak WebP, i nie ukrywa za leniwym ładowaniem.
Hero banner to duża grafika na samej górze strony głównej, która ma w kilka sekund powiedzieć klientowi, co sprzedajesz i dlaczego warto zostać. Problem w tym, że ten sam plik często decyduje o tym, jak szybko sklep wygląda na gotowy. Ciężki baner w formacie PNG, wgrany w rozdzielczości aparatu, potrafi spowolnić pierwszy ekran bardziej niż cała reszta strony. W tym tekście pokazujemy, jak dobrać wymiary banera, ile może ważyć i jak go wdrożyć, żeby dobrze wyglądał na telefonie i nie psuł wyników szybkości.
[#wazne] W skrócie: baner na stronę główną sklepu projektuj w dwóch wersjach - szerokiej na komputer i pionowej lub kwadratowej na telefon - w szerokości dopasowanej do kontenera szablonu. Zapisz go w WebP lub dobrze skompresowanym JPG, nie ustawiaj leniwego ładowania i ogranicz slider do jednego, najważniejszego slajdu. Według web.dev dobry LCP to 2,5 s lub mniej dla 75% odsłon (sprawdź aktualne wytyczne). W Vinson projektujemy banery i grafiki sklepów internetowych tak, żeby sprzedawały i nie spowalniały strony.
Czym jest hero banner w sklepie internetowym
Hero banner to główna grafika strony głównej sklepu, wyświetlana na pierwszym ekranie, zanim klient cokolwiek przewinie. Zwykle łączy zdjęcie produktu lub aranżacji, krótkie hasło, informację o ofercie i przycisk, który prowadzi do kategorii lub promocji. W wielu szablonach ma formę slidera, czyli kilku banerów zmieniających się automatycznie.
Dla sklepu baner na stronę główną pełni trzy role naraz. Jest wizytówką marki, nośnikiem bieżącej promocji i elementem nawigacji. Każda z tych ról wymaga innych decyzji graficznych, a wszystkie razem muszą zmieścić się w jednym kadrze, który na telefonie ma często mniej niż połowę powierzchni ekranu komputera. Tak wygląda podział na strefy, który stosujemy przy projektowaniu:
[#chart:pgr51a]
Spójność banera z resztą sklepu zaczyna się od zasad marki. Jeśli dopiero je budujesz, zacznij od tekstu o tym, co zawiera identyfikacja wizualna sklepu internetowego - kolory, fonty i styl zdjęć na banerze powinny wynikać z tych samych reguł co logo i grafiki ofertowe.
Jakie wymiary powinien mieć baner na stronę główną sklepu
Nie ma jednego uniwersalnego wymiaru banera na stronę główną. Każda platforma i każdy szablon wyświetla go inaczej: na pełną szerokość okna, w kontenerze o stałej szerokości albo w siatce z kilkoma mniejszymi kafelkami. Wymiar ustalasz więc na podstawie szablonu, a nie listy z internetu.
Jak ustalić wymiar banera w swoim szablonie
Sprawdź szerokość kontenera. W narzędziach deweloperskich przeglądarki zmierz, ile pikseli zajmuje obszar banera przy typowej szerokości ekranu komputera.
Sprawdź, czy baner jest przycinany. Jeśli szablon wyświetla grafikę jako tło sekcji, przy zmianie szerokości okna boki lub góra mogą znikać.
Zobacz ustawienia modułu. Platformy sklepowe często pozwalają ustawić wysokość slidera lub wgrać osobną grafikę na urządzenia mobilne - przykładowo aplikacja Multi Slider w Shoperze obsługuje osobne banery pod smartfony oraz pliki JPG, PNG, WebP i MP4 (według materiałów Shoper Learn - sprawdź aktualne wytyczne).
Uwzględnij ekrany o wysokiej gęstości. Na ekranach typu Retina grafika wyświetlana w szerokości 1200 px wygląda ostrzej, gdy plik ma większą szerokość, ale każdy dodatkowy piksel to większa waga - stąd potrzeba wersji responsywnych.
Proporcje banera na komputer i na telefon
Na komputerze baner jest zwykle szeroki i niski, na przykład w proporcjach zbliżonych do 3:1 lub 2,5:1. Na telefonie ta sama grafika zmniejsza się do pasa o wysokości kilku centymetrów, w którym hasło staje się nieczytelne. Dlatego osobna wersja mobilna, pionowa lub kwadratowa, to w praktyce konieczność, a nie dodatek. W tabeli zebraliśmy typowe układy - konkretne piksele zawsze dopasuj do swojego szablonu.
| Wersja banera | Typowe proporcje | Co pokazać | Na co uważać |
|---|---|---|---|
| Komputer, pełna szerokość | ok. 3:1 do 4:1 | produkt z boku, hasło i przycisk po drugiej stronie | boki mogą być ucinane na węższych monitorach |
| Komputer, w kontenerze | ok. 2,5:1 do 3:1 | pełna kompozycja w obrębie kontenera | szerokość pliku dopasowana do kontenera |
| Telefon | ok. 4:5 lub 1:1 | jeden produkt, krótkie hasło, duży przycisk | tekst w grafice min. tak duży jak tekst strony |
| Kafelki pod banerem | 1:1 lub 4:3 | kategorie lub drugorzędne promocje | spójny styl i ta sama hierarchia tekstu |
Proporcje w tabeli to przykłady z praktyki projektowej, a nie wymogi platform. Jeśli Twoja platforma podaje wymiary zalecane dla danego modułu, trzymaj się ich, a w razie wątpliwości przygotuj plik testowy z siatką i sprawdź, które fragmenty są ucinane przy różnych szerokościach okna.
Baner na stronę główną sklepu powinien mieć wymiary dopasowane do szerokości kontenera w Twoim szablonie, osobną wersję na telefon i jak najmniejszą wagę pliku, bo zwykle to on jest największym elementem pierwszego ekranu. Google ocenia szybkość wczytania tego elementu wskaźnikiem LCP - dobry wynik to 2,5 sekundy lub mniej. Dlatego hero banner przygotowuje się w dwóch kadrach (poziomym i pionowym), zapisuje w nowoczesnym formacie, takim jak WebP, i nie ukrywa za leniwym ładowaniem.
Hero banner to duża grafika na samej górze strony głównej, która ma w kilka sekund powiedzieć klientowi, co sprzedajesz i dlaczego warto zostać. Problem w tym, że ten sam plik często decyduje o tym, jak szybko sklep wygląda na gotowy. Ciężki baner w formacie PNG, wgrany w rozdzielczości aparatu, potrafi spowolnić pierwszy ekran bardziej niż cała reszta strony. W tym tekście pokazujemy, jak dobrać wymiary banera, ile może ważyć i jak go wdrożyć, żeby dobrze wyglądał na telefonie i nie psuł wyników szybkości.
[#wazne] W skrócie: baner na stronę główną sklepu projektuj w dwóch wersjach - szerokiej na komputer i pionowej lub kwadratowej na telefon - w szerokości dopasowanej do kontenera szablonu. Zapisz go w WebP lub dobrze skompresowanym JPG, nie ustawiaj leniwego ładowania i ogranicz slider do jednego, najważniejszego slajdu. Według web.dev dobry LCP to 2,5 s lub mniej dla 75% odsłon (sprawdź aktualne wytyczne). W Vinson projektujemy banery i grafiki sklepów internetowych tak, żeby sprzedawały i nie spowalniały strony.
Czym jest hero banner w sklepie internetowym
Hero banner to główna grafika strony głównej sklepu, wyświetlana na pierwszym ekranie, zanim klient cokolwiek przewinie. Zwykle łączy zdjęcie produktu lub aranżacji, krótkie hasło, informację o ofercie i przycisk, który prowadzi do kategorii lub promocji. W wielu szablonach ma formę slidera, czyli kilku banerów zmieniających się automatycznie.
Dla sklepu baner na stronę główną pełni trzy role naraz. Jest wizytówką marki, nośnikiem bieżącej promocji i elementem nawigacji. Każda z tych ról wymaga innych decyzji graficznych, a wszystkie razem muszą zmieścić się w jednym kadrze, który na telefonie ma często mniej niż połowę powierzchni ekranu komputera. Tak wygląda podział na strefy, który stosujemy przy projektowaniu:
[#chart:pgr51a]
Spójność banera z resztą sklepu zaczyna się od zasad marki. Jeśli dopiero je budujesz, zacznij od tekstu o tym, co zawiera identyfikacja wizualna sklepu internetowego - kolory, fonty i styl zdjęć na banerze powinny wynikać z tych samych reguł co logo i grafiki ofertowe.
Jakie wymiary powinien mieć baner na stronę główną sklepu
Nie ma jednego uniwersalnego wymiaru banera na stronę główną. Każda platforma i każdy szablon wyświetla go inaczej: na pełną szerokość okna, w kontenerze o stałej szerokości albo w siatce z kilkoma mniejszymi kafelkami. Wymiar ustalasz więc na podstawie szablonu, a nie listy z internetu.
Jak ustalić wymiar banera w swoim szablonie
Sprawdź szerokość kontenera. W narzędziach deweloperskich przeglądarki zmierz, ile pikseli zajmuje obszar banera przy typowej szerokości ekranu komputera.
Sprawdź, czy baner jest przycinany. Jeśli szablon wyświetla grafikę jako tło sekcji, przy zmianie szerokości okna boki lub góra mogą znikać.
Zobacz ustawienia modułu. Platformy sklepowe często pozwalają ustawić wysokość slidera lub wgrać osobną grafikę na urządzenia mobilne - przykładowo aplikacja Multi Slider w Shoperze obsługuje osobne banery pod smartfony oraz pliki JPG, PNG, WebP i MP4 (według materiałów Shoper Learn - sprawdź aktualne wytyczne).
Uwzględnij ekrany o wysokiej gęstości. Na ekranach typu Retina grafika wyświetlana w szerokości 1200 px wygląda ostrzej, gdy plik ma większą szerokość, ale każdy dodatkowy piksel to większa waga - stąd potrzeba wersji responsywnych.
Proporcje banera na komputer i na telefon
Na komputerze baner jest zwykle szeroki i niski, na przykład w proporcjach zbliżonych do 3:1 lub 2,5:1. Na telefonie ta sama grafika zmniejsza się do pasa o wysokości kilku centymetrów, w którym hasło staje się nieczytelne. Dlatego osobna wersja mobilna, pionowa lub kwadratowa, to w praktyce konieczność, a nie dodatek. W tabeli zebraliśmy typowe układy - konkretne piksele zawsze dopasuj do swojego szablonu.
| Wersja banera | Typowe proporcje | Co pokazać | Na co uważać |
|---|---|---|---|
| Komputer, pełna szerokość | ok. 3:1 do 4:1 | produkt z boku, hasło i przycisk po drugiej stronie | boki mogą być ucinane na węższych monitorach |
| Komputer, w kontenerze | ok. 2,5:1 do 3:1 | pełna kompozycja w obrębie kontenera | szerokość pliku dopasowana do kontenera |
| Telefon | ok. 4:5 lub 1:1 | jeden produkt, krótkie hasło, duży przycisk | tekst w grafice min. tak duży jak tekst strony |
| Kafelki pod banerem | 1:1 lub 4:3 | kategorie lub drugorzędne promocje | spójny styl i ta sama hierarchia tekstu |
Proporcje w tabeli to przykłady z praktyki projektowej, a nie wymogi platform. Jeśli Twoja platforma podaje wymiary zalecane dla danego modułu, trzymaj się ich, a w razie wątpliwości przygotuj plik testowy z siatką i sprawdź, które fragmenty są ucinane przy różnych szerokościach okna.
- Grafiki ofertowe, banery i miniatury
- Projekty pod marketplace’y i sklep
- Szybka wycena bez zobowiązań
Wycenę przygotuje Aleksandra Marecka, Head of Digital MarketingIle może ważyć baner na stronę główną sklepu
Ani Google, ani platformy sklepowe nie podają jednego limitu wagi dla hero bannera. Liczy się efekt: jak szybko największy element pierwszego ekranu pojawi się u klienta. W praktyce jest to suma czasu połączenia z serwerem, pobrania pliku i jego wyświetlenia. Waga pliku to część tego wyniku, na którą grafik ma bezpośredni wpływ.
Dobrym punktem wyjścia jest myślenie o budżecie pierwszego ekranu - ile danych musi pobrać telefon, zanim klient zobaczy gotową stronę. Baner zwykle zajmuje w tym budżecie największą część. Poniżej przykład, jak może wyglądać taki podział przed optymalizacją i po niej:
[#chart:pgr51b]
Najczęstsze przyczyny zbyt ciężkiego banera są proste: plik zapisany jako PNG mimo że zawiera zdjęcie, rozdzielczość dużo większa niż obszar wyświetlania, brak kompresji albo pięć slajdów, z których każdy jest pobierany od razu. Każdą z nich da się usunąć bez widocznej utraty jakości.
Jaki format pliku wybrać do banera
WebP - według dokumentacji Google pliki WebP ze stratną kompresją są o 25-34% mniejsze niż porównywalne pliki JPEG, a bezstratne o 26% mniejsze niż PNG. To dobry domyślny wybór dla banera ze zdjęciem.
AVIF - nowszy format, który web.dev wymienia obok WebP jako bardziej wydajny; warto go użyć, jeśli obsługuje go Twoja platforma.
JPG - bezpieczny wybór, gdy platforma nie przyjmuje WebP; ustaw kompresję i sprawdź, czy tekst na grafice pozostaje ostry.
PNG - tylko dla grafik z dużymi jednolitymi plamami koloru lub przezroczystością; dla zdjęcia zwykle daje najcięższy plik.
Przy wyborze formatu i kompresji ważna jest jeszcze jedna zasada: tekst hasła lepiej umieścić w kodzie strony niż w grafice, jeśli pozwala na to szablon. Wtedy plik może być mocniej skompresowany, a hasło zostaje ostre i czytelne dla wyszukiwarki. Jeśli tekst musi być częścią grafiki, dobierz kolory zgodnie z paletą kolorów marki sklepu i zadbaj o kontrast z tłem.
Jak baner wpływa na szybkość strony głównej sklepu
Largest Contentful Paint, czyli LCP, to wskaźnik Core Web Vitals, który mierzy czas wyświetlenia największego obrazu lub bloku tekstu widocznego na pierwszym ekranie. Na stronie głównej sklepu takim elementem jest najczęściej właśnie hero banner. Według web.dev dobry LCP to 2,5 sekundy lub mniej, wynik powyżej 4 sekund jest oceniany jako słaby, a mierzy się go dla 75. percentyla odsłon, osobno na telefonach i komputerach (sprawdź aktualne wytyczne).
Liczą się też przesunięcia układu. Jeśli baner nie ma zarezerwowanego miejsca, strona najpierw ładuje się bez niego, a potem treść przeskakuje w dół. Wskaźnik CLS mierzy takie przesunięcia, a web.dev zaleca wynik 0,1 lub mniej i podawanie atrybutów width i height dla obrazów albo rezerwowanie miejsca przez CSS aspect-ratio.
Wdrożenie banera - co przekazać programiście
Bez leniwego ładowania. Web.dev wprost zaleca, by nie ustawiać loading="lazy" dla obrazów widocznych na pierwszym ekranie, zwłaszcza dla elementu LCP.
Wysoki priorytet. Atrybut fetchpriority="high" na banerze pomaga przeglądarce pobrać go wcześniej; web.dev ostrzega, że nadanie go więcej niż jednemu lub dwóm obrazom traci sens.
Obraz w HTML, nie w CSS. Grafika w atrybucie src lub srcset w kodzie strony jest wykrywana szybciej niż tło dodane przez plik CSS lub skrypt.
Wersje responsywne. Elementy picture i srcset pozwalają wysłać na telefon mniejszy plik w kadrze pionowym, a na komputer szeroki.
Wymiary w kodzie. Atrybuty width i height lub aspect-ratio rezerwują miejsce i chronią przed przeskakiwaniem treści.
[#tip] Sprawdź stronę główną w PageSpeed Insights przed wgraniem nowego banera i po nim. Narzędzie wskazuje, który element jest elementem LCP, i podpowiada, czy obraz ma zbyt duże wymiary, nieoptymalny format albo leniwe ładowanie. To najszybszy sposób, żeby sprawdzić, czy nowa kreacja nie pogorszyła wyników.
Slider czy jeden baner na stronie głównej
Slider kusi, bo pozwala pokazać kilka promocji naraz. Ma jednak koszty. Każdy dodatkowy slajd to kolejny plik, a jeśli szablon pobiera wszystkie od razu, waga pierwszego ekranu rośnie kilkukrotnie. Web.dev radzi, by ukrytym slajdom karuzeli nadawać niski priorytet pobierania, właśnie po to, żeby nie konkurowały z pierwszym obrazem.
Z punktu widzenia klienta automatycznie zmieniające się slajdy często są pomijane - zanim przeczyta hasło, grafika się zmienia. Na telefonie przewijanie w bok bywa też mylone z przewijaniem strony. Jeśli zostajesz przy sliderze, ogranicz go do dwóch lub trzech slajdów, pierwszy traktuj jako najważniejszy i nie ustawiaj zbyt krótkiego czasu wyświetlania.
Alternatywą jest jeden główny baner i pod nim kilka kafelków z kategoriami lub drugorzędnymi promocjami. Kafelki są poniżej pierwszego ekranu, więc mogą ładować się leniwie, a klient widzi wszystkie oferty jednocześnie, bez czekania na kolejny slajd.
Co napisać na banerze, żeby był czytelny na telefonie
Na wersji mobilnej banera mieści się zwykle jedno krótkie hasło, jedna informacja o ofercie i przycisk. Hasło do kilku słów, korzyść zamiast ogólnika, na przykład „Darmowa dostawa od 200 zł” zamiast „Najlepsze produkty dla Ciebie”. Jeśli podajesz rabat lub termin promocji, muszą być zgodne z tym, co klient zobaczy po kliknięciu. Przycisk powinien mieć wyraźny kolor akcentu i treść mówiącą, co się stanie, na przykład „Zobacz kolekcję”. Przed publikacją obejrzyj baner na telefonie w pełnej jasności i w trybie oszczędzania baterii - drobny, jasny tekst na zdjęciu znika jako pierwszy.
Najczęstsze błędy w banerze na stronę główną sklepu
Większość problemów z hero bannerem widać dopiero na telefonie albo w raporcie szybkości. Poniżej objawy, które spotykamy najczęściej, i sposoby naprawy:
[#chart:pgr51c]
[#checklista] Przed publikacją banera na stronie głównej: 1) Wersja na komputer dopasowana do szerokości kontenera szablonu. 2) Osobna wersja na telefon w kadrze pionowym lub kwadratowym. 3) Plik WebP lub skompresowany JPG, bez PNG dla zdjęć. 4) Hasło czytelne na telefonie i w kontraście z tłem. 5) Brak leniwego ładowania dla pierwszego slajdu. 6) Wymiary obrazu podane w kodzie. 7) Test w PageSpeed Insights przed zmianą i po niej. 8) Link z banera prowadzi do właściwej kategorii lub promocji.
Jak Vinson pomaga z banerem na stronę główną sklepu
Projektujemy grafiki dla e-commerce: miniatury i galerie ofert, banery, identyfikację sklepu i materiały reklamowe. Hero banner przygotowujemy w wersjach na komputer i telefon, dopasowanych do szablonu sklepu, z eksportem w lekkich formatach i wskazówkami dla osoby, która wdraża go na stronie. Dbamy, żeby baner był spójny z logo, kolorami i kreacjami reklamowymi marki. Więcej o tym, jak pracujemy, przeczytasz na stronie projektowanie graficzne dla e-commerce.
Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami. Jeśli projektujesz całą oprawę sklepu, zajrzyj też do tekstu o tym, jak zaprojektować logo dla sklepu internetowego.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć baner na stronę główną sklepu?
Rozmiar banera zależy od szablonu sklepu - sprawdź szerokość kontenera, w którym się wyświetla, i to, czy szablon nie przycina grafiki. Na komputer zwykle przygotowuje się szeroki kadr, na przykład zbliżony do 3:1, a na telefon osobną wersję pionową lub kwadratową. Jeśli platforma podaje zalecane wymiary dla modułu, trzymaj się ich.
Ile może ważyć hero banner w sklepie internetowym?
Nie ma oficjalnego limitu wagi banera, ale to on zwykle jest największym elementem pierwszego ekranu i wpływa na wskaźnik LCP. Zapisz go w WebP lub skompresowanym JPG, w szerokości dopasowanej do obszaru wyświetlania, i przygotuj mniejszą wersję na telefon. Efekt sprawdź w PageSpeed Insights.
Czy baner na stronie głównej spowalnia sklep?
Może, jeśli jest ciężki, ładuje się leniwie albo jest dodany jako tło przez CSS lub skrypt. Według web.dev dobry LCP to 2,5 sekundy lub mniej. Lekki plik, wysoki priorytet pobierania i podane wymiary w kodzie sprawiają, że baner nie pogarsza wyników szybkości.
Czy lepiej mieć slider czy jeden baner na stronie głównej?
Jeden baner jest zwykle lżejszy i czytelniejszy, bo klient od razu widzi najważniejszą ofertę. Slider ma sens, gdy masz dwie lub trzy równie ważne promocje, ale ukryte slajdy powinny mieć niski priorytet pobierania. Dobrą alternatywą jest jeden baner i kafelki z kategoriami pod nim.
W jakim formacie zapisać baner na stronę sklepu?
Dla banera ze zdjęciem najlepiej sprawdza się WebP, który według Google jest o 25-34% mniejszy od porównywalnego JPEG. Jeśli platforma go nie obsługuje, użyj skompresowanego JPG. PNG zostaw dla prostych grafik z jednolitymi kolorami lub przezroczystością.
Baner na stronę główną sklepu to grafika, która ma jednocześnie przyciągać uwagę i ładować się błyskawicznie. Jeśli chcesz przygotować hero banner w wersjach na komputer i telefon, spójny z resztą marki, zajrzyj na stronę projektowania graficznego dla e-commerce.
Ile może ważyć baner na stronę główną sklepu
Ani Google, ani platformy sklepowe nie podają jednego limitu wagi dla hero bannera. Liczy się efekt: jak szybko największy element pierwszego ekranu pojawi się u klienta. W praktyce jest to suma czasu połączenia z serwerem, pobrania pliku i jego wyświetlenia. Waga pliku to część tego wyniku, na którą grafik ma bezpośredni wpływ.
Dobrym punktem wyjścia jest myślenie o budżecie pierwszego ekranu - ile danych musi pobrać telefon, zanim klient zobaczy gotową stronę. Baner zwykle zajmuje w tym budżecie największą część. Poniżej przykład, jak może wyglądać taki podział przed optymalizacją i po niej:
[#chart:pgr51b]
Najczęstsze przyczyny zbyt ciężkiego banera są proste: plik zapisany jako PNG mimo że zawiera zdjęcie, rozdzielczość dużo większa niż obszar wyświetlania, brak kompresji albo pięć slajdów, z których każdy jest pobierany od razu. Każdą z nich da się usunąć bez widocznej utraty jakości.
Jaki format pliku wybrać do banera
WebP - według dokumentacji Google pliki WebP ze stratną kompresją są o 25-34% mniejsze niż porównywalne pliki JPEG, a bezstratne o 26% mniejsze niż PNG. To dobry domyślny wybór dla banera ze zdjęciem.
AVIF - nowszy format, który web.dev wymienia obok WebP jako bardziej wydajny; warto go użyć, jeśli obsługuje go Twoja platforma.
JPG - bezpieczny wybór, gdy platforma nie przyjmuje WebP; ustaw kompresję i sprawdź, czy tekst na grafice pozostaje ostry.
PNG - tylko dla grafik z dużymi jednolitymi plamami koloru lub przezroczystością; dla zdjęcia zwykle daje najcięższy plik.
Przy wyborze formatu i kompresji ważna jest jeszcze jedna zasada: tekst hasła lepiej umieścić w kodzie strony niż w grafice, jeśli pozwala na to szablon. Wtedy plik może być mocniej skompresowany, a hasło zostaje ostre i czytelne dla wyszukiwarki. Jeśli tekst musi być częścią grafiki, dobierz kolory zgodnie z paletą kolorów marki sklepu i zadbaj o kontrast z tłem.
Jak baner wpływa na szybkość strony głównej sklepu
Largest Contentful Paint, czyli LCP, to wskaźnik Core Web Vitals, który mierzy czas wyświetlenia największego obrazu lub bloku tekstu widocznego na pierwszym ekranie. Na stronie głównej sklepu takim elementem jest najczęściej właśnie hero banner. Według web.dev dobry LCP to 2,5 sekundy lub mniej, wynik powyżej 4 sekund jest oceniany jako słaby, a mierzy się go dla 75. percentyla odsłon, osobno na telefonach i komputerach (sprawdź aktualne wytyczne).
Liczą się też przesunięcia układu. Jeśli baner nie ma zarezerwowanego miejsca, strona najpierw ładuje się bez niego, a potem treść przeskakuje w dół. Wskaźnik CLS mierzy takie przesunięcia, a web.dev zaleca wynik 0,1 lub mniej i podawanie atrybutów width i height dla obrazów albo rezerwowanie miejsca przez CSS aspect-ratio.
Wdrożenie banera - co przekazać programiście
Bez leniwego ładowania. Web.dev wprost zaleca, by nie ustawiać loading="lazy" dla obrazów widocznych na pierwszym ekranie, zwłaszcza dla elementu LCP.
Wysoki priorytet. Atrybut fetchpriority="high" na banerze pomaga przeglądarce pobrać go wcześniej; web.dev ostrzega, że nadanie go więcej niż jednemu lub dwóm obrazom traci sens.
Obraz w HTML, nie w CSS. Grafika w atrybucie src lub srcset w kodzie strony jest wykrywana szybciej niż tło dodane przez plik CSS lub skrypt.
Wersje responsywne. Elementy picture i srcset pozwalają wysłać na telefon mniejszy plik w kadrze pionowym, a na komputer szeroki.
Wymiary w kodzie. Atrybuty width i height lub aspect-ratio rezerwują miejsce i chronią przed przeskakiwaniem treści.
[#tip] Sprawdź stronę główną w PageSpeed Insights przed wgraniem nowego banera i po nim. Narzędzie wskazuje, który element jest elementem LCP, i podpowiada, czy obraz ma zbyt duże wymiary, nieoptymalny format albo leniwe ładowanie. To najszybszy sposób, żeby sprawdzić, czy nowa kreacja nie pogorszyła wyników.
Slider czy jeden baner na stronie głównej
Slider kusi, bo pozwala pokazać kilka promocji naraz. Ma jednak koszty. Każdy dodatkowy slajd to kolejny plik, a jeśli szablon pobiera wszystkie od razu, waga pierwszego ekranu rośnie kilkukrotnie. Web.dev radzi, by ukrytym slajdom karuzeli nadawać niski priorytet pobierania, właśnie po to, żeby nie konkurowały z pierwszym obrazem.
Z punktu widzenia klienta automatycznie zmieniające się slajdy często są pomijane - zanim przeczyta hasło, grafika się zmienia. Na telefonie przewijanie w bok bywa też mylone z przewijaniem strony. Jeśli zostajesz przy sliderze, ogranicz go do dwóch lub trzech slajdów, pierwszy traktuj jako najważniejszy i nie ustawiaj zbyt krótkiego czasu wyświetlania.
Alternatywą jest jeden główny baner i pod nim kilka kafelków z kategoriami lub drugorzędnymi promocjami. Kafelki są poniżej pierwszego ekranu, więc mogą ładować się leniwie, a klient widzi wszystkie oferty jednocześnie, bez czekania na kolejny slajd.
Co napisać na banerze, żeby był czytelny na telefonie
Na wersji mobilnej banera mieści się zwykle jedno krótkie hasło, jedna informacja o ofercie i przycisk. Hasło do kilku słów, korzyść zamiast ogólnika, na przykład „Darmowa dostawa od 200 zł” zamiast „Najlepsze produkty dla Ciebie”. Jeśli podajesz rabat lub termin promocji, muszą być zgodne z tym, co klient zobaczy po kliknięciu. Przycisk powinien mieć wyraźny kolor akcentu i treść mówiącą, co się stanie, na przykład „Zobacz kolekcję”. Przed publikacją obejrzyj baner na telefonie w pełnej jasności i w trybie oszczędzania baterii - drobny, jasny tekst na zdjęciu znika jako pierwszy.
Najczęstsze błędy w banerze na stronę główną sklepu
Większość problemów z hero bannerem widać dopiero na telefonie albo w raporcie szybkości. Poniżej objawy, które spotykamy najczęściej, i sposoby naprawy:
[#chart:pgr51c]
[#checklista] Przed publikacją banera na stronie głównej: 1) Wersja na komputer dopasowana do szerokości kontenera szablonu. 2) Osobna wersja na telefon w kadrze pionowym lub kwadratowym. 3) Plik WebP lub skompresowany JPG, bez PNG dla zdjęć. 4) Hasło czytelne na telefonie i w kontraście z tłem. 5) Brak leniwego ładowania dla pierwszego slajdu. 6) Wymiary obrazu podane w kodzie. 7) Test w PageSpeed Insights przed zmianą i po niej. 8) Link z banera prowadzi do właściwej kategorii lub promocji.
Jak Vinson pomaga z banerem na stronę główną sklepu
Projektujemy grafiki dla e-commerce: miniatury i galerie ofert, banery, identyfikację sklepu i materiały reklamowe. Hero banner przygotowujemy w wersjach na komputer i telefon, dopasowanych do szablonu sklepu, z eksportem w lekkich formatach i wskazówkami dla osoby, która wdraża go na stronie. Dbamy, żeby baner był spójny z logo, kolorami i kreacjami reklamowymi marki. Więcej o tym, jak pracujemy, przeczytasz na stronie projektowanie graficzne dla e-commerce.
Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami. Jeśli projektujesz całą oprawę sklepu, zajrzyj też do tekstu o tym, jak zaprojektować logo dla sklepu internetowego.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć baner na stronę główną sklepu?
Rozmiar banera zależy od szablonu sklepu - sprawdź szerokość kontenera, w którym się wyświetla, i to, czy szablon nie przycina grafiki. Na komputer zwykle przygotowuje się szeroki kadr, na przykład zbliżony do 3:1, a na telefon osobną wersję pionową lub kwadratową. Jeśli platforma podaje zalecane wymiary dla modułu, trzymaj się ich.
Ile może ważyć hero banner w sklepie internetowym?
Nie ma oficjalnego limitu wagi banera, ale to on zwykle jest największym elementem pierwszego ekranu i wpływa na wskaźnik LCP. Zapisz go w WebP lub skompresowanym JPG, w szerokości dopasowanej do obszaru wyświetlania, i przygotuj mniejszą wersję na telefon. Efekt sprawdź w PageSpeed Insights.
Czy baner na stronie głównej spowalnia sklep?
Może, jeśli jest ciężki, ładuje się leniwie albo jest dodany jako tło przez CSS lub skrypt. Według web.dev dobry LCP to 2,5 sekundy lub mniej. Lekki plik, wysoki priorytet pobierania i podane wymiary w kodzie sprawiają, że baner nie pogarsza wyników szybkości.
Czy lepiej mieć slider czy jeden baner na stronie głównej?
Jeden baner jest zwykle lżejszy i czytelniejszy, bo klient od razu widzi najważniejszą ofertę. Slider ma sens, gdy masz dwie lub trzy równie ważne promocje, ale ukryte slajdy powinny mieć niski priorytet pobierania. Dobrą alternatywą jest jeden baner i kafelki z kategoriami pod nim.
W jakim formacie zapisać baner na stronę sklepu?
Dla banera ze zdjęciem najlepiej sprawdza się WebP, który według Google jest o 25-34% mniejszy od porównywalnego JPEG. Jeśli platforma go nie obsługuje, użyj skompresowanego JPG. PNG zostaw dla prostych grafik z jednolitymi kolorami lub przezroczystością.
Baner na stronę główną sklepu to grafika, która ma jednocześnie przyciągać uwagę i ładować się błyskawicznie. Jeśli chcesz przygotować hero banner w wersjach na komputer i telefon, spójny z resztą marki, zajrzyj na stronę projektowania graficznego dla e-commerce.
Aleksandra Marecka
Head of Digital Marketing
Projektuje i skaluje strategie marketingowe e-commerce: social media, e-mail, content. Optymalizuje działania pod zwrot z inwestycji.
Projektuje i skaluje strategie marketingowe e-commerce: social media, e-mail, content. Optymalizuje działania pod zwrot z inwestycji.
Projektowanie graficzne dla e-commerce
Aleksandra i nasz zespół pomogą Ci wdrożyć to na Twoim koncie - bez zobowiązań.
- Analiza Twojego konta i obecnych działań
- Konkretny plan poprawek do wdrożenia
- Bezpłatna konsultacja – bez zobowiązań
Przeczytaj także
Więcej porad z naszej bazy wiedzy - przesuń, aby zobaczyć kolejne artykuły.
Masz pytania? Chętnie porozmawiamy!
Masz pytania? Chętnie porozmawiamy!
Odpowiadamy w ciągu 24 godzin w dni robocze. Pierwsza rozmowa jest bezpłatna i do niczego nie zobowiązuje.
Masz pytania? Chętnie porozmawiamy!
Odpowiadamy w ciągu 24 godzin w dni robocze. Pierwsza rozmowa jest bezpłatna i do niczego nie zobowiązuje.
Bartłomiej Stokłosa
CEO & Founder
"Jeżeli czegoś nie da się zrobić, potrzebny jest ktoś, kto o tym nie wie - przyjdzie i to zrobi."
Bartłomiej Stokłosa
CEO & Founder
"Jeżeli czegoś nie da się zrobić, potrzebny jest ktoś, kto o tym nie wie - przyjdzie i to zrobi."
Wybierz dogodny termin w kalendarzu - bez wymiany maili w tę i z powrotem.
Napisz do nas
Opisz krótko, czego potrzebujesz - oddzwonimy lub odpiszemy w ciągu 24 godzin w dni robocze.
Na zapytanie odpowie Aleksandra Marecka, Head of Digital MarketingNapisz do nas
Opisz krótko, czego potrzebujesz - oddzwonimy lub odpiszemy w ciągu 24 godzin w dni robocze.
Na zapytanie odpowie Aleksandra Marecka, Head of Digital Marketing