Obrazy to zwykle 50-70% wagi strony - i najprostsze miejsce na wielkie oszczędności. Wyjaśniamy formaty (JPG, PNG, WebP, AVIF, SVG), właściwe wymiary, kompresję, lazy loading i automatyzację w WordPressie, dzięki której cała biblioteka zdjęć odchudzi się sama.
Autor: McProdukt · Opublikowano: · Aktualizacja:
Dlaczego obrazy są tak ważne dla szybkości?
Według corocznych badań HTTP Archive obrazy stanowią największą pojedynczą część wagi przeciętnej strony internetowej. Jedno nieoptymalizowane zdjęcie z aparatu (5-8 MB) waży więcej niż cały kod HTML, CSS i JavaScript dobrze zrobionej witryny razem wzięte. Dobra wiadomość: żadna inna optymalizacja nie daje tak dużego efektu przy tak małym wysiłku - i żadna nie jest równie bezpieczna, bo nie dotyka logiki strony.
Który format do czego? Ściąga
WebP - dzisiejszy standard dla zdjęć i grafik na WWW: 25-35% mniejszy od JPG przy tej samej jakości, obsługiwany przez wszystkie współczesne przeglądarki. Domyślny wybór.
AVIF - jeszcze skuteczniejsza kompresja (często o kolejne 20-30% mniej niż WebP), wsparcie przeglądarek już powszechne; wady: wolniejsze kodowanie. Idealny jako pierwszy wybór z WebP jako zapasem.
JPG - nadal OK dla zdjęć, jeśli nie możesz użyć WebP; jakość 75-85% jest wizualnie nie do odróżnienia od 100%.
PNG - tylko tam, gdzie potrzebna bezstratność lub przezroczystość, której nie pokrywa WebP (rzadkość); zrzuty ekranu z tekstem.
SVG - logo, ikony, proste ilustracje: wektor waży kilobajty i skaluje się bez strat na każdym ekranie.
Wymiary: nie wysyłaj plakatu tam, gdzie wisi pocztówka
Najczęstszy błąd: obraz 4000 px szerokości wyświetlany w kolumnie o szerokości 400 px. Przeglądarka pobiera całość, po czym... zmniejsza. Zasady:
Maksymalna sensowna szerokość na stronę: ~1600-1920 px dla pełnoekranowych hero, ~800-1200 px dla obrazów w treści, ~600 px dla miniatur produktów.
WordPress generuje rozmiary pośrednie automatycznie - i serwuje je przez srcset (przeglądarka sama wybiera właściwy dla ekranu). Warunek: wgrywaj rozsądny oryginał, nie 8000 px z aparatu.
Ekrany Retina: wystarczy 1,5-2× rozmiar wyświetlania; więcej to marnowanie transferu.
Kompresja: jakość 80 wygląda jak 100, waży jak 30
Kompresja stratna usuwa szczegóły niewidoczne dla oka. Praktyka:
ustawienie jakości 75-85% to strefa optymalna - różnicy nie zobaczysz, a plik chudnie kilkukrotnie;
narzędzia ręczne: Squoosh (squoosh.app - darmowe, w przeglądarce, z podglądem przed/po), TinyPNG;
cel praktyczny: obraz w treści < 100-200 KB, hero < 250-350 KB, miniatura < 50 KB.
Lazy loading - ładuj tylko to, co widać
Lazy loading opóźnia pobieranie obrazów spoza pierwszego ekranu do momentu, aż użytkownik do nich doscrolluje. WordPress dodaje atrybut loading="lazy" automatycznie od wersji 5.5 - upewnij się tylko, że motyw tego nie psuje.
Jeden krytyczny wyjątek: obraz hero (największy element pierwszego ekranu) NIE może być lazy - opóźniłbyś metrykę LCP, czyli dokładnie to, co Google mierzy najmocniej. Dla hero właściwe są atrybuty loading="eager" i fetchpriority="high" (dobre wtyczki optymalizacyjne ustawiają to same). Więcej o metrykach - w artykule o Core Web Vitals na naszym blogu.
Automatyzacja w WordPressie - ustaw raz, działa zawsze
Nie musisz optymalizować ręcznie każdego pliku:
Converter for Media (darmowa, polska) - konwertuje całą bibliotekę do WebP/AVIF i serwuje nowe formaty automatycznie, ze starymi jako zapasem;
Smush / ShortPixel / Imagify - kompresja przy wgrywaniu + hurtowo wstecz, skalowanie zbyt dużych oryginałów;
wtyczki cache (LiteSpeed Cache) - często mają optymalizację obrazów wbudowaną, łącznie z generowaniem WebP i poprawnym traktowaniem hero.
Po masowej konwersji wyczyść cache strony i sprawdź kilka podstron - zwłaszcza galerie i slidery starszych wtyczek.
Obrazy a SEO - dwa słowa o alt i nazwach
Nazwa pliku: opisowa, z myślnikami - „hosting-panel-directadmin.webp", nie „IMG_4521.webp";
tekst alternatywny (alt): zwięzły opis zawartości - dla czytników ekranu, dla Google Images i jako tekst zastępczy; nie upychaj w nim słów kluczowych na siłę;
grafika z tekstem: unikaj - tekst na obrazku jest niewidoczny dla wyszukiwarki i nieczytelny na telefonie; treść trzymaj w HTML.
Najczęściej zadawane pytania
Czy WebP na pewno zadziała u wszystkich?
Wszystkie współczesne przeglądarki (Chrome, Firefox, Safari, Edge) obsługują WebP od lat. Wtyczki konwertujące i tak zachowują oryginały jako zapas, więc ryzyko jest zerowe.
Mam sklep z tysiącami zdjęć produktów - od czego zacząć?
Wtyczka z konwersją hurtową w tle (ShortPixel/Converter for Media) + limity rozmiaru przy wgrywaniu nowych. Konwersja potrwa kilka godzin, ale odbywa się automatycznie. Efekt w sklepie bywa spektakularny - to zwykle połowa wagi katalogu (resztę recept opisujemy w tekście o przyspieszaniu WooCommerce).
Zrobiłem wszystko - co jeszcze mogę ugrać?
Wymiary w atrybutach (stabilność układu), preload dla hero, CDN przy międzynarodowym ruchu i przegląd, czy każdy obraz w ogóle jest potrzebny - najlżejszy obraz to ten, którego nie ma.
Podsumowanie
Formuła zdrowych obrazów: WebP/AVIF + rozsądne wymiary + jakość ~80% + lazy loading (poza hero) + automatyzacja wtyczką. Godzina konfiguracji, a strona chudnie o połowę i przyspiesza odczuwalnie na każdym telefonie. W połączeniu z cache i szybkim hostingiem - masz komplet fundamentów wydajności.