Na większości stron obrazy są najcięższym elementem na stronie, często większym niż HTML, CSS i JavaScript razem wzięte. Jeśli strona wydaje się wolna, to obrazy są pierwszym miejscem, gdzie warto zajrzeć, a poprawki są zwykle szybkie.
Trzy techniki załatwiają niemal całą robotę: zmniejsz obraz do rozmiaru, w jakim faktycznie się wyświetla, skompresuj go i podaj w nowoczesnym formacie. Zastosowane razem regularnie tną wagę obrazów o 70% lub więcej.
Zmień rozmiar na taki, w jakim naprawdę wyświetlasz
To najczęstszy i najbardziej marnotrawny błąd. Zdjęcie prosto z aparatu może mieć 6000 pikseli szerokości, ale Twój artykuł pokazuje je w kolumnie o szerokości 800 pikseli. Przeglądarka pobiera całe sześć tysięcy pikseli, a potem większość z nich wyrzuca, gdy zmniejsza obraz, żeby się zmieścił.
Podanie obrazu o szerokości 6000 pikseli w miejscu na 800 pikseli może oznaczać pobranie od pięciu do dziesięciu razy więcej danych, niż trzeba. Rozwiązanie jest proste: zmień rozmiar pliku mniej więcej do szerokości, jaką zajmie, plus odrobina zapasu na ekrany o wysokiej gęstości.
Praktyczna zasada:
- Obraz-baner na pełną szerokość: 1600–2000 px szerokości aż nadto.
- Obraz w treści artykułu: 1000–1400 px.
- Miniatura: 300–500 px.
Skorzystaj z narzędzia do zmiany rozmiaru obrazu, żeby zmniejszyć każdy obraz, zanim w ogóle trafi na stronę. Blokuje ono proporcje, więc nic się nie rozciąga.
Skompresuj, żeby usunąć nadmiar
Gdy wymiary są już właściwe, kompresja usuwa detale, których oko nie widzi. Dla zdjęć jakość w okolicach 75–85% to złoty środek: plik gwałtownie chudnie, a obraz wygląda tak samo. Dla płaskich grafik i zrzutów ekranu zapisanych jako PNG redukcja liczby kolorów (kwantyzacja do 256 kolorów) potrafi skurczyć plik do ułamka pierwotnego rozmiaru.
Narzędzie do kompresji obrazów obsługuje jedno i drugie. Ponownie koduje JPEG i WebP według jakości, kwantyzuje pliki PNG i gwarantuje, że nigdy nie wyprodukuje pliku większego niż ten, od którego zacząłeś. Jeśli masz całą galerię, przepuść ją wsadowo i pobierz ZIP.
Przejdź na nowoczesny format
Sam wybór formatu potrafi zmniejszyć plik o połowę. Oto jak wypadają popularne opcje dla zdjęć.
| Format | Typowy rozmiar względem JPEG | Najlepszy do |
|---|---|---|
| JPEG | Punkt odniesienia | Uniwersalny plan awaryjny; zdjęcia |
| WebP | ~25–35% mniejszy | Zdjęcia i grafiki; szerokie wsparcie przeglądarek |
| AVIF | ~50% mniejszy | Zdjęcia, gdzie liczy się najmniejszy rozmiar |
| PNG | Znacznie większy dla zdjęć | Logo, ikony, płaskie grafiki, przezroczystość |
WebP to bezpieczny domyślny wybór w 2026 — każda aktualna przeglądarka go czyta i wygodnie bije JPEG. AVIF schodzi jeszcze niżej, ale koduje się dłużej i ma nieco węższe wsparcie. Narzędzie do konwersji obrazów pozwala celować w AVIF i po cichu wraca do WebP, gdy AVIF nie jest właściwym wyborem, więc dostajesz najlepszy dostępny wynik bez zgadywania.
Jedno ostrzeżenie: nie używaj PNG do zdjęć. PNG błyszczy przy logotypach, ikonach i wszystkim, co wymaga przezroczystości, ale przy zdjęciu potrafi być kilkukrotnie większy niż WebP o tej samej jakości.
Złóż to w całość
Niezawodny potok dla każdego obrazu przeznaczonego do sieci:
- Zmień rozmiar do szerokości wyświetlania (plus zapas na ekrany retina).
- Skonwertuj na WebP, albo AVIF, jeśli chcesz najmniejszy możliwy plik.
- Skompresuj przy jakości 75–85%, żeby zetrzeć resztki nadmiaru.
Zrób to, a zdjęcie z aparatu ważące 5 MB może stać się plikiem WebP o wadze 120 KB, który w kolumnie artykułu wygląda identycznie. Pomnóż to przez całą stronę, a różnica w czasie ładowania będzie dramatyczna.
Wszystko działa w Twojej przeglądarce dzięki Canvas i WebAssembly, więc nic nie jest przesyłane, a narzędzia działają offline po pierwszej wizycie. To znaczy, że możesz przygotować folder obrazów pod swoją stronę bez oddawania ich jakiemukolwiek serwerowi.
Poza samymi plikami
Pomagają jeszcze dwa nawyki, a nic nie kosztują:
- Leniwie ładuj obrazy poniżej linii zgięcia za pomocą
loading="lazy", żeby przeglądarka pobierała je dopiero, gdy czytelnik przewinie w ich pobliże. - Ustaw atrybuty width i height, żeby układ nie skakał podczas ładowania obrazów, co dodatkowo poprawia Twój wynik Core Web Vitals.
Chcesz wiedzieć dokładnie, które obrazy ciągną stronę w dół? Nasz poradnik SEO dla obrazów omawia audyt, a sprawdzenie szybkości strony wypisze najcięższe zasoby, żebyś wiedział, gdzie celować najpierw.