Optymalizacja obrazków to najprostszy sposób, żeby strona ładowała się szybciej. U większości firm to właśnie zdjęcia ważą najwięcej — często więcej niż cały kod strony razem wzięty.
Dobra wiadomość: da się je odchudzić nawet o połowę bez widocznej utraty jakości. Pokażę Ci, jak to zrobić formatami WebP i AVIF oraz lazy loadingiem.
Dlaczego obrazki spowalniają stronę
Otwórz dowolną stronę firmową i sprawdź, co waży najwięcej. Niemal zawsze będą to obrazki — zwykle ponad połowa całej wagi strony. Wolne ładowanie to najczęściej nie „ciężki kod", tylko zdjęcia wrzucone prosto z aparatu.
Dlaczego to problem? Bo obrazek to zwykle największy element widoczny na ekranie — i to on decyduje o LCP (Largest Contentful Paint), jednym z Core Web Vitals. Im cięższe zdjęcie, tym dłużej użytkownik patrzy na pustą stronę.
A wolna strona kosztuje realne pieniądze:
- Klienci uciekają — wielu zamyka stronę, zanim się załaduje, zwłaszcza na telefonie.
- Google obniża pozycję — szybkość to czynnik rankingowy, a wyszukiwarka ocenia stronę głównie po wersji mobilnej.
- Płacisz za transfer — cięższe pliki to większe zużycie łącza i hostingu.
Wyobraź sobie stronę z trzema zdjęciami po 2 MB każde. Na komórce w gorszym zasięgu taki nagłówek potrafi ładować się kilka sekund. Po optymalizacji te same zdjęcia mogą ważyć łącznie poniżej 1 MB — i wyglądać tak samo.
To nie jest kosmetyka. To często największa pojedyncza poprawa, jaką da się zrobić na stronie małej firmy.
Format ma znaczenie WebP i AVIF
Najwięcej zyskasz, zmieniając sam format pliku. Stary, dobry JPEG działa wszędzie, ale jest nieefektywny. Nowoczesne formaty robią to samo, ważąc dużo mniej.
| Format | Waga vs JPEG | Wsparcie przeglądarek | Kiedy używać |
|---|---|---|---|
| JPEG | punkt odniesienia | 100% | stary standard dla zdjęć |
| PNG | często cięższy | 100% | grafiki z przezroczystością, logo |
| WebP | 25–34% lżejszy | ~97% | bezpieczny domyślny wybór |
| AVIF | ~50% lżejszy | ~95% | najlepsza kompresja, format główny |
WebP to dziś bezpieczny standard. Obsługują go wszystkie aktualne przeglądarki, a obrazki są o jedną czwartą do jednej trzeciej lżejsze od JPEG, bez widocznej różnicy w jakości.
AVIF idzie krok dalej — bywa o połowę lżejszy od JPEG i wyraźnie lżejszy od WebP. Jego wsparcie w 2026 roku przekracza już 95%, więc spokojnie można go ustawić jako format główny.
Najlepsze podejście łączy oba. Serwujesz AVIF jako pierwszy wybór, a WebP (lub JPEG) jako rezerwę dla starszych urządzeń. W HTML robi to znacznik <picture> z kilkoma źródłami — przeglądarka sama wybiera najlżejszy format, który potrafi wyświetlić.
Nie musisz konwertować nic ręcznie zdjęcie po zdjęciu. Za chwilę pokażę narzędzia i wtyczki, które robią to automatycznie.
Lazy loading czyli ładowanie na żądanie
Drugi sposób na szybszą stronę to lazy loading, czyli leniwe ładowanie. Zamiast pobierać od razu wszystkie zdjęcia, przeglądarka ładuje tylko te, które są widoczne. Reszta doczytuje się dopiero, gdy użytkownik przewinie do nich stronę.
Efekt? Strona pokazuje się szybciej, bo na start pobiera mniej danych. Przy długiej stronie z galerią różnica bywa ogromna.
Najlepsze jest to, że nie potrzebujesz żadnej wtyczki. Wystarczy jeden atrybut w kodzie obrazka:
<img src="/zdjecie.webp" loading="lazy" alt="opis zdjęcia">Atrybut loading="lazy" jest wbudowany w przeglądarki i działa praktycznie wszędzie.
Jest jednak jeden ważny wyjątek. Nie stosuj opóźnionego ładowania (lazy loading) dla głównego zdjęcia widocznego od razu po otwarciu strony, bez przewijania (najczęściej jest to baner w nagłówku). To właśnie ono najczęściej decyduje o LCP. Jeśli każesz mu się doczytywać leniwie, pogorszysz wynik, zamiast go poprawić.
Prosta zasada:
- zdjęcia widoczne od razu (hero, logo) — ładuj normalnie, priorytetowo,
- zdjęcia niżej na stronie (galeria, treść, stopka) —
loading="lazy".
Lazy loading i lekkie formaty grają w jednej drużynie. Format zmniejsza wagę każdego pliku, a lazy loading sprawia, że na start pobierasz ich mniej.
Rozmiar i kompresja obrazków
Zanim w ogóle pomyślisz o formacie, sprawdź wymiary. Najczęstszy błąd to wrzucanie zdjęcia 4000 px szerokości w miejsce, gdzie wyświetla się ono na 800 px. Przeglądarka i tak je pomniejszy — ale najpierw pobierze cały, ogromny plik.
Dwie rzeczy do ogarnięcia:
- Dopasuj wymiary — zdjęcie nie powinno być dużo większe niż miejsce, w którym się wyświetla.
- Skompresuj — kompresja stratna przy jakości 75–85% zmniejsza wagę o kilkadziesiąt procent, a oko nie widzi różnicy.
Do tego dochodzą obrazy responsywne. Atrybut srcset pozwala podać kilka wersji tego samego zdjęcia, a przeglądarka pobiera tę pasującą do ekranu. Telefon dostaje mały plik, duży monitor większy. Nikt nie pobiera więcej, niż potrzebuje.
Darmowe narzędzia, które realnie pomagają:
- Squoosh (od Google) — konwersja i kompresja w przeglądarce, świetna do pojedynczych zdjęć,
- TinyPNG — szybka kompresja JPEG i PNG,
- ShortPixel, ImageOptim — wsadowa obróbka wielu plików naraz.
Mała rada z praktyki: zoptymalizuj zdjęcie raz, zanim wrzucisz je na stronę. Dużo łatwiej zadbać o wagę na wejściu niż naprawiać galerię z setką ciężkich plików po fakcie.
Jak to wdrożyć na swojej stronie
Teoria teorią — zobaczmy, jak zrobić to u siebie. Sposób zależy od tego, na czym stoi Twoja strona.
WordPress. Od wersji 5.5 lazy loading działa automatycznie. Konwersję do WebP i AVIF dorzucisz wtyczką — popularne to ShortPixel, Imagify, Smush czy EWWW Image Optimizer. Ustawiasz raz, a one przerabiają nowe i stare zdjęcia. Jeśli wahasz się nad samą platformą, pomoże artykuł WordPress czy strona statyczna.
Joomla. Tu również znajdziesz rozszerzenia do automatycznej konwersji i kompresji, a lazy loading dodasz atrybutem lub wtyczką. W sklepie na HikaShop szczególnie zadbaj o zdjęcia produktów — to one ważą najwięcej i wprost wpływają na sprzedaż.
CDN i image CDN. Usługi takie jak Cloudflare czy Cloudinary potrafią konwertować i pomniejszać obrazki „w locie", już na serwerze. Zero pracy ręcznej, a każdy użytkownik dostaje format dopasowany do swojej przeglądarki.
Niezależnie od metody, pamiętaj o tekście alternatywnym (alt). Opisuj na nim, co jest na zdjęciu — to pomaga w Google i jest niezbędne dla osób korzystających z czytników ekranu. Nie upychaj tam słów kluczowych na siłę.
Szybka lista kontrolna:
- zdjęcia w formacie WebP lub AVIF,
- wymiary dopasowane do miejsca na stronie,
loading="lazy"poza nagłówkiem,- sensowny opis alt,
- waga sprawdzona w PageSpeed Insights.
Najczęstsze pytania o optymalizację obrazków
Czy WebP pogarsza jakość zdjęć?
Nie w sposób, który zauważy odwiedzający. WebP przy tej samej jakości wizualnej waży 25–34% mniej niż JPEG. Różnicę widać dopiero na bardzo dużych powiększeniach, a nie na normalnej stronie.
WebP czy AVIF — co wybrać?
Najlepiej oba. AVIF daje większą oszczędność (około 50% względem JPEG), więc ustaw go jako format główny, a WebP jako rezerwę w znaczniku <picture>. Wtedy każda przeglądarka dostaje najlżejszy plik, jaki potrafi obsłużyć.
Czy lazy loading szkodzi SEO?
Nie, o ile nie zastosujesz go do głównego zdjęcia w nagłówku. Google indeksuje treść ładowaną leniwie. Problem pojawia się tylko wtedy, gdy lazy loadingiem opóźnisz obrazek odpowiadający za LCP.
Ile można zyskać na optymalizacji obrazków?
To zależy od stanu wyjściowego, ale u stron, które wrzucają zdjęcia prosto z aparatu, redukcja wagi o 50–70% jest typowa. Często to największa pojedyncza poprawa szybkości, jaką da się zrobić.
Twoja strona ładuje się zbyt wolno?
Zoptymalizuję obrazki, wdrożę WebP i AVIF oraz lazy loading i przyspieszę całą witrynę — tak, żeby lubili ją i klienci, i Google.