Optymalizacja obrazów na stronie

Optymalizacja obrazów na stronie, czyli o co tu chodzi

Obrazy to najczęściej największy składnik wagi strony internetowej. Nieoptymalizowane zdjęcia odpowiadają za wolne ładowanie, słaby wynik LCP w Core Web Vitals i wyższy wskaźnik porzucania strony przez użytkowników. Dobra wiadomość jest taka, że optymalizacja obrazów to obszar, w którym można uzyskać duże efekty bez gruntownego przebudowywania witryny.

Ten artykuł wyjaśnia, co konkretnie należy zrobić z obrazami na stronie firmowej, jakich formatów używać, jak kompresować pliki bez straty widocznej jakości i jak skonfigurować ładowanie, żeby Google i użytkownicy byli zadowoleni.

Dlaczego obrazy mają tak duży wpływ na szybkość strony

Przeglądarka ładuje wszystkie zasoby strony od góry do dołu: HTML, CSS, JavaScript, a w tym też obrazy. Jeśli zdjęcie w nagłówku waży 3 MB i nie jest skompresowane, przeglądarka musi je w całości pobrać, zanim wyświetli tę część strony użytkownikowi. To bezpośrednio psuje wskaźnik LCP, czyli czas do wyrenderowania największego widocznego elementu.

Google włączył Core Web Vitals jako czynnik rankingowy w 2021 roku. Wskaźnik LCP powinien wynosić poniżej 2,5 sekundy, żeby Google uznał stronę za dobrą. Większość stron firmowych z nieoptymalizowanymi obrazami nie spełnia tego kryterium.

Drugi skutek to zachowanie użytkowników. Strona ładująca się ponad trzy sekundy notuje wyraźnie wyższy wskaźnik porzuceń, co oznacza, że ludzie zamykają kartę, zanim zobaczą treść. To problem zarówno dla konwersji, jak i dla sygnałów behawioralnych, które pośrednio wpływają na pozycje.

Więcej o tym, jak szybkość ładowania łączy się z pozycjami w Google, opisujemy w artykule jak zmniejszyć czas ładowania strony i poprawić pozycje.

Format pliku: WebP, AVIF, JPEG i PNG

Wybór formatu to pierwszy krok optymalizacji. Każdy format ma inne zastosowanie i inny stosunek jakości do rozmiaru pliku.

Dla większości stron firmowych optymalna strategia to: WebP dla zdjęć i fotografii, SVG dla ikon i logotypów, PNG wyłącznie tam, gdzie potrzebna jest przezroczystość i WebP nie wystarczy.

Kompresja obrazów: stratna i bezstratna

Kompresja to zmniejszenie rozmiaru pliku bez zmiany jego wymiarów. Istnieją dwa podejścia: bezstratne (lossless), gdzie nie traci się żadnej informacji, i stratne (lossy), gdzie celowo usuwa się dane, których ludzkie oko i tak nie rozróżni.

W praktyce dla stron internetowych kompresja stratna na poziomie 80-85 procent jakości jest zazwyczaj niewidoczna dla użytkownika, a zmniejsza rozmiar pliku o 50 do 80 procent.

Przy kompresji warto zachować oryginalny plik w wyższej rozdzielczości poza serwerem. Skompresowanego pliku nie da się przywrócić do oryginału, a może się zdarzyć, że będziesz potrzebować wersji do druku lub innych zastosowań.

Wymiary obrazu: dopasowanie do miejsca wyświetlania

Kompresja to połowa sukcesu. Druga połowa to dopasowanie rozmiaru w pikselach do miejsca, w którym obraz faktycznie się wyświetla.

Jeśli na stronie masz sekcję z zdjęciem wyświetlanym w kolumnie szerokiej na 600 pikseli, a wgrywasz plik o szerokości 3000 pikseli, przeglądarka i tak go pobiera w całości, a potem zmniejsza przez CSS. Użytkownik płaci za pobieranie 5-krotnie większego pliku niż potrzebuje.

Zasady dopasowania wymiarów:

