Dobrze dobrane wymiary grafik decydują o tym, czy strona wygląda profesjonalnie na laptopie, telefonie i dużym monitorze, czy tylko dobrze wypada w projekcie. Zbyt małe pliki tracą ostrość, zbyt duże spowalniają ładowanie, a źle dobrana proporcja potrafi zepsuć cały układ. Poniżej pokazuję, jak dobierać rozmiary dla bannerów, zdjęć w treści, miniaturek, logo i favicon, żeby projekt strony był jednocześnie estetyczny i technicznie poprawny.
Najważniejsze liczby, które warto zapamiętać
- Hero i pełnoszerokie bannery najczęściej projektuję w szerokości 1600-1920 px.
- Grafiki w treści zwykle dobrze wypadają przy około 1200 px szerokości.
- Miniatury i kafelki najczęściej zaczynają się od 600-800 px po krótszym boku.
- Logo najlepiej trzymać jako SVG, a favicon przygotować jako kwadrat 48x48 px lub większy.
- Na ekrany o wysokiej gęstości pikseli warto mieć przynajmniej wariant 2x.
Co naprawdę oznacza rozmiar grafiki na stronie
W praktyce patrzę na trzy różne rzeczy: rozmiar źródłowy pliku, rozmiar wyświetlania w layoucie oraz proporcję obrazu. To ważne, bo plik 1200 x 800 px może świetnie działać w kolumnie o szerokości 600 px, ale w pełnoekranowym hero będzie już po prostu za mały. Z kolei obraz 2400 px szerokości bywa niepotrzebny, jeśli strona i tak nigdy nie pokaże go szerzej niż na 1200 px.
Piksele w pliku a piksele w layoucie
Na ekranach o większej gęstości pikseli, na przykład Retina, ten sam obraz może wymagać większego pliku, żeby zachować ostrość. Warto znać pojęcie devicePixelRatio, czyli stosunku pikseli fizycznych do pikseli CSS, bo właśnie ono tłumaczy, dlaczego ten sam obraz na dwóch ekranach nie zawsze wygląda tak samo. Jeśli sekcja ma 500 px szerokości, rozsądnym punktem wyjścia jest grafika około 1000 px szerokości, o ile nie robi się przez to niepotrzebnie ciężka.
Przeczytaj również: LG TV: Przeglądarka? Jak zainstalować i co gdy Chrome nie działa!
Proporcja bywa ważniejsza niż sama szerokość
W projektowaniu stron proporcja często rządzi bardziej niż konkretna liczba pikseli. Zdjęcia w układzie 16:9, 3:2 albo 1:1 zachowują się przewidywalnie przy responsywnym przycinaniu, więc łatwiej utrzymać spójność całej sekcji. Gdy proporcja jest przypadkowa, nawet poprawny wymiar nie uratuje kompozycji.
Skoro wiadomo już, co właściwie mierzyć, można przejść do konkretnych wartości dla najczęstszych elementów strony.
Najpraktyczniejsze rozmiary dla najczęstszych elementów strony
Jeśli mam wybrać tylko jeden bezpieczny rozmiar dla obrazu w treści, zwykle biorę 1200 px szerokości i proporcję 3:2. To wystarcza dla większości układów redakcyjnych, a jednocześnie nie robi z pliku niepotrzebnego giganta. Przy innych elementach strony trzymam się podobnej logiki: najpierw miejsce w layoucie, dopiero potem konkretna liczba pikseli.
| Element | Rozmiar źródłowy | Proporcja | Dlaczego tak |
|---|---|---|---|
| Hero / pełnoszeroki banner | 1600 x 900 px lub 1920 x 1080 px | 16:9 | Dobrze wygląda na szerokich ekranach i daje zapas jakości przy przycinaniu. |
| Grafika w treści artykułu | 1200 x 800 px lub 1200 x 675 px | 3:2 lub 16:9 | Łatwo skaluje się w kolumnie contentowej i zwykle wystarcza na desktop oraz mobile. |
| Miniatura / kafelek | 800 x 800 px lub 800 x 600 px | 1:1 lub 4:3 | Sprawdza się w siatkach kart, gdzie liczy się czytelność po zmniejszeniu. |
| Logo | SVG, a w razie potrzeby raster 512 x 512 px | Najczęściej zależna od projektu | SVG skaluje się bez utraty ostrości i jest najbezpieczniejsze dla identyfikacji wizualnej. |
| Favicon | 48 x 48 px, 32 x 32 px i 16 x 16 px | 1:1 | Google zaleca kwadrat o boku co najmniej 48 px, a mniejsze warianty nadal bywają potrzebne w przeglądarkach. |
| Grafika do podglądu linku | 1200 x 630 px | 1.91:1 | To bezpieczny układ dla większości serwisów społecznościowych i komunikatorów. |
W praktyce nie szukam jednego magicznego rozmiaru. Patrzę na szerokość kontenera, proporcję kadru i to, czy grafika ma działać w sekcji pełnoszerokiej, czy tylko w wąskiej kolumnie. Jeden układ miniaturek wygląda zwykle lepiej niż kilka przypadkowych wysokości obok siebie, nawet jeśli każdy plik osobno jest poprawny.
Takie podejście prowadzi naturalnie do kolejnego pytania, czyli jak przygotować kilka wariantów bez zamieniania strony w magazyn ciężkich plików.
Jak dopasowuję grafiki do responsywnego układu
Nie przygotowuję jednego pliku na wszystko, bo to zwykle kończy się albo rozmyciem na dużych ekranach, albo niepotrzebnym ciężarem na mobile. W praktyce sensowny zestaw to 3-4 warianty szerokości, na przykład 480, 768, 1200 i 1600 px, zależnie od tego, gdzie grafika ma być używana. Dla obrazu w treści wystarczą często dwa pliki, a dla dużego hero na stronie głównej zwykle dokładam co najmniej trzy.
- 1x przygotowuję dla standardowego wyświetlania w layoucie.
- 2x dodaję dla ekranów o większej gęstości pikseli, żeby obraz był ostry.
- 3x ma sens głównie przy detalicznych ikonach, ilustracjach lub wtedy, gdy obraz jest bardzo ważnym elementem interfejsu.
Technicznie pomaga tu srcset i sizes, czyli mechanizm, który pozwala przeglądarce dobrać właściwy plik do konkretnej szerokości ekranu i gęstości pikseli. Ja traktuję to jako sposób na połączenie estetyki z wydajnością, a nie jako dodatkowy gadżet dla dewelopera. Przy dobrze opisanych obrazach strona ładuje się szybciej, a użytkownik nie pobiera pliku większego, niż naprawdę potrzebuje.
W CSS pilnuję też, by obraz nie wychodził poza kontener, zwykle przez max-width: 100%; to prosty detal, ale bez niego nawet dobry plik może rozwalić układ na mniejszych ekranach. Ten sam obraz może więc mieć różne warianty, ale układ i proporcja muszą pozostać spójne. Właśnie od tego zależy, czy kolejny krok, czyli format pliku, rzeczywiście zadziała na korzyść projektu.
Jakie formaty najlepiej łączą się z konkretnym rozmiarem
Sam wymiar nie wystarcza, jeśli format jest źle dobrany. Grafika 1200 px w JPEG, WebP albo AVIF będzie zachowywała się inaczej niż ten sam obraz zapisany jako PNG, a logo w JPG prawie zawsze przegrywa z wersją SVG. Ja patrzę najpierw na rodzaj treści, a dopiero potem na piksele.
| Format | Najlepsze zastosowanie | Co daje | Na co uważać |
|---|---|---|---|
| SVG | Logo, ikony, proste ilustracje | Skaluje się bez utraty ostrości | Nie nadaje się do fotografii i bardzo złożonych obrazów. |
| AVIF | Zdjęcia, hero, duże bannery | Bardzo dobra kompresja przy wysokiej jakości | Wymaga sprawdzenia workflow i zgodności narzędzi. |
| WebP | Zdjęcia i grafiki webowe | Dobra jakość przy mniejszym rozmiarze pliku | Przy bardzo prostych kształtach czasem lepszy bywa PNG lub SVG. |
| PNG | Ikony, elementy z przezroczystością | Ostre krawędzie i alfa | Przy zdjęciach zwykle waży więcej niż WebP lub AVIF. |
| JPG | Zdjęcia, jeśli liczy się kompatybilność | Prosty i przewidywalny | Nie wspiera przezroczystości. |
Jeśli miałbym wskazać jedną regułę, to powiedziałbym tak: logo i interfejs projektuję jak wektor, zdjęcia jak raster, a bannery jak kompromis między jednym a drugim. To brzmi banalnie, ale właśnie tu najczęściej wygrywa albo przegrywa cały odbiór strony.
Format to jednak nie wszystko, bo te same pliki można zepsuć najprostszymi błędami już na etapie przygotowania.
Najczęstsze błędy, które psują nawet dobrze dobrane rozmiary
- Za mały plik źródłowy - obraz wygląda dobrze w edytorze, ale po powiększeniu na stronie robi się miękki i poszarpany.
- Jedna szerokość do wszystkiego - ten sam plik trafia do miniatury, sekcji hero i karty produktu, więc nigdzie nie jest naprawdę dopasowany.
- Tekst wpisany w grafikę - na desktopie bywa czytelny, ale po skalowaniu na mobile znika lub robi się zbyt drobny.
- Brak bezpiecznej strefy - ważny element wypada poza kadr po przycięciu w responsywnym układzie.
- Złe proporcje miniatur - zdjęcie ładne samo w sobie, ale w siatce kafelków wygląda chaotycznie.
- Niekwadratowy favicon - przeglądarka albo go przytnie, albo wyświetli nieczytelny fragment logo.
W praktyce najbardziej kosztowny jest pierwszy i czwarty błąd, bo trudno je zauważyć przed publikacją, a użytkownik widzi je od razu. Dlatego zawsze sprawdzam nie tylko sam plik, ale też to, co dzieje się z nim po osadzeniu w konkretnym komponencie.
To prowadzi do ostatniego etapu, czyli szybkiej kontroli przed wdrożeniem.
Co sprawdzam przed publikacją, żeby grafiki nie rozjechały projektu
Przed publikacją przechodzę przez prostą listę, która oszczędza późniejszych poprawek. Nie jest efektowna, ale działa, bo łapie błędy dokładnie tam, gdzie użytkownik je zobaczy.
- Sprawdzam podgląd na mobile i desktopie, a nie tylko w jednym szerokim oknie przeglądarki.
- Porównuję realny kadr z projektem i upewniam się, że najważniejszy fragment nie znika po przycięciu.
- Patrzę, czy obraz ma zapas jakości dla ekranów o większej gęstości pikseli.
- Weryfikuję, czy format pliku jest zgodny z typem grafiki, na przykład SVG dla logo i WebP lub AVIF dla zdjęć.
- Jeśli obraz niesie treść informacyjną, sprawdzam też alt i to, czy nie powinien być zastąpiony zwykłym tekstem HTML.
- Jeśli grafika nie jest kluczowa na starcie, ustawiam
loading="lazy", żeby nie blokowała pierwszego renderu.
Jeżeli muszę zacząć od jednego bezpiecznego zestawu, wybieram zwykle 1920 px dla pełnoekranowych bannerów, 1200 px dla grafik w treści, 800 px dla miniaturek roboczych i SVG dla elementów identyfikacji wizualnej. Taki komplet nie rozwiązuje wszystkiego, ale daje solidną bazę do większości projektów stron. Jeśli później trzeba go dopracować pod konkretny layout, robi się to już na zdrowych zasadach, a nie przez przypadkowe zgadywanie.
