Jak zoptymalizować zdjęcia na stronie – poradnik krok po kroku

Jeśli zastanawiasz się, jak zoptymalizować zdjęcia na stronie, zacznij od prostego faktu: grafiki odpowiadają zwykle za 50–70% wagi przeciętnej witryny. Wiedza o tym, jak zoptymalizować zdjęcia na stronie, przekłada się bezpośrednio na szybsze ładowanie, lepsze wyniki Core Web Vitals i wyższe pozycje w Google. Pojedyncze zdjęcie z aparatu w telefonie waży 4–8 MB, a po poprawnej kompresji i konwersji do WebP lub AVIF da się je zmniejszyć do 80–150 KB bez widocznej utraty jakości. Na stronie z dziesięcioma takimi fotografiami różnica wynosi często kilkadziesiąt megabajtów transferu na każdą wizytę. W tym poradniku przejdziemy przez wybór formatu, dobór wymiarów, narzędzia do kompresji, techniki lazy loading oraz rolę serwera i CDN. Dowiesz się też, jak rzetelnie mierzyć efekty, żeby nie oszukiwać się wynikami testów wykonanych na słabym łączu domowym. Wszystkie wskazówki sprawdzą się zarówno w WordPressie, jak i na stronach pisanych ręcznie.

Dlaczego ciężkie zdjęcia spowalniają stronę i jak to zmierzyć

Google od lat traktuje szybkość jako sygnał rankingowy, a najważniejszym wskaźnikiem związanym z grafikami jest LCP, czyli Largest Contentful Paint. W większości witryn największym elementem widocznym po załadowaniu jest właśnie zdjęcie główne wpisu lub baner. Jeśli waży ono 2 MB, osiągnięcie zalecanego progu 2,5 sekundy na smartfonie z zasięgiem LTE staje się praktycznie niemożliwe.

Druga kwestia to CLS, czyli przesunięcia układu. Zdjęcie bez zdefiniowanych wymiarów najpierw nie zajmuje miejsca, a po pobraniu nagle rozpycha tekst w dół. Użytkownik, który właśnie chciał kliknąć przycisk, trafia w coś innego. Wystarczy dodać atrybuty width i height albo właściwość aspect-ratio w CSS, żeby przeglądarka zarezerwowała przestrzeń zawczasu.

Ciężkie grafiki to również koszt po stronie serwera. Na tanim pakiecie za 10–15 zł miesięcznie limit transferu lub wydajności kończy się szybciej, niż się wydaje, a strona zwalnia przy każdym skoku ruchu. Dlatego, zanim zaczniesz się zastanawiać, czym różni się VPS od hostingu współdzielonego i czy warto dopłacać, sprawdź, ile ważą Twoje obrazy.

Zanim cokolwiek zmienisz, zmierz stan wyjściowy w PageSpeed Insights i WebPageTest. Testy lokalne w Lighthouse zależą od Twojego łącza, więc najpierw ustal, jak sprawdzić prędkość internetu rzetelnie: kablem, bez innych pobierań, kilka razy o różnych porach. Pomiar przez laptop w odległym pokoju pokaże gorszy wynik, niż ma realny użytkownik.

Jeśli testujesz bezprzewodowo, a router stoi za szafą w przedpokoju, wyniki będą niestabilne. Zanim obwinisz serwer, sprawdź, jak wzmocnić sygnał Wi-Fi w domu: przestaw router wyżej i centralniej, zmień kanał na mniej zatłoczony w paśmie 5 GHz albo dokup system mesh, na przykład TP-Link Deco za około 300–500 zł.

Wybór formatu: JPEG, PNG, WebP czy AVIF

Format pliku ma większy wpływ na wagę niż jakakolwiek wtyczka. Klasyczny JPEG wciąż działa wszędzie, ale nowoczesne formaty oferują znacznie lepszą kompresję przy tej samej jakości wizualnej. Poniższe zestawienie pokazuje orientacyjną wagę tego samego zdjęcia krajobrazu o szerokości 1200 pikseli, zapisanego przy jakości zbliżonej do 80%.

