Optymalizacja obrazków na stronie internetowej - formaty, kompresja i lazy loading

Obrazki na stronie internetowej potrafią zrobić dwie rzeczy naraz: przyciągnąć uwagę i zepsuć całe wrażenie. Nie przez złą estetykę, ale przez rozmiar. Strona, która waży 8 MB tylko przez nieskompresowane zdjęcia, ładuje się tak wolno, że połowa odwiedzających ją opuszcza zanim cokolwiek zobaczy. Widziałem to dziesiątki razy u klientów, którzy pytali mnie, dlaczego ich nowa strona jest wolna, choć zapłacili za "dobry hosting".

Optymalizacja obrazków to jeden z tych tematów, który brzmi technicznie, ale w praktyce opiera się na kilku prostych zasadach. Nie musisz rozumieć algorytmów kompresji ani znać specyfikacji formatu PNG. Musisz wiedzieć, kiedy użyć jakiego formatu, co zrobić przed uploadem i jakie dwa atrybuty HTML odróżniają stronę zoptymalizowaną od zaniedbanej. To wszystko jest do ogarnięcia w godzinę.

Po co właściwie optymalizować obrazki

Odpowiedź intuicyjna brzmi: żeby strona była szybsza. I to prawda, ale warto rozwinąć, co to konkretnie znaczy.

Przeglądarka, gdy otwiera stronę, pobiera każdy plik z osobna: HTML, CSS, skrypty JavaScript i każdy obrazek. Jeśli strona ma 15 zdjęć po 2 MB każde, przeglądarka musi pobrać 30 MB zanim użytkownik zobaczy kompletny widok. Na wolnym łączu mobilnym to może trwać kilkanaście sekund. Na dobrej sieci - nadal kilka.

Szybkość ładowania ma bezpośredni wpływ na pozycje w Google - nie jest to plotka ani przesada, algorytmy wyszukiwarki od dawna traktują czas ładowania jako jeden z sygnałów rankingowych. Poza tym, użytkownik który czeka zbyt długo, po prostu wychodzi. Współczynnik odrzuceń rośnie, konwersja spada. Dlatego optymalizacja obrazków to jednocześnie kwestia SEO, UX i wyników sprzedażowych.

Trzy formaty, które musisz znać

Na potrzeby zdecydowanej większości stron wystarczy znać trzy formaty: JPEG, PNG i WebP. Każdy z nich ma inne zastosowanie i inny mechanizm zapisu danych.

JPEG (albo JPG, to to samo) to format stworzony specjalnie do fotografii i obrazów z dużą liczbą kolorów i gradientów. Kompresuje dane w sposób stratny - upraszcza pewne szczegóły, które ludzkie oko i tak słabo rozróżnia. Efekt: plik waży kilka razy mniej niż oryginał, a wizualnie różnica jest minimalna, jeśli ustawisz odpowiedni poziom jakości. JPEG nie obsługuje przezroczystości - jeśli potrzebujesz obrazka z przezroczystym tłem, JPEG nie jest opcją.

PNG to format bezstratny. Żaden piksel nie jest zmieniany, każda krawędź tekstu i każdy detal pozostają nienaruszone. Dlatego PNG jest naturalnym wyborem dla logotypów, ikon, zrzutów ekranu, grafik z tekstem i wszystkiego, gdzie piksel musi równać się pikselowi. Obsługuje przezroczystość. Ceną jest większy rozmiar pliku - PNG ze zdjęciem będzie wielokrotnie cięższy niż ten sam kadr w JPEG.

WebP to format opracowany przez Google i udostępniony jako open source. Obsługuje zarówno kompresję stratną (jak JPEG), jak i bezstratną (jak PNG), a przy podobnej jakości wizualnej generuje pliki o 25-35% lżejsze od odpowiedników w starszych formatach. Obsługuje też przezroczystość. Od pewnego czasu jest wspierany przez wszystkie główne przeglądarki, więc w nowych projektach warto go traktować jako opcję domyślną.

Kompresja stratna i bezstratna - co to znaczy w praktyce

Kompresja to temat, który łatwo przekomplikować. Na potrzeby optymalizacji strony internetowej wystarczy rozróżnić dwa podejścia.

