Jak zoptymalizować zdjęcia na stronie, żeby nie spowalniały ładowania

Zdjęcia to najczęstsza przyczyna wolnego ładowania małych stron firmowych, jaką widzę w praktyce. Jedno zdjęcie wgrane prosto z telefonu potrafi ważyć więcej niż cała reszta strony. W tym poradniku pokazuję, jak zoptymalizować zdjęcia na stronie samodzielnie: jak znaleźć te problematyczne, jakie wymiary i format wybrać, jak je skompresować i co ustawić w WordPressie. Wszystko za pomocą darmowych narzędzi.

Dlaczego zdjęcia spowalniają stronę

Współczesny telefon robi zdjęcia o szerokości kilku tysięcy pikseli, zapisane w plikach po kilka MB. Na stronie to samo zdjęcie wyświetla się często w ramce szerokości 600-1200 px. Przeglądarka i tak pobiera cały, ogromny plik, a potem go pomniejsza.

Na komputerze z szybkim internetem tego nie zauważasz. Klient, który otwiera stronę na telefonie w samochodzie albo na słabym zasięgu, czeka kilka sekund na pierwsze zdjęcie. Wolne ładowanie głównego zdjęcia pogarsza też wynik LCP, jeden ze wskaźników Core Web Vitals, które Google bierze pod uwagę.

Problem jest szczególnie częsty na stronach z galeriami realizacji: firma remontowa z Tychów czy stolarz z okolic Rybnika wgrywa kilkadziesiąt zdjęć prosto z telefonu i strona z portfolio robi się najwolniejszą podstroną w całej witrynie.

Krok 1: znajdź zdjęcia, które są problemem

Nie musisz optymalizować wszystkiego naraz. Zacznij od zdjęć, które najbardziej obciążają stronę.

PageSpeed Insights

1. Wklej adres podstrony na pagespeed.web.dev.
2. Wybierz wynik dla urządzeń mobilnych.
3. W sekcji diagnostyki szukaj komunikatów dotyczących obrazów – o zbyt dużym rozmiarze, nieodpowiednim formacie lub słabej kompresji. Rozwiń je, żeby zobaczyć konkretne pliki i możliwą oszczędność.

Narzędzia przeglądarki

W Chrome wciśnij F12, przejdź do zakładki Network (Sieć), zaznacz filtr Img i odśwież stronę. Posortuj listę po rozmiarze – na górze zobaczysz najcięższe pliki.

Biblioteka mediów w WordPressie

W widoku listy biblioteki mediów po kliknięciu zdjęcia zobaczysz jego wymiary i wagę. Plik powyżej 1 MB to prawie zawsze kandydat do optymalizacji.

Krok 2: dobierz wymiary

Największą oszczędność daje zmniejszenie wymiarów zdjęcia do takich, w jakich faktycznie się wyświetla. Orientacyjne wartości:

Zdjęcie możesz zmniejszyć w dowolnym programie graficznym, w systemowym edytorze zdjęć albo w narzędziu online, które opisuję w kroku 4. Szersze niż 2000 px zdjęcie na typowej stronie firmowej rzadko ma uzasadnienie.

Krok 3: wybierz format

• JPEG – klasyczny format do zdjęć. Działa wszędzie i dobrze się kompresuje.
• WebP – zwykle daje mniejszy plik niż JPEG przy podobnej jakości. Obsługują go wszystkie popularne przeglądarki, a WordPress przyjmuje go bez dodatkowych wtyczek. To dziś mój domyślny wybór.
• AVIF – jeszcze mniejsze pliki, ale wolniejsze w zapisie i nie każde narzędzie czy motyw dobrze go obsługuje.
• PNG – do grafik z przezroczystością, zrzutów ekranu i prostych ilustracji. Do zwykłych zdjęć się nie nadaje – pliki są wielokrotnie większe.
• SVG – do logo i ikon. Jest ostry w każdym rozmiarze i bardzo lekki.

Najczęstszy błąd, jaki spotykam: zdjęcia realizacji zapisane jako PNG. Sama zmiana formatu na WebP lub JPEG potrafi kilkukrotnie zmniejszyć wagę strony.

Krok 4: skompresuj plik

Kompresja usuwa z pliku dane, których ludzkie oko nie zauważa. Najprostsze darmowe narzędzie to Squoosh (squoosh.app), działające w przeglądarce:

1. Przeciągnij zdjęcie do okna Squoosh.
2. Po prawej wybierz format (np. WebP) i ustaw jakość.
3. W panelu „Resize” ustaw docelową szerokość z kroku 2.
4. Przesuń suwak na środku obrazu, żeby porównać oryginał z wersją skompresowaną.
5. Pobierz plik – na dole widzisz, o ile procent zmniejszyła się waga.

Przy zdjęciach jakość na poziomie około 70-85% zwykle nie różni się wizualnie od oryginału. Jako orientacyjny cel przyjmij do ok. 200-300 KB dla dużego banera i do ok. 100-150 KB dla zdjęć w treści. To nie są sztywne limity, tylko punkt odniesienia.

Krok 5: nazwa pliku i tekst alternatywny

Optymalizacja zdjęć to nie tylko waga pliku. Dobrze opisane zdjęcie może pojawić się w Grafice Google i pomóc w lokalnym SEO.

Nazwa pliku