Dla większości blogów i sklepów najlepszym wyborem jest WebP jako format podstawowy, ewentualnie z AVIF dla przeglądarek, które go obsługują. AVIF daje najmniejsze pliki, ale jego kodowanie jest wolniejsze, co przy tysiącach zdjęć w sklepie obciąża serwer. Element picture z kilkoma źródłami pozwala serwować AVIF, WebP i JPEG jako rezerwę jednocześnie.

Kiedy sięgnąć po PNG i SVG

PNG ma sens tylko tam, gdzie potrzebujesz przezroczystości przy ostrych krawędziach, na przykład przy zrzutach ekranu z tekstem. Do zdjęć się nie nadaje, bo plik bywa pięciokrotnie cięższy od JPEG. Z kolei logotypy, ikony i proste ilustracje najlepiej zapisywać jako SVG, który waży często poniżej 5 KB i skaluje się bez utraty ostrości.

Miej na uwadze, że pliki SVG wgrywane przez użytkowników mogą zawierać złośliwy kod JavaScript. W WordPressie obsługę SVG włączaj więc wtyczką, która oczyszcza zawartość, na przykład Safe SVG, i nie zezwalaj na wgrywanie takich plików kontom, którym nie ufasz w pełni. To prosta blokada, która zamyka popularną furtkę ataku.

Wymiary, kompresja i opisy – praktyczny proces krok po kroku

Najczęstszy błąd to wgrywanie zdjęć 6000 × 4000 pikseli prosto z aparatu, podczas gdy kolumna treści ma 800 pikseli szerokości. Przeglądarka i tak pobiera cały plik, a potem go pomniejsza. Przed publikacją przeskaluj grafikę do maksymalnie dwukrotności szerokości wyświetlania, czyli w tym przypadku do około 1600 pikseli dla ekranów Retina. Następnie przepuść plik przez jedno z poniższych narzędzi:

• Squoosh – darmowe narzędzie w przeglądarce z podglądem przed i po oraz eksportem do WebP i AVIF.
• TinyPNG – kompresja do 20 plików naraz za darmo, wersja Pro kosztuje około 150–200 zł rocznie.
• ShortPixel – wtyczka do WordPressa z pulą darmowych kredytów co miesiąc i pakietami jednorazowymi od kilkudziesięciu złotych.
• EWWW Image Optimizer lub Converter for Media – automatyczna konwersja do WebP przy każdym wgraniu pliku.
• cwebp i ImageMagick – narzędzia wiersza poleceń do masowej konwersji tysięcy plików na serwerze.

Jeśli chodzi o poziom kompresji, dla JPEG i WebP rozsądny zakres to jakość 75–85. Poniżej 70 zaczynają pojawiać się artefakty na gradientach nieba i skórze, powyżej 90 plik rośnie bez widocznej poprawy. Zawsze oceniaj efekt w skali 100%, a nie na miniaturze, bo tam każde zdjęcie wygląda dobrze.

Usuń też metadane EXIF. Zawierają one model aparatu, ustawienia ekspozycji, a czasem współrzędne GPS miejsca wykonania zdjęcia, co bywa problemem dla prywatności. Ich usunięcie oszczędza od kilku do kilkudziesięciu kilobajtów na pliku. Większość wtyczek kompresujących robi to automatycznie, ale sprawdź tę opcję w ustawieniach przed masową optymalizacją biblioteki.

Sama odpowiedź na pytanie, jak zoptymalizować zdjęcia na stronie, nie kończy się na kompresji. Nazwa pliku i tekst alternatywny również mają znaczenie: plik router-wifi-6-tp-link.webp opisuje zawartość lepiej niż IMG_4521.jpg, a atrybut alt pomaga zarówno osobom niewidomym, jak i robotom Google Grafika. Opis powinien mieć kilka konkretnych słów, bez upychania fraz.

Responsywne obrazy, lazy loading i szybki serwer