Kompresja bezstratna zmniejsza plik bez zmieniania żadnego piksela. Działa jak archiwum ZIP - dane są zapisane bardziej zwięźle, ale po rozpakowaniu są identyczne z oryginałem. PNG używa właśnie tej metody. Efekt jest przewidywalny i powtarzalny, ale oszczędności na rozmiarze są ograniczone.

Kompresja stratna idzie dalej: część danych jest trwale usuwana. W JPEG chodzi głównie o drobne różnice kolorystyczne, które oko i tak nie wyłapuje - szczególnie w obszarach o płynnych przejściach, jak niebo na zdjęciu czy skóra twarzy. Algorytm upraszcza te informacje, zapisuje efekt, i oryginał znika. Nie możesz go odtworzyć. Dlatego zawsze zachowuj oryginały na dysku i kompresuj kopie.

W praktyce przy JPEG możesz eksperymentować z poziomem jakości. Eksportując zdjęcie z 85% jakości zamiast 100%, plik często waży 3-4 razy mniej, a na ekranie monitora różnica jest niewidoczna. Zejście do 70-75% daje jeszcze więcej, ale zaczyna być wyczuwalne przy ostrych krawędziach. Poniżej 60% zazwyczaj pojawiają się widoczne artefakty kompresji - poszarpane krawędzie i rozmazane detale.

Wymiary przed uploadem - błąd, który popełnia prawie każdy

To jest najczęstszy błąd, który widzę u klientów, szczególnie gdy sami zarządzają treścią strony. Wgrywają zdjęcia wprost z aparatu albo ze smartfona - 4000 pikseli szerokości, 6-8 MB wagi - bo "lepiej mieć za duże niż za małe".

Problem w tym, że kolumna treści na blogu ma zazwyczaj 700-1000 pikseli szerokości. WordPress czy inny CMS skaluje obrazek przy wyświetlaniu, ale nadal musi go pobrać w pełnym rozmiarze. Użytkownik pobiera 8 MB żeby zobaczyć obrazek wyświetlony w 800px. To jak zamawianie ciężarówki do przewiezienia roweru.

Przypadek z praktyki: u jednego z klientów prowadzącego sklep z meblami strona produktu ważyła ok. 18 MB, bo zdjęcia produktów były wprost z sesji fotograficznej - każde po 4-5 MB. Po przeskalowaniu do maksymalnie 1600px i skompresowaniu, ta sama strona ważyła 1,2 MB. Czas ładowania spadł trzykrotnie, bez żadnej zmiany w kodzie ani hostingu.

Zasada ogólna: przygotuj obrazek w wymiarach zbliżonych do docelowych. Dla bloga typowo wystarczy 1200-1400px szerokości (z marginesem na ekrany Retina). Dla ikony czy miniatury - kilkaset pikseli. Dla tła pełnoekranowego - 1920-2400px, ale skompresowane agresywnie, bo detal i tak się gubi.

Atrybut alt - jeden opis, dwa zastosowania

Atrybut alt w tagu obrazka robi dwie rzeczy jednocześnie. Po pierwsze, wyświetla tekst gdy obrazek nie może zostać załadowany - użytkownik wie wtedy, co miał zobaczyć. Po drugie, czytają go czytniki ekranowe używane przez osoby niewidome, więc alt to element dostępności strony.

Dla Google alt to jeden z nielicznych sygnałów tekstowych związanych z obrazkiem. Robot wyszukiwarki nie widzi zdjęcia tak jak człowiek - widzi tekst. Jeśli alt jest pusty, robot nic nie wie o tym, co przedstawia grafika. Jeśli alt jest sensowny, robot może zaindeksować obrazek w Google Images i powiązać go z odpowiednią treścią strony.

Dobry alt jest krótki i konkretny. "fotel obrotowy czarny skóra" jest lepszy niż "zdjęcie produktu foto fotel obrotowy kup teraz". Nie upychaj słów kluczowych na siłę, bo to nie pomaga ani użytkownikowi, ani robotowi - a może zaszkodzić.

Lazy loading - ładuj tylko to, co widać

Wyobraź sobie, że kupujesz książkę i przed przeczytaniem pierwszego rozdziału drukarz dostarcza ci wszystkie 300 stron naraz. To dokładnie co robi przeglądarka bez lazy loadingu: pobiera wszystkie obrazki na stronie przy wejściu, niezależnie od tego, czy użytkownik dotrze do nich scrollując.