• Ustal maksymalną szerokość wyświetlania dla każdego miejsca na stronie (sekcja hero, kafelka w siatce, miniaturka artykułu).
• Na wyświetlacze Retina (2x) wgraj wersję o podwojonej szerokości pikseli, ale skompresowaną mocniej niż wersję standardową.
• Używaj atrybutu srcset w tagu <img>, żeby serwować różne rozmiary w zależności od rozdzielczości ekranu i rozmiaru okna przeglądarki.

WordPress automatycznie generuje kilka rozmiarów obrazka przy wgraniu (thumbnail, medium, large). Upewnij się, że motyw używa atrybutu srcset, żeby przeglądarka mogła wybrać optymalny rozmiar.

Lazy loading: ładuj obrazy wtedy, gdy są potrzebne

Strona z galerią 20 zdjęć nie powinna ładować wszystkich naraz. Użytkownik widzi tylko to, co mieści się na ekranie, a reszta czeka poniżej. Lazy loading sprawia, że przeglądarka pobiera obraz dopiero wtedy, gdy użytkownik przewija stronę w jego kierunku.

Wdrożenie jest proste, bo lazy loading to dziś standard HTML5. Wystarczy dodać atrybut loading="lazy" do tagu <img>.

<img src="zdjecie.webp" loading="lazy" alt="Opis zdjęcia" width="800" height="600">

Ważna zasada: nie stosuj loading="lazy" dla obrazu, który jest widoczny od razu po otwarciu strony, szczególnie dla elementu LCP. Dla niego należy użyć atrybutu fetchpriority="high", który mówi przeglądarce, żeby pobrała go priorytetowo.

Atrybuty width i height: rezerwuj miejsce przed załadowaniem

Gdy przeglądarka buduje stronę, musi wiedzieć, ile miejsca zarezerwować na każdy element. Jeśli tag <img> nie ma podanych atrybutów width i height, przeglądarka nie wie, ile miejsca zająć. Po załadowaniu obrazka inne elementy przeskakują, co zwiększa wskaźnik CLS (Cumulative Layout Shift) i psuje stabilność układu strony.

Podawanie wymiarów to obowiązek, nie opcja:

<img src="zdjecie.webp" width="800" height="600" alt="Opis zdjęcia">

Proporcja podanych wymiarów wystarczy, żeby przeglądarka zarezerwowała miejsce o odpowiednim stosunku szerokości do wysokości. CSS może potem skalować obraz do potrzebnego rozmiaru, ale CLS będzie niski.

WordPress od wersji 5.5 dodaje atrybuty width i height automatycznie. Starsze motywy lub niestandardowe implementacje galerii mogą tego nie robić. Sprawdź w PageSpeed Insights, czy pojawia się ostrzeżenie "Image elements do not have explicit width and height".

Tekst alternatywny (alt): SEO i dostępność

Atrybut alt to tekstowy opis obrazka. Pełni dwie funkcje: dostępnościową (czytniki ekranu dla osób niewidomych odczytują ten tekst) i SEO (Google indeksuje tekst alt jako opis obrazka, co pomaga w widoczności w Google Grafika).

Zasady pisania dobrego atrybutu alt:

• Opisuj, co faktycznie widać na zdjęciu, konkretnie i zwięźle.
• Jeśli obraz pełni funkcję dekoracyjną i nie wnosi informacji, zostaw alt pusty (alt=""), ale nie pomijaj atrybutu.
• Nie upychaj w alt fraz kluczowych na siłę. To nie pomaga i może być odebrane jako spam.
• Dla zdjęć produktów lub usług uwzględnij nazwę, kontekst i lokalizację, jeśli to naturalne.

Przykład dobrego alt: alt="Gabinet stomatologiczny w centrum Wrocławia, fotel dentystyczny i sprzęt do leczenia". Przykład złego: alt="dentysta wrocław najtaniej najlepszy gabinet stomatologiczny".

Więcej o tym, jak treść strony wpływa na widoczność lokalną, opisujemy w artykule jak pisać treści na stronę lokalną, żeby rankować.

Preload elementu LCP: priorytet dla kluczowego obrazu