Atrybuty srcset i sizes pozwalają przygotować kilka wersji tego samego zdjęcia, na przykład 480, 800 i 1600 pikseli, a przeglądarka sama wybiera najmniejszą wystarczającą. Smartfon pobiera wtedy plik o wadze 40 KB zamiast 250 KB. WordPress generuje takie warianty automatycznie przy wgrywaniu, pod warunkiem że motyw poprawnie wstawia obrazy do treści.

Leniwe ładowanie, czyli atrybut loading=lazy, sprawia, że zdjęcia poniżej pierwszego ekranu pobierają się dopiero wtedy, gdy użytkownik do nich przewija. To ogromna oszczędność na długich artykułach i w galeriach. Uwaga: zdjęcia głównego, widocznego od razu, nie ładuj leniwie, bo pogorszysz LCP. Dla niego lepiej dodać fetchpriority=high.

W WordPressie atrybut loading=lazy dodawany jest automatycznie do obrazów w treści, a nowsze wersje same pomijają pierwszy obraz. Wtyczki takie jak LiteSpeed Cache, WP Rocket (około 250 zł rocznie) czy Perfmatters pozwalają dodatkowo wyłączyć leniwe ładowanie dla wybranych klas i wstępnie załadować zdjęcie główne.

Hosting, migracja i CDN

Nawet idealnie skompresowane pliki będą się ładować wolno z przeciążonego serwera. Jeśli zastanawiasz się, jak wybrać hosting pod WordPress, patrz na obsługę HTTP/2 lub HTTP/3, dyski NVMe, serwer LiteSpeed oraz lokalizację centrum danych w Polsce. Dobry pakiet dla bloga kosztuje zwykle 150–300 zł rocznie, a VPS od około 30–60 zł miesięcznie.

Wiedza o tym, jak przenieść stronę na inny hosting, sprowadza się do skopiowania plików i bazy danych, np. wtyczką Duplicator lub All-in-One WP Migration, oraz zmiany wpisów w strefie DNS. Dzień wcześniej obniż TTL rekordów do 300 sekund; jeśli nie wiesz, jak skonfigurować rekordy DNS domeny, większość rejestratorów oferuje prosty kreator w panelu.

Kolejnym krokiem jest CDN, na przykład Cloudflare w planie darmowym albo Bunny CDN, gdzie za terabajt transferu w Europie zapłacisz kilkadziesiąt złotych. Konfiguracja wymaga zwykle jednego wpisu. Co to jest rekord CNAME? To alias wskazujący, że subdomena, np. cdn.twojadomena.pl, ma być obsługiwana przez serwery dostawcy, który dostarcza zdjęcia z węzła najbliższego użytkownikowi.

HTTPS, przekierowania i domena – zaplecze, o którym łatwo zapomnieć

Przeglądarki obsługują HTTP/2, który równolegle pobiera dziesiątki obrazów jednym połączeniem, wyłącznie po HTTPS. Jeśli nie wiesz, jak zainstalować certyfikat SSL na serwerze, większość paneli hostingowych robi to jednym kliknięciem. Darmowy certyfikat SSL Let’s Encrypt odnawia się automatycznie i w zupełności wystarcza blogom oraz małym sklepom. Na własnym VPS to samo załatwia narzędzie Certbot.

Po przejściu na HTTPS i konwersji do WebP adresy obrazów często się zmieniają. Stare linki z Google Grafika czy innych serwisów prowadzą wtedy do błędu 404. Rozwiązaniem jest wiedza o tym, jak ustawić przekierowanie 301 w htaccess: jedna reguła RewriteRule przekieruje stare pliki JPG na nowe wersje i zachowa wypracowaną moc linków.

Przy przejmowaniu cudzej witryny pierwsze pytanie brzmi: jak sprawdzić, kto jest właścicielem domeny? Wystarczy wyszukiwarka WHOIS, a dla adresów .pl baza prowadzona przez NASK, choć dane osób prywatnych są tam ukryte. Równie ważna jest data ważności, bo wygasła domena oznacza, że znikają nie tylko zdjęcia z CDN, ale cała strona.