Lazy loading (opóźnione ładowanie) rozwiązuje ten problem. Przeglądarka ładuje tylko obrazki widoczne w oknie - i te, które niedługo w nim się pojawią (kilka ekranów niżej). Reszta czeka. Gdy użytkownik scrolluje w dół, kolejne obrazki są pobierane na bieżąco.

Efekt dla użytkownika: strona ładuje się szybciej przy pierwszym wejściu, bo przeglądarka nie musi pobierać 40 zdjęć zanim wyświetli nagłówek. Dla serwera: mniej transferu, bo część użytkowników i tak opuści stronę zanim dotrze na dół.

Najprostszy sposób implementacji to jeden atrybut HTML: loading="lazy" w tagu <img>. Nowoczesne przeglądarki obsługują to natywnie, bez żadnych skryptów JavaScript. WordPress dodaje ten atrybut automatycznie do większości grafik od pewnego czasu.

Responsywność obrazków - różne rozmiary na różne ekrany

Temat, o którym warto wiedzieć, nawet jeśli nie wdrożysz go samodzielnie. Ekran smartfona ma zazwyczaj 375-430px szerokości fizycznej, ekran desktopa - 1440-2560px. Serwowanie obu tego samego obrazka 1920px to marnotrawstwo dla użytkownika mobilnego i potencjalna strata jakości dla użytkownika na dużym monitorze.

HTML oferuje atrybut srcset, który pozwala zdefiniować kilka wersji obrazka w różnych rozmiarach. Przeglądarka sama wybiera odpowiednią wersję na podstawie szerokości ekranu i gęstości pikseli. W WordPress, gdy wgrasz obrazek, CMS generuje kilka wersji automatycznie i umieszcza je w atrybucie srcset bez Twojego udziału.

Jeśli korzystasz z dobrze zbudowanej strony internetowej opartej na WordPress, ta funkcja działa od razu po wyjęciu z pudełka. Jeśli masz stronę na innej platformie - warto sprawdzić, czy srcset jest generowany.

Więcej o tym, jak działa serwer i dlaczego sposób dostarczania plików ma znaczenie, piszę w artykule co to jest hosting i jak działa serwer www.

Jak to wszystko połączyć w praktyce

Najprostsza ścieżka dla właściciela strony, który sam zarządza treścią:

Przed wgraniem każdego obrazka wykonaj dwa kroki. Pierwszy: przeskaluj do rozsądnych wymiarów (np. maksymalnie 1400px szerokości dla bloga). Drugi: skompresuj, korzystając z narzędzia online albo z wtyczki w CMS, która robi to automatycznie. Uzupełnij alt sensownym opisem.

Jeśli masz WordPress i chcesz zautomatyzować kompresję i konwersję do WebP, na rynku jest kilka wtyczek, które robią to w tle przy każdym uploadzie. Nie musisz decydować o niczym ręcznie - ustawiasz raz, działają na wszystkich plikach. Takie rozwiązania wdrażam standardowo przy budowaniu stron w WordPress dla klientów - opisuję ten zakres szerzej na stronie usług tworzenia stron.

Lazy loading w WordPress jest włączony domyślnie dla większości obrazków. Jedyne, o co warto zadbać ręcznie, to upewnić się, że główny obrazek wyświetlany powyżej linii przewijania (np. hero, obrazek wyróżniający posta) ma priorytet ładowania, a nie opóźnienie.

Aby pogłębić wiedzę o tym, jak przeglądarki komunikują się z serwerem i czemu czas odpowiedzi serwera ma znaczenie obok rozmiaru pliku, warto zajrzeć do artykułu czym jest domena internetowa i jak działa.

Optymalizacja obrazków nie jest projektem jednorazowym. Każdy nowy plik dodany na stronę przechodzi przez ten sam tor - format, kompresja, wymiary, alt, lazy loading. Gdy to wejdzie w nawyk, strona przez lata zachowuje dobrą wydajność bez konieczności wielkich porządków. A jeśli wolisz skupić się na prowadzeniu biznesu, a nie zarządzaniu plikami - napisz do mnie, chętnie sprawdzę, co konkretnie spowalnia Twoją stronę i zaproponuję rozwiązanie.