Jeśli Twoja strona ładuje się wolno, to z prawdopodobieństwem graniczącym z pewnością głównym winowajcą są obrazki. Zdjęcie prosto z telefonu potrafi ważyć 8 megabajtów, a na stronie potrzebuje ułamka tego. Pomnóż to przez galerię, sekcję portfolio i zdjęcia produktów, i masz stronę-tira, której nie uratuje żadna wtyczka cache. Dobra wiadomość: optymalizacja obrazków to najprostsza z technicznych rzeczy, jakie zrobisz dla szybkości strony, i w tym artykule ułożę Ci ją w system: wymiary, kompresja, format WebP, narzędzia na komputer i wtyczki, a na deser teksty alternatywne generowane z AI, które pracują na Twoje SEO i AEO.
Trzy dźwignie: wymiary, kompresja, format
Zanim przejdziemy do narzędzi, zrozum, co właściwie optymalizujemy, bo to trzy niezależne dźwignie:
Dźwignia 1: wymiary (piksele). Zdjęcie z telefonu ma np. 4000 pikseli szerokości, a najszersza sekcja strony potrzebuje około 1600-1920. Wyświetlanie zdjęcia 4000 px w ramce 800 px to marnowanie łącza odwiedzającej: przeglądarka pobiera olbrzyma, żeby pokazać miniaturę. Zasada: przeskaluj obrazek do maksymalnej szerokości, w jakiej będzie wyświetlany (pełna szerokość strony: 1920 px, treść wpisu: 1200 px, miniatury produktów: zgodnie z motywem).
Dźwignia 2: kompresja (jakość zapisu). Ten sam obrazek w tych samych wymiarach może ważyć 2 MB albo 200 KB, zależnie od stopnia kompresji. Współczesna kompresja przy rozsądnych ustawieniach jest niewidoczna gołym okiem, a odchudza pliki wielokrotnie.
Dźwignia 3: format. WebP to format stworzony pod strony internetowe: przy tej samej jakości wizualnej pliki są wyraźnie mniejsze niż JPG czy PNG, a obsługują go wszystkie współczesne przeglądarki. To właśnie o WebP upomina się raport PageSpeed hasłem o serwowaniu obrazów w nowoczesnych formatach.
Cel liczbowy, który daję kursantkom: pojedynczy obrazek na stronie poniżej 200 KB, zdjęcia pełnoekranowe wyjątkowo do 400 KB. Z trzema dźwigniami to cel łatwo osiągalny.
Droga 1: optymalizacja przed wgraniem (komputer)
Najzdrowszy nawyk to odchudzanie obrazków przed wgraniem do WordPressa, bo lekka biblioteka mediów to też szybsze kopie zapasowe i mniej miejsca na hostingu.
Na Macu: bezpłatny ImageOptim, ulubieniec za prostotę: przeciągasz obrazki na okno programu, a optymalizacja startuje sama. Uwaga na jedną cechę, o którą pytały kursantki: program nadpisuje oryginały (stare wersje lądują w koszu), więc jeśli chcesz zachować pełnowymiarowe zdjęcia, trzymaj je w osobnym folderze źródłowym, a do optymalizacji przeciągaj kopie. Do zmiany wymiarów przed kompresją wystarczy systemowy Podgląd (Narzędzia → Dostosuj wielkość), a osoby pracujące w Affinity Photo czy Pixelmatorze mają eksport z ustawieniami jakości wbudowany.
Na Windowsie: analogiczne darmowe narzędzia do hurtowej zmiany wymiarów i kompresji znajdziesz bez trudu, a uniwersalną alternatywą są narzędzia online typu Squoosh, gdzie widzisz podgląd jakości przy każdym ustawieniu kompresji i możesz od razu zapisać do WebP.
Workflow, który polecam: folder "źródłowe" z oryginałami, hurtowa zmiana wymiarów, kompresja lub eksport do WebP, i dopiero taki komplet wędruje do WordPressa.
Droga 2: wtyczka, która sprząta za Ciebie (i za przeszłość)
A co z setkami obrazków już wgranych na stronę? Tu pada najważniejsze pytanie z forum: "czy będę musiała ręcznie podmieniać zdjęcia na wszystkich stronach?". Nie. I to jest właśnie urok wtyczek optymalizujących: pracują na plikach w bibliotece mediów, w miejscu, więc wszystkie osadzenia obrazków na stronach dalej działają, tylko serwują lżejsze wersje. Zero ręcznej podmiany.
Dwie sprawdzone opcje:
Smush: klasyka optymalizacji, kompresuje hurtowo istniejącą bibliotekę i automatycznie każdy nowy obrazek przy wgrywaniu. Darmowa wersja wystarcza na start.
Converter for Media: wtyczka polskiego twórcy, której siłą jest konwersja biblioteki do formatu WebP z automatycznym serwowaniem: przeglądarka dostaje WebP, a oryginały zostają na serwerze jako zabezpieczenie. To najprostszy sposób wdrożenia WebP bez dotykania czegokolwiek na stronach.
Te drogi się nie wykluczają: rozsądny duet to wymiary i wstępna kompresja przed wgraniem (droga 1) plus wtyczka konwertująca do WebP i pilnująca nowych plików (droga 2). Po wdrożeniu wyczyść pamięć podręczną (znasz zasadę z artykułu o wtyczce cache) i porównaj wynik strony w PageSpeed Insights przed i po, bo różnica bywa spektakularna i motywująca.
Alt-teksty: obrazki, które pracują na SEO i AEO
Optymalizacja techniczna to połowa tematu. Druga połowa: każdy obrazek na stronie powinien mieć tekst alternatywny (alt), i to z trzech powodów naraz. Po pierwsze, dostępność: czytniki ekranu odczytują alt osobom niewidzącym. Po drugie, SEO: Google rozumie obrazek przez jego opis i indeksuje go w wyszukiwarce grafik. Po trzecie, coraz ważniejsze AEO: modele AI, cytując i polecając treści, opierają się na tekstowych opisach tego, co na stronie, więc obrazek bez altu jest dla nich niewidzialny.
Dobry alt opisuje konkretnie, co widać, z naturalnym (nie upchanym) użyciem frazy, gdy pasuje: zamiast "zdjęcie1final.jpg" napisz "kobieta pracująca na laptopie przy biurku z notatnikiem marki X". Alty uzupełnisz w bibliotece mediów lub przy każdym osadzeniu obrazka.
I tu wchodzi AI, bo pisanie altów dla stu obrazków to praca, której nikt nie lubi. Czaty AI z obsługą obrazów opisują zdjęcia automatycznie: wgraj obrazek (lub kilka) z promptem:
Napisz teksty alternatywne (alt) dla załączonych obrazków ze strony o [temat strony]. Każdy alt: konkretny opis tego, co widać, po polsku, maksymalnie 125 znaków, bez fraz typu "zdjęcie przedstawia". Tam, gdzie pasuje naturalnie, uwzględnij kontekst: [fraza lub nazwa marki]. Zwróć listę: nazwa pliku, proponowany alt.
Wygenerowane opisy przejrzyj (odpowiadasz za nie Ty, mechanizm znasz z moich artykułów o quizach i tłumaczeniach) i wklej do biblioteki mediów. Godzina pracy zamiast dnia, a Twoje obrazki zaczynają istnieć dla wyszukiwarek i modeli AI. Systemowe podejście do widoczności marki w odpowiedziach AI, od altów po strukturę treści, rozkładam w e-booku Metoda TOP AI.
Krok po kroku
- Ustal maksymalne szerokości obrazków dla swojej strony (pełna szerokość, treść, miniatury) i zapisz je w notatce.
- Uporządkuj workflow nowych obrazków: folder źródłowy, zmiana wymiarów, kompresja (ImageOptim na Macu, Squoosh uniwersalnie), wgranie.
- Zainstaluj wtyczkę optymalizującą (Smush lub Converter for Media) i przepuść przez nią hurtowo istniejącą bibliotekę mediów.
- Włącz konwersję i serwowanie WebP dla całej biblioteki.
- Uzupełnij teksty alternatywne, generując je partiami z AI i weryfikując przed wklejeniem.
- Porównaj wynik PageSpeed Insights przed i po, wyczyść pamięć podręczną i zapisz nowy wynik jako punkt odniesienia.