Zanim wgrasz zdjęcie, zmień nazwę z IMG_20240512_1432.jpg na opisową, np. remont-lazienki-tychy.webp. Używaj małych liter, myślników zamiast spacji i bez polskich znaków.

Tekst alternatywny (alt)

Alt to opis zdjęcia dla osób korzystających z czytników ekranu i dla Google. Opisz, co faktycznie widać: „Łazienka po remoncie z prysznicem walk-in w domu w Tychach” zamiast „remont łazienek Tychy tanio”. Nazwa miasta jest w porządku, jeśli naturalnie pasuje do zdjęcia. Upychanie fraz w altach nie pomaga.

Zdjęcia czysto dekoracyjne (tła, ozdobniki) mogą mieć pusty alt.

Krok 6: leniwe ładowanie i wymiary w kodzie

Leniwe ładowanie (lazy loading)

Zdjęcia niżej na stronie powinny ładować się dopiero wtedy, gdy użytkownik do nich przewinie. WordPress dodaje ten atrybut automatycznie do zdjęć wstawionych w edytorze.

Wyjątek: główne zdjęcie na górze strony (baner) powinno ładować się od razu. Jeśli motyw lub wtyczka wymusza na nim leniwe ładowanie, wynik LCP się pogarsza. Sprawdzisz to w kodzie strony (Ctrl+U): przy pierwszym zdjęciu nie powinno być loading="lazy".

Wymiary w kodzie

Każde zdjęcie powinno mieć w kodzie atrybuty width i height. Dzięki nim przeglądarka rezerwuje miejsce, zanim zdjęcie się załaduje, i treść nie „skacze” podczas wczytywania. WordPress dodaje je sam, ale zdjęcia wstawione przez kreatory stron lub jako tła w CSS często ich nie mają.

Optymalizacja zdjęć w WordPressie

WordPress przy każdym wgraniu tworzy kilka mniejszych wersji zdjęcia i sam podaje przeglądarce tę najlepiej dopasowaną do ekranu. Nie zwalnia Cię to jednak z wgrywania rozsądnie zmniejszonych plików – oryginał nadal zajmuje miejsce na serwerze i bywa używany przez motyw.

Wtyczki do optymalizacji

Jeśli masz w bibliotece setki zdjęć, ręczna optymalizacja zajmie zbyt dużo czasu. Wtyczki takie jak ShortPixel, EWWW Image Optimizer, Imagify czy Smush kompresują istniejące zdjęcia i mogą konwertować je do WebP. Kilka zasad:

1. Zrób kopię zapasową strony i biblioteki mediów przed masową optymalizacją.
2. Używaj jednej wtyczki – dwie optymalizujące te same pliki potrafią się gryźć.
3. Sprawdź limity darmowego planu – część wtyczek ogranicza liczbę zdjęć lub ich rozmiar.
4. Przetestuj na kilku zdjęciach, zanim uruchomisz optymalizację całej biblioteki.

Slidery i galerie

Slider na stronie głównej z pięcioma dużymi zdjęciami ładuje je często wszystkie od razu, nawet jeśli klient zobaczy tylko pierwsze. Jeśli Twoja strona główna ładuje się wolno, zastanowienie się, czy slider jest w ogóle potrzebny, często daje więcej niż kompresja.

Czasem problem leży w samym motywie, który nie generuje odpowiednich rozmiarów zdjęć, ładuje pełne oryginały w galeriach albo nie pozwala wyłączyć ciężkiego slidera. Gdy strona ma kilka lat i takich ograniczeń jest więcej, rozsądniej bywa zaprojektować nową stronę internetową niż obchodzić je wtyczkami.

Jak sprawdzić efekt

1. Po optymalizacji wyczyść pamięć podręczną strony (jeśli korzystasz z wtyczki cache).
2. Ponownie przetestuj tę samą podstronę w PageSpeed Insights na urządzeniach mobilnych.
3. Porównaj LCP i komunikaty dotyczące obrazów z wynikiem sprzed zmian.
4. Otwórz stronę na telefonie, najlepiej na danych mobilnych, i sprawdź, czy zdjęcia wciąż wyglądają dobrze.

Jeśli zdjęcia są już lekkie, a strona wciąż ładuje się wolno, przyczyna leży gdzie indziej: w hostingu, liczbie wtyczek albo ciężkim motywie. Szerszy przegląd opisałem w poradniku, jak zrobić prosty audyt SEO samemu w 30 minut. Szybkość to jeden z elementów, które biorę pod uwagę w pozycjonowaniu stron lokalnych firm, ale rzadko jedyny.

Samodzielna optymalizacja sprawdza się jednorazowo. Problem wraca, gdy kolejne osoby w firmie wgrywają nowe zdjęcia prosto z telefonu. W ramach opieki nad stroną WordPress pilnuję, żeby nowe pliki były optymalizowane automatycznie, a szybkość nie spadała z miesiąca na miesiąc.

Nie masz czasu na optymalizację setek zdjęć?

Jeśli Twoja strona nadal ładuje się wolno albo biblioteka mediów jest zbyt duża, żeby przejść ją ręcznie, napisz do mnie. Sprawdzę, co faktycznie spowalnia stronę, i mogę zająć się optymalizacją za Ciebie – pracuję bezpośrednio z klientem i odpowiadam w ciągu 1 dnia roboczego.