Zdjęcie realizacji, produktu albo zespołu ma pomóc klientowi podjąć decyzję. Nie powinno przy okazji zmuszać go do czekania na kilka megabajtów danych. W małej firmie najprostszy sposób na porządek to przygotować obraz przed dodaniem go do WordPressa: wybrać kadr, dopasować wymiary i zmniejszyć plik, zachowując potrzebne szczegóły.
Na początek: wybierz jedno duże zdjęcie na ważnej podstronie i przygotuj lżejszą wersję. Nie zaczynaj od masowej zmiany całej biblioteki. Poniższy poradnik opiera się na dokumentacji, nie na własnym teście wydajności konkretnego serwisu. Weryfikacja źródeł: 13 listopada 2026 r.
Wymiary i rozmiar pliku · Wybór formatu · Przygotowanie zdjęcia · Publikacja i kontrola
1. Dwie różne rzeczy: wymiary obrazu i rozmiar pliku
Wymiary, np. 1600 × 1000 pikseli, określają liczbę punktów obrazu. Rozmiar pliku, np. 250 KB, mówi, ile danych trzeba pobrać. Zdjęcia o identycznych wymiarach mogą zajmować bardzo różną ilość miejsca. Zmniejszenie obrazka myszką w edytorze strony nie oznacza automatycznie zmniejszenia pliku źródłowego.
Przykład poglądowy: zakład stolarski pokazuje regał w kolumnie o szerokości około 800 pikseli. Wersja o szerokości 1600 pikseli jest rozsądnym punktem wyjścia także dla ekranów o większej gęstości pikseli. Plik szeroki na 6000 pikseli zwykle nie jest tam potrzebny. Osobna galeria z powiększaniem detali może jednak wymagać większego obrazu.
Jako roboczy cel dla pojedynczego zdjęcia w artykule można przyjąć około 150–300 KB. To propozycja do sprawdzenia, nie norma WordPressa ani gwarancja szybkości. Zdjęcie biżuterii, faktury tkaniny czy drobnego druku może potrzebować większego pliku. Dziesięć zdjęć po 300 KB to łącznie około 3 MB samych obrazów, jeśli wszystkie zostaną pobrane — liczba zdjęć też ma znaczenie.
2. JPEG, WebP czy AVIF?
- JPEG: dobry punkt wyjścia dla fotografii, szczególnie gdy zależy Ci na prostym przekazywaniu plików między różnymi programami.
- WebP: warto porównać z JPEG. Może dać mniejszy plik przy wystarczającej jakości; obsługuje także przezroczystość.
- AVIF: kolejny format do porównania. WordPress obsługuje go od wersji 6.5, ale możliwość przetwarzania zależy też od środowiska serwera. Sprawdź Narzędzia → Stan witryny → Informacje → Obsługa mediów.
- PNG: przydaje się do grafiki wymagającej bezstratnego zapisu. Nie wybieraj go automatycznie do każdej fotografii, bo plik może być niepotrzebnie duży.
Nie ma formatu wygrywającego w każdym przypadku. Porównaj dwa warianty tego samego zdjęcia przy docelowych wymiarach. Jeśli nowy format sprawia problemy z wgrywaniem lub miniaturami, zachowaj działający JPEG i wyjaśnij ograniczenie z hostingiem. Sama zmiana końcówki nazwy z .jpg na .webp nie konwertuje pliku.
3. Przygotuj zdjęcie w kilku krokach
Możesz użyć edytora, który już masz, albo Squoosh — bezpłatnego narzędzia działającego w przeglądarce. Dokumentacja projektu podaje, że obrazy są przetwarzane lokalnie, a nie wysyłane do serwera. Jednocześnie opisuje zbieranie danych analitycznych, w tym rozmiarów przed i po kompresji; nie należy więc utożsamiać lokalnej obróbki z całkowitym brakiem telemetrii.
- Zachowaj oryginał. Pracuj na kopii. Oryginał przyda się do druku, ponownego kadrowania lub większej galerii.
- Wybierz kadr. Usuń zbędne tło, ale zostaw to, co klient powinien ocenić: cały produkt, wykończenie albo sposób montażu.
- Ustaw docelowe wymiary. W Squoosh służy do tego opcja Resize. Zachowaj proporcje, żeby nie rozciągnąć produktu.
- Wybierz format i jakość. Zacznij od ustawień domyślnych, a potem zmniejszaj jakość stopniowo. Wartości suwaka z różnych formatów nie są bezpośrednio porównywalne.
- Sprawdź szczegóły. Porównaj oryginał i wynik przy powiększeniu 100%, zwłaszcza krawędzie, napisy i fakturę materiału. Potem oceń zdjęcie w rozmiarze, w jakim ma być oglądane na stronie.
- Pobierz wynik. Nadaj zrozumiałą nazwę, np. regal-debowy-detal.webp. Sprawdź rozmiar pliku, zanim dodasz go do mediów.
4. Dodaj do WordPressa i sprawdź oczami klienta
Wgraj przygotowany plik do biblioteki mediów i wybierz go w odpowiednim bloku obrazu lub jako obraz wyróżniający. Dodaj tekst alternatywny, czyli krótki opis informacji przekazywanej przez zdjęcie osobie, która go nie widzi. Dla detalu produktu może to być: „Dębowa półka z zaokrągloną krawędzią i widocznym usłojeniem”. Nie upychaj w opisie listy słów kluczowych.
Opis zależy od roli obrazu. Czysta dekoracja może mieć pusty tekst alternatywny, a obraz będący przyciskiem powinien komunikować działanie. Ważnego cennika albo instrukcji nie publikuj wyłącznie jako zdjęcia — udostępnij również zwykły tekst.
Otwórz podgląd wpisu na komputerze i telefonie. Czy produkt nie został ucięty? Czy litery są czytelne? Czy duże zdjęcie nie wygląda jak rozmyta miniatura? Po publikacji sprawdź stronę również bez zalogowania. Przy wymianie istniejącego obrazu upewnij się, że pamięć podręczna nie pokazuje starszej wersji.
5. Co zrobić ze zdjęciami, które już są na stronie?
Zacznij od najważniejszej podstrony oferty, a nie od wszystkich załączników. Przed większą zmianą przygotuj kopię zapasową WordPressa i sprawdź możliwość odtworzenia. Zapisz, które zdjęcie zmieniasz, dodaj nową wersję i zweryfikuj jej użycie w artykule, galerii oraz obrazie wyróżniającym.
Nie usuwaj starego pliku tylko dlatego, że nie jest przypisany do wpisu w bibliotece. Może być używany w innym miejscu. Przy setkach zdjęć automatyzacja wtyczką może oszczędzić ręczną pracę, ale przed wyborem sprawdź limity, koszt, zachowanie oryginałów i sposób cofnięcia zmian. Ten poradnik nie zakłada zakupu płatnej usługi.
Jeśli po zmniejszeniu zdjęć strona nadal działa wolno, przyczyna może leżeć także w skryptach, motywie lub serwerze. Nie obiecuj sobie konkretnego wyniku tylko po zmianie formatu. Pomocne będą również pytania do dostawcy hostingu.
Krótka checklista przed publikacją
- Mam oryginał i prawo do publikacji zdjęcia.
- Kadr oraz wymiary pasują do miejsca na stronie.
- Rozmiar pliku zmniejszył się bez utraty ważnych szczegółów.
- Opis alternatywny odpowiada funkcji obrazu.
- Podgląd na telefonie i komputerze wygląda dobrze.
Na dziś wystarczy jedno zadanie: przygotuj lżejszą wersję największego zdjęcia na stronie oferty. Gdy ustalisz dobre ustawienia, zapisz je jako roboczą zasadę dla kolejnych publikacji. Resztę elementów strony sprawdzisz z checklistą strony firmowej przed publikacją.
Źródła i autorstwo
- Learn WordPress: Image optimization — podstawy przygotowania obrazów.
- Make WordPress Core: obsługa AVIF i wymagania serwera.
- Squoosh: dokumentacja projektu i zasady przetwarzania obrazów.
- W3C WAI: teksty alternatywne i rola obrazów.
Opracowanie: redakcja Koloseo. Przykłady i docelowe rozmiary są propozycjami redakcyjnymi, nie wynikami pomiarów. Zdjęcie główne: Al Mansur / Unsplash; zdjęcie w treści: Radek Grzybowski / Unsplash. Fotografie wykorzystano na licencji Unsplash.