Jeśli już do tego doszło, jak przedłużyć domenę po wygaśnięciu? Zazwyczaj wystarczy opłacić ją w panelu rejestratora w okresie ochronnym, który trwa od kilkunastu do kilkudziesięciu dni, choć niektórzy dostawcy doliczają opłatę za przywrócenie. Najprościej uniknąć problemu, włączając automatyczne odnawianie i podpinając kartę płatniczą do konta.

Cały proces da się zamknąć w jedno popołudnie: pomiar, konwersja do WebP, przeskalowanie, srcset, lazy loading, CDN i HTTPS. Kto raz przećwiczy, jak zoptymalizować zdjęcia na stronie, zwykle ustawia automatyzację we wtyczce i przestaje o tym myśleć, a wynik mobilny rośnie często z 45 do ponad 80 punktów.

Jak przyspieszyć ładowanie zdjęć w WordPressie bez płatnych narzędzi?

Wystarczą darmowe rozwiązania. Najpierw w ustawieniach mediów ogranicz rozmiary miniatur do tych, których faktycznie używa motyw, bo każdy zbędny wariant zajmuje miejsce na serwerze. Następnie zainstaluj darmową wersję wtyczki Converter for Media lub EWWW Image Optimizer, która automatycznie przekształci nowe i istniejące pliki do WebP. Przed wgraniem dużych zdjęć przeskaluj je w Squoosh do około 1600 pikseli szerokości. Zostaw włączony wbudowany lazy loading i upewnij się, że motyw dodaje wymiary width oraz height. Jeśli hosting działa na LiteSpeed, darmowa wtyczka LiteSpeed Cache zapewni też optymalizację obrazów w chmurze producenta, bez dodatkowych kosztów dla małych witryn. Po wszystkim porównaj wynik w PageSpeed Insights z pomiarem wyjściowym.

Czy konwersja do WebP pogarsza jakość zdjęć?

Przy rozsądnych ustawieniach różnica jest dla oka niezauważalna. WebP, podobnie jak JPEG, stosuje kompresję stratną, ale robi to wydajniej, więc przy jakości 80 plik jest o 25–35% mniejszy przy porównywalnej ostrości. Problemy pojawiają się dopiero przy jakości poniżej 60, gdy na jednolitych powierzchniach, na przykład niebie, widać rozmyte bloki. Dla grafik z tekstem i zrzutów ekranu możesz użyć trybu bezstratnego WebP, który i tak bywa lżejszy od PNG. Zawsze zachowuj oryginały w archiwum lub na dysku zewnętrznym, aby w razie potrzeby wygenerować nowe wersje w innym formacie, na przykład AVIF, bez wielokrotnej kompresji tego samego pliku. Kompresowanie już skompresowanego JPEG to najprostsza droga do utraty szczegółów.

Co zrobić, gdy PageSpeed Insights nadal zgłasza problemy z obrazami?

Najpierw przeczytaj dokładnie, której grafiki dotyczy ostrzeżenie. Komunikat o nieprawidłowym rozmiarze oznacza zwykle, że motyw wstawia pełny plik zamiast odpowiedniej miniatury, więc trzeba poprawić szablon lub dodać srcset. Ostrzeżenie o elemencie LCP ładowanym leniwie wskazuje, że zdjęcie główne ma atrybut loading=lazy, który należy usunąć. Jeśli problem dotyczy obrazów spoza serwera, na przykład z wtyczek społecznościowych czy reklam, rozważ ich zastąpienie statycznymi grafikami. Gdy wszystko wygląda poprawnie, a wynik wciąż jest słaby, przyczyną bywa wolny serwer z długim czasem TTFB. Wtedy pomoże lepszy hosting, cache stron lub CDN, a nie kolejna kompresja. Testuj też kilka razy, bo pojedynczy pomiar potrafi się różnić o 10–15 punktów.