Jeśli element LCP to obraz wczytywany przez CSS (background-image) lub ładowany przez JavaScript, przeglądarka odkrywa go późno w procesie ładowania strony. Można to naprawić przez deklarację preload w sekcji <head>.

<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

To instruuje przeglądarkę, żeby zaczęła pobierać ten plik jak najwcześniej, jeszcze zanim przetworzy CSS lub skrypty. Efekt jest widoczny w wynikach LCP, szczególnie na urządzeniach mobilnych z wolniejszym połączeniem.

W WordPress preload można dodać przez funkcję wp_head w pliku functions.php lub przez opcję w wtyczkach do optymalizacji szybkości takich jak WP Rocket.

CDN dla obrazów: szybsze pobieranie z bliskiego serwera

CDN (Content Delivery Network) to sieć serwerów rozmieszczonych geograficznie, które przechowują kopie zasobów strony bliżej użytkownika. Obrazy pobrane z serwera w Niemczech docierają do użytkownika w Polsce szybciej niż z serwera w USA.

Cloudflare w bezpłatnym planie daje podstawowy CDN i automatycznie serwuje zasoby przez swoje węzły. Dla większości stron firmowych jest to wystarczające rozwiązanie bez dodatkowych kosztów.

Bardziej zaawansowane opcje to Cloudflare Images, Imgix lub Cloudinary, które oferują transformację obrazów na żądanie, czyli automatyczną zmianę rozmiaru, kompresję i konwersję formatu na podstawie parametrów URL. Są przydatne przy dużych serwisach z setkami zdjęć, ale dla typowej strony firmowej bezpłatny CDN w zupełności wystarcza.

Kolejność działań: jak zoptymalizować obrazy krok po kroku

Jeśli zaczynasz od zera, poniższa kolejność daje największy efekt przy najmniejszym nakładzie pracy.

1. 01
   Zmierz aktualny stanWejdź na pagespeed.web.dev i wpisz adres strony. Sprawdź, jakie ostrzeżenia dotyczą obrazów: 'Properly size images', 'Serve images in next-gen formats', 'Efficiently encode images'. Zapisz wyniki.
2. 02
   Skompresuj i przekonwertuj istniejące obrazyPobierz istniejące obrazy ze strony, przekonwertuj je do WebP w Squoosh lub TinyPNG i wgraj z powrotem. Na WordPress zainstaluj Imagify lub ShortPixel i uruchom kompresję całej biblioteki mediów.
3. 03
   Dopasuj wymiary do miejsca wyświetlaniaDla każdego miejsca na stronie ustal maksymalną potrzebną szerokość w pikselach. Przytnij i przeskaluj obrazy przed wgraniem. Nie wgrywaj zdjęć o szerokości powyżej 2000 pikseli, chyba że naprawdę zajmują pełną szerokość ekranu.
4. 04
   Dodaj atrybuty width i heightSprawdź, czy każdy tag img ma podane wymiary. W nowoczesnym WordPress dzieje się to automatycznie, ale sprawdź w DevTools, czy nie ma obrazków bez tych atrybutów.
5. 05
   Ustaw lazy loading dla obrazów poniżej foldDodaj loading='lazy' do obrazów, które nie są widoczne od razu po otwarciu strony. Element LCP powinien mieć fetchpriority='high', a nie lazy.
6. 06
   Dodaj preload dla elementu LCPZidentyfikuj element LCP strony w PageSpeed Insights. Jeśli to obraz, dodaj do nagłówka strony tag link rel='preload' as='image' z jego adresem URL.
7. 07
   Zmierz wyniki po zmianachPonownie uruchom PageSpeed Insights. Sprawdź, czy ostrzeżenia dotyczące obrazów zniknęły lub zmniejszyły szacowany koszt czasowy. Dane terenowe w Google Search Console aktualizują się przez 28 dni.

Optymalizacja obrazów a pozycje lokalne

Szybkość strony ma szczególne znaczenie dla firm lokalnych, bo większość wyszukiwań lokalnych odbywa się na smartfonach. Użytkownik szuka usługi w Warszawie, Krakowie lub Wrocławiu na telefonie z mobilnym połączeniem, a powolna strona traci go na rzecz szybszego konkurenta.

