W przeciwieństwie do mediów społecznościowych, które mają sztywne i dobrze udokumentowane specyfikacje, strony mają zmienne, responsywne layouty i bardzo różne konteksty użycia. Baner na stronie głównej zajmuje pełną szerokość ekranu. Zdjęcie produktu wyświetli się w 400 px albo w 800 px, zależnie od urządzenia. Obraz na blogu mieści się w kolumnie tekstu.
Nie ma jednego poprawnego rozmiaru „obrazu na stronę” — są za to zalecane zakresy dla każdego kontekstu, a ich znajomość decyduje o tym, czy strona jest szybka i dobrze wygląda, czy wolna, z rozmytymi albo zbyt ciężkimi plikami.
Dlaczego rozmiar obrazu wpływa na twoją stronę
Nieoptymalizowane obrazy powodują dwa różne problemy:
- Obrazy o zbyt dużych wymiarach: przeglądarka pobiera plik 4000 px, żeby wyświetlić go w 800 px — 80% przesłanych danych ląduje od razu w koszu. Strona zwalnia, a wizualnie nic na tym nie zyskuje.
- Obrazy o zbyt dużej wadze (KB/MB): nawet przy poprawnych wymiarach nieskompresowane zdjęcie potrafi ważyć 3 MB zamiast 150 KB przy identycznej jakości na ekranie.
Każdy z nich rozwiązuje się inaczej: pierwszy wymaga zmiany rozmiaru (dopasowania pikseli), drugi — kompresji (zmniejszenia wagi bez ruszania pikseli). W praktyce najlepszy efekt daje zastosowanie obu po kolei.
💡 Zasada ogólna: maksymalna szerokość obrazu w sieci rzadko musi przekraczać 1920 px — czyli szerokość monitora Full HD. Dla obrazów, które nigdy nie zajmują całego ekranu (kolumny, siatki produktów, miniatury), granica jest jeszcze niższa. Powyżej marnujesz transfer i spowalniasz ładowanie.
Tabela wymiarów według rodzaju obrazu
| Rodzaj obrazu | Zalecane wymiary | Optymalna waga | Format |
|---|---|---|---|
| Baner / hero (pełna szerokość) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Baner na komputery (layout w ramce) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Baner mobilny | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Zdjęcie produktu (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Miniatura produktu | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Obraz w artykule / na blogu | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Miniatura wpisu (na liście) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo w nagłówku | 200–400 px szerokości | 5–30 KB | SVG / PNG / WebP |
| Ikony interfejsu | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | po 1–10 KB | .ico + PNG |
| Open Graph (podgląd w mediach społecznościowych) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Tło sekcji | 1920 × zmienna wysokość | 100–300 KB | WebP / JPG |
| Zdjęcie profilowe / awatar (na stronie) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Zdjęcie w opinii klienta | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Wymiary według rodzaju strony
Strony firmowe i portfolia
Strony firmowe mają zwykle maksymalną szerokość treści między 960 a 1440 px. Banery i sekcje hero zajmują zwykle pełną szerokość layoutu, więc 1440–1920 px w zupełności wystarcza na współczesne monitory. Obrazy w sekcjach (zdjęcia zespołu, biura, usług) rzadko muszą przekraczać 800 px szerokości.
- Baner główny: 1920 × 700–900 px, poniżej 200 KB
- Zdjęcie zespołu: 400–600 × 400–600 px, poniżej 60 KB
- Zdjęcie usługi lub sekcji: 800–1200 × 500–700 px, poniżej 100 KB
Blogi i portale treściowe
Na blogach kolumna treści rzadko przekracza 760–800 px szerokości. Obraz wyróżniający o szerokości 1200 px z zapasem pokrywa każdy responsywny layout, bez marnowania transferu. Miniatury na liście wpisów są jeszcze mniejsze — zwykle 300–500 px.
- Obraz wyróżniający: 1200 × 630 px, poniżej 100 KB
- Obrazy w treści artykułu: 800–1200 px szerokości, po mniej niż 80 KB
- Miniatura na liście wpisów: 400 × 250 px, poniżej 30 KB
E-commerce i sklepy internetowe
W e-commerce zdjęcia produktów są elementem najbardziej krytycznym — to główne narzędzie przekonywania klienta. Rozdzielczość musi wystarczyć do powiększenia (jeśli sklep ma taką funkcję), a jednocześnie waga musi być pod kontrolą, żeby nie spowalniać list produktów, które ładują wiele obrazów naraz.
- Zdjęcie główne produktu (kwadratowe): 800–1200 × 800–1200 px, 80–150 KB w WebP
- Dodatkowe zdjęcia produktu: ten sam rozmiar co zdjęcie główne
- Miniatura w siatce produktów: 300–500 × 300–500 px, 20–50 KB
- Baner kategorii lub promocji: 1440 × 400–600 px, 80–150 KB
🛍️ W e-commerce: zawsze stosuj białe lub neutralne tło na zdjęciach produktów — łatwiej je skompresować (duże obszary jednolitego koloru kompresują się znakomicie), a przy okazji zdjęcia od różnych dostawców wyglądają spójnie i łatwiej je porównać w koszyku.
Landing page
Landing page projektuje się pod jedno działanie konwersyjne, a szybkość jest tu kluczowa: badania pokazują, że każda dodatkowa sekunda ładowania obniża konwersję o 7–12%. Obrazy na takich stronach trzeba optymalizować bezwzględnie.
- Hero i tło: 1440–1920 px szerokości, poniżej 150 KB — najwyższy priorytet
- Zdjęcie produktu lub usługi: 600–800 px, poniżej 80 KB
- Ikony korzyści: SVG, kiedy tylko się da
- Zdjęcie przy opinii: 80–120 px, okrągłe, poniżej 15 KB
Wpływ mnożnika 2× (ekrany Retina i HiDPI)
Ekrany Retina (Apple) i HiDPI (pozostali producenci) mają podwojoną gęstość pikseli, czyli mieszczą ich więcej na calu niż zwykłe monitory. Żeby obraz był na nich ostry, musi mieć dwa razy więcej pikseli niż miejsce, w którym się wyświetla.
Przykład: obraz wyświetlany w 400 px szerokości potrzebuje na ekranie Retina pliku o szerokości 800 px. Wgranie samych 400 px kończy się lekko rozmytym obrazem na iPhone'ach i MacBookach.
Najprościej jest przygotować obrazy o podwójnej maksymalnej szerokości wyświetlania i porządnie je skompresować, żeby waga nie urosła w tej samej proporcji. Dobrze skompresowany plik 800 px w WebP zwykle waży mniej niż 400 px w nieoptymalizowanym PNG.
Właściwy format do każdej sytuacji
| Sytuacja | Optymalny format | Dlaczego |
|---|---|---|
| Fotografie (produkt, baner, zespół) | WebP stratny | 25–35% lżejszy niż JPG przy porównywalnej jakości |
| Logo w nagłówku | SVG | Wektor, dowolny rozmiar bez straty, najmniejszy plik |
| Logo, gdy SVG nie jest obsługiwany | PNG z przezroczystym tłem | Zachowuje potrzebną przezroczystość |
| Ikony interfejsu | SVG | Skalowalny, animowany przez CSS, znikomy rozmiar pliku |
| Zrzut ekranu z tekstem | WebP bezstratny lub PNG | Ostry tekst — JPG tworzy artefakty wokół liter |
| Open Graph / podgląd linku | JPG lub WebP | Maksymalna zgodność z serwisami generującymi podgląd |
| Tło z przezroczystością | WebP z kanałem alfa lub PNG | Jedyny format z przezroczystością poza PNG |
Jak przygotować obrazy przed wgraniem
Zalecana kolejność dla każdego obrazu przeznaczonego na stronę:
- Ustal wymiary docelowe. Ile miejsca ten obraz zajmie w layoucie w najszerszym wariancie? Skorzystaj z tabeli powyżej albo zbadaj element w przeglądarce (F12 → zaznacz miejsce obrazu).
- Przeskaluj do podwójnej szerokości wyświetlania. Tyle wystarczy, żeby pokryć ekrany Retina bez zbędnego marnotrawstwa. Dokładną szerokość w pikselach ustawisz w narzędziu Zmień rozmiar.
- Przekonwertuj do WebP. Jeśli twoja strona albo CMS obsługuje WebP (współczesne robią to niemal zawsze), zrób to przed wgraniem. Szybko przekonwertujesz plik w Konwertuj.
- Skompresuj. Zbij wagę pliku do zalecanych zakresów. Narzędzie Kompresuj optymalizuje JPG, PNG i WebP bez zauważalnej straty jakości.
- Sprawdź efekt. Otwórz skompresowany plik i porównaj go z oryginałem. Jeśli różnicy nie widać, jest dobrze.
Przygotuj obrazy na swoją stronę już teraz
Zmień rozmiar i skompresuj obrazy ze swojej strony w kilka sekund — bez instalacji i bez zakładania konta.
Jak sprawdzić obecny rozmiar obrazów na swojej stronie
Żeby ocenić, czy obrazy na twojej stronie są zoptymalizowane, skorzystaj z tych narzędzi:
- Google PageSpeed Insights (pagespeed.web.dev): analizuje adres URL i wypisuje obrazy, które da się odchudzić, wraz z szacowanym zyskiem w KB dla każdego z nich.
- Chrome DevTools → Network → Img: przefiltruj żądania po typie obrazu i sprawdź wagę każdego wczytanego pliku. Posortuj po rozmiarze, żeby wyłapać najcięższe.
- WebPageTest.org: szczegółowa analiza z wykresem waterfall: które obrazy ładują się jako pierwsze i ile to trwa.
Najczęstsze błędy w rozmiarze obrazów na stronach
- Wgrywanie zdjęć prosto z aparatu: pliki z aparatu mają 3–12 MB i 4000–8000 px szerokości. Żadna strona nie potrzebuje takich obrazów bez wcześniejszej zmiany rozmiaru i kompresji.
- Zapisywanie zdjęć w PNG: zdjęcie w PNG jest 5–10 razy cięższe niż w JPG czy WebP, a wizualnie nic nie zyskuje. PNG zostaw dla obrazów z przezroczystością i grafik o ostrych krawędziach.
- Brak mobilnej wersji obrazów: serwowanie obrazu 1920 px telefonowi o szerokości 390 px to czyste marnotrawstwo. Atrybut
srcsetw HTML załatwia to automatycznie. - Pominięcie obrazów Open Graph: kiedy ktoś udostępnia stronę na WhatsAppie albo LinkedInie bez ustawionego obrazu podglądu, platforma pokazuje ogólną albo pustą miniaturę. Zawsze ustawiaj znacznik
og:imagez obrazem 1200×630 px. - Logo w JPG: wymuszone białe tło JPG rzuca się w oczy wszędzie tam, gdzie tło jest kolorowe albo przezroczyste. Logo zawsze w SVG albo PNG.