Według danych Backlinko, 46 procent wszystkich wyszukiwań w Google ma intencję lokalną. Pierwsze wyniki organiczne zbierają zdecydowanie większość kliknięć. Firma na pozycji 1 zbiera średnio 27,6 procent kliknięć, na pozycji 10 poniżej 3 procent (Backlinko, Google CTR Stats).

Szybka strona z dobrze zoptymalizowanymi obrazami to jeden z elementów budowania widoczności lokalnej. Szczegóły dotyczące pozycjonowania w konkretnych miastach znajdziesz na stronach dla Warszawy, Krakowa, Wrocławia i Gdańska.

Całościowe podejście do technicznego SEO opisujemy na stronie pozycjonowanie stron.

Narzędzia do audytu obrazów

Przed przystąpieniem do optymalizacji warto wiedzieć, co konkretnie wymaga poprawy. Kilka narzędzi, które pomagają to ustalić.

PageSpeed Insights wskazuje konkretne obrazy z szacowanymi oszczędnościami w sekundach. Sekcja "Możliwości" zawiera trzy pozycje dotyczące obrazów: rozmiar pliku, format i dopasowanie wymiarów.

Screaming Frog to narzędzie do audytu SEO, które w wersji bezpłatnej pozwala przeskanować do 500 URL-i i wyciągnąć listę wszystkich obrazów na stronie z ich rozmiarami, atrybutami alt i adresami URL.

Google Search Console w raporcie Core Web Vitals wskazuje podstrony ze słabym wynikiem LCP, co często jest bezpośrednio powiązane z problemem z obrazami.

Chrome DevTools, zakładka Lighthouse, generuje szczegółowy audyt z rekomendacjami dotyczącymi obrazów, cache, JavaScriptu i innych zasobów.

Więcej o konfiguracji i korzystaniu z Google Search Console opisujemy w artykule jak skonfigurować Google Search Console.

Najczęstsze pytania

Czy format WebP jest bezpieczny do stosowania na stronie?

Tak. WebP jest obsługiwany przez wszystkie nowoczesne przeglądarki, w tym Chrome, Firefox, Safari (od wersji 14), Edge i Opera. Obsługa przekracza 95 procent użytkowników globalnie. Jeśli potrzebujesz obsługi starszych przeglądarek, można użyć znacznika <picture> z WebP jako głównym formatem i JPEG jako fallbackiem, ale dla większości stron firmowych sam WebP jest wystarczający.

O ile optymalizacja obrazów poprawia wynik PageSpeed?

Efekt zależy od stanu wyjściowego. Strona z nieoptymalizowanymi zdjęciami z aparatu fotograficznego może poprawić wynik z 30 do 80 punktów wyłącznie przez kompresję i konwersję do WebP. Na stronach, które miały już częściową optymalizację, wzrost będzie mniejszy. W praktyce optymalizacja obrazów jest najczęściej najważniejszym pojedynczym działaniem dla poprawy wyniku PageSpeed.

Czy warto używać AVIF zamiast WebP?

AVIF jest nowszym formatem i oferuje lepszą kompresję niż WebP, szczególnie przy niskich nastawach jakości. Jednak kodowanie plików AVIF jest wolniejsze, a wsparcie w starszych przeglądarkach nieco węższe niż WebP. Dla nowych projektów z nowoczesnym stackiem (Nuxt, Next.js) AVIF jest dobrym wyborem. Dla WordPress z typową konfiguracją WebP jest prostszym i wystarczającym rozwiązaniem.

Jak sprawdzić, który obraz jest elementem LCP?

Otwórz PageSpeed Insights lub Lighthouse w Chrome DevTools i uruchom analizę. W sekcji Diagnostics znajdź wpis "Largest Contentful Paint element". Narzędzie wskaże konkretny element HTML, który jest mierzony jako LCP. Najczęściej jest to obrazek w sekcji hero albo zdjęcie w nagłówku strony.