Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🖼 Optymalizacja obrazów w WordPress: pełny przewodnik

🖼 Optymalizacja obrazów w WordPress: pełny przewodnik

Wgrał Pan kilkanaście zdjęć z telefonu i strona zaczęła pełznąć. Podstrona ładuje się sześć sekund, Google obniża pozycje, hosting wysyła ostrzeżenie o zapełnieniu dysku. Brzmi znajomo? Według danych HTTP Archive w 2026 roku obrazy stanowią około 45% wagi przeciętnej strony internetowej. Dla witryny z mediateką liczącą kilka gigabajtów to bezpośrednie straty: odrzucenia, obniżone SEO, rozdęte kopie zapasowe. Porządek robi się w jeden wieczór.

💡 Szybki przegląd:

  • Konwertuj Pan pliki JPEG i PNG do WebP lub AVIF: rozmiar spada o jedną czwartą i więcej przy tej samej jakości wizualnej.
  • Skonfiguruj Pan automatyczną zmianę rozmiaru przez Imsanity lub Smush: gigantyczne zdjęcia z telefonu znikają na zawsze.
  • Włącz Pan leniwe ładowanie: WordPress robi to natywnie od wersji 5.5, jednym zaznaczeniem.
  • Zainstaluj Pan wtyczkę do kompresji (Smush, ShortPixel lub EWWW): masowo skompresuje mediatekę i wyczyści stare pliki.
  • Wypełnij Pan tekst alternatywny dla każdego obrazu: wyszukiwarki widzą zdjęcia tylko przez niego.

Przygotowujemy obrazy do przesłania

Przykład zmiany rozmiaru obrazu przed przesłaniem

Przesyłanie zdjęć o szerokości 4000 pikseli na bloga z obszarem treści 750 pikseli jest bezcelowe. WordPress utworzy pomniejszone kopie, ale oryginał pozostanie martwym balastem. Przed wysłaniem proszę zmniejszyć obraz do szerokości 1200-1600 pikseli, z zapasem pod retina. Narzędzia: wbudowany Paint, online Easy Resize lub dowolny edytor.

Porównanie formatów obrazów JPEG i PNG

Zasada formatu: fotografia, JPEG, logo/zrzut ekranu z tekstem, PNG. Od lat 20. XXI wieku w sieci ugruntowały się WebP (o 25-34% lżejszy od JPEG, według danych Google) oraz AVIF (do 50% lżejszy). Konwersję można wykonać przez Squoosh lub zlecić wtyczce, prawie każda z poniższej listy potrafi automatycznie generować kopie WebP.

Jakość: obniżenie JPEG z 12 do 8 (skala Photoshop) zmniejsza rozmiar o połowę przy niezauważalnej różnicy. Standard dla webu, 80-85%. Darmowy TinyPNG robi to samo przez przeciągnięcie pliku do przeglądarki.

Nazwy plików: nie IMG_4827.jpg, a kak-szhat-izobrazheniya-wordpress.jpg. Bez spacji, z łącznikami, ze słowem kluczowym. Wyszukiwarki uwzględniają nazwę pliku podczas indeksowania obrazów.

Metadane po przesłaniu

Plik został przesłany, praca nie jest zakończona. Tekst alternatywny: 4-8 słów, opisowo, ze słowem kluczowym. Nie „foto1", a „porównanie formatów WebP i JPEG w WordPress". Tytuł i opis pomagają w bibliotece mediów i mają znaczenie dla SEO. Wbudowany edytor WordPress umożliwia obrócenie, przycięcie i skalowanie od razu po przesłaniu.

Jeśli zmienili Państwo motyw lub zarejestrowali nowe rozmiary przez add_image_size(), wtyczka Regenerate Thumbnails (milion instalacji) odtwarza wszystkie rozmiary jednym kliknięciem.

Interfejs wtyczki Regenerate Thumbnails do masowego przetwarzania

Wtyczki do kompresji: porównanie

Ręczne przygotowanie jest dobre dla nowych plików. Jednak z gigabajtami już przesłanych plików pracują wtyczki: kompresują, konwertują do WebP/AVIF i masowo przetwarzają bibliotekę mediów.

Wtyczka

Darmowa

WebP/AVIF

Leniwe ładowanie

CDN

Instalacji

Smush

Tak, bez limitu

WebP+AVIF w Pro

Tak

Tak (Pro)

1 mln+

ShortPixel

100 kredytów/mies.

Tak

Tak

Tak

300 tys.+

EWWW

Tak, bez limitu

WebP za darmo, AVIF w Pro

Tak

Tak (Pro)

Aktywnie

TinyPNG

500 kredytów/mies.

Tak

Nie

Nie

Aktywnie

Imsanity

Tak

Nie (tylko resize)

Nie

Nie

200 tys.+

Optimus

100 KB na plik

WebP w HQ

Nie

Nie

30 tys.+

Smush

Milion instalacji, ocena 4,8. Darmowa wersja: kompresja bez widocznej utraty jakości, automatyczny resize, leniwe ładowanie, Directory Smush dla folderów poza biblioteką mediów. Pro (6 USD/mies.): WebP, AVIF, CDN na 119 serwerów, automatyczne uzupełnianie width/height w celu eliminacji CLS. Minus: pliki powyżej 5 MB w wersji darmowej są pomijane. 🔗 Smush na WP.org

ShortPixel

Interfejs wtyczki ShortPixel do kompresji obrazów

300 tys.+ instalacji. Trzy tryby kompresji (lossless, lossy, glossy), generowanie tekstów alternatywnych przez AI w ponad 100 językach, tryb w tle bez otwartej karty przeglądarki. Kompresuje JPEG, PNG, GIF, WebP, AVIF i PDF. 100 kredytów/mies. za darmo, Unlimited, 9,99 USD/mies. 🔗 ShortPixel na WP.org

EWWW Image Optimizer

Jedyna wtyczka z całkowicie lokalną kompresją (jpegtran, optipng, cwebp, narzędzia Państwa serwera). Za darmo: nielimitowana kompresja, WebP, leniwe ładowanie z autoskalowaniem, WP-CLI. Pro: AVIF, CDN, znaki wodne, PDF. Minus: konfiguracja trudniejsza niż u konkurencji. 🔗 EWWW na WP.org

TinyPNG

Wtyczka TinyPNG z pandą w logo do kompresji obrazów

Ta sama panda z tinypng.com w formie wtyczki. Kompresuje JPEG, PNG, WebP, konwertuje do AVIF. 500 kredytów/mies. za darmo, około 50-100 zdjęć przy uwzględnieniu rozmiarów WordPressa. Interfejs jest maksymalnie prosty, kompresja bez widocznych strat. Minus: brak CDN i leniwego ładowania. 🔗 TinyPNG na WP.org

Imsanity

Wtyczka Imsanity do automatycznej zmiany rozmiaru obrazów

Ponad 200 tys. instalacji, ocena 4,9. Nie kompresuje, tylko przycina wymiary. Ustala Pan/Pani maksymalną szerokość i wysokość, a każdy przesłany plik jest automatycznie skalowany. Autor: Shane Bishop (ten sam, który tworzy EWWW). Idealna para: Imsanity do automatycznej zmiany rozmiaru + EWWW do kompresji. Całkowicie za darmo. 🔗 Imsanity na WP.org

Optimus

Ustawienia wtyczki Optimus do optymalizacji obrazów

Ponad 30 tys. instalacji od zespołu KeyCDN. Minimalna waga wtyczki (0,19 MB), serwery w Niemczech z natychmiastowym usuwaniem plików po przetworzeniu. Darmowa wersja jest ograniczona do 100 KB na plik, to wersja demo. HQ znosi limity i dodaje WebP. 🔗 Optimus na WP.org

Leniwe ładowanie

Od wersji 5.5 WordPress dodaje natywny loading="lazy" do wszystkich obrazów z width i height. Dla większości stron to wystarcza. Jeśli potrzeba więcej, wtyczki:

Wtyczka Lazy Load for Videos do leniwego ładowania wideo

Lazy Load for Videos zastępuje odtwarzacze YouTube i Vimeo klikalną miniaturą. Wideo ładuje się dopiero po kliknięciu, JavaScript nie spowalnia strony.

Wtyczka BJ Lazy Load do leniwego ładowania treści

BJ Lazy Load, lekka wtyczka do obrazów, miniatur, gravatarów i iframe z przezroczystym placeholderem.

Wtyczka a3 Lazy Load do leniwego ładowania obrazów

a3 Lazy Load, zorientowana na urządzenia mobilne, z efektami pojawiania się (fade, slide) i obsługą WooCommerce.

Wtyczka Rocket Lazy Load do leniwego ładowania

Rocket Lazy Load od WP Media (autorów WP Rocket) zastępuje obrazy i ramki iframe placeholderem. Nie obsługuje wideo, tylko obrazy i ramki.

W praktyce wystarcza połączenie „natywny lazy load + wtyczka do kompresji z wbudowanym leniwym ładowaniem (Smush lub EWWW)". Osobną wtyczkę proszę instalować tylko wtedy, gdy standardowe środki nie dają rady.

Zaawansowane narzędzia

Efekt suwaka przed i po z wtyczką Twenty Twenty

Twenty Twenty, bezpłatna wtyczka z suwakiem „przed/po". Nakłada dwa obrazy i daje czytelnikowi suwak do porównania za pomocą shortcode’a [twentytwenty]. Idealne do case’ów optymalizacyjnych. 🔗 Twenty Twenty na WP.org

Draw Attention, interaktywne hotspoty na dowolnym obrazie.

Wtyczka Draw Attention do tworzenia interaktywnych obrazów

Najechanie kursorem, podpowiedź, kliknięcie, link. Wersja bezpłatna: jeden interaktywny obraz. Pro (cena na stronie dewelopera): bez limitu, lightboxy, 20 palet kolorystycznych.

Tworzenie hotspotów we wtyczce Draw Attention

Zastosowanie: interaktywne mapy, schematy, plany pomieszczeń, infografiki. 🔗 Draw Attention na WP.org

Własne rozmiary obrazów przez kod

Aby zarejestrować niestandardowe rozmiary, proszę dodać w functions.php:

1function custom_image_sizes() {
2 add_image_size( 'custom-medium', 480, 360, true );
3 add_image_size( 'custom-large', 1200, 900, true );
4}
5add_action( 'after_setup_theme', 'custom_image_sizes' );
6
7function show_custom_sizes( $sizes ) {
8 return array_merge( $sizes, array(
9 'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10 'custom-large' => __( 'Большой (кастомный)', 'textdomain' ),
11 ));
12}
13add_filter( 'image_size_names_choose', 'show_custom_sizes' );
Interfejs wtyczki Regenerate Thumbnails do masowego przetwarzania

Po wstawieniu kodu nowe rozmiary pojawią się na liście rozwijanej podczas wstawiania obrazu. Dla istniejących plików proszę uruchomić Regenerate Thumbnails.

⁉️🤔 Często zadawane pytania

Która wtyczka do kompresji jest najlepsza dla początkującego?

Smush: zainstalował Pan, aktywował, zapomniał. Darmowa wersja automatycznie kompresuje podczas przesyłania i umożliwia masową optymalizację jednym kliknięciem. WebP i AVIF są w wersji Pro, ale na start podstawowe funkcje w zupełności wystarczą.

Czym WebP różni się od AVIF i co wybrać?

WebP: oszczędność względem JPEG (patrz dane Google w sekcji o formatach), wsparcie we wszystkich przeglądarkach. AVIF: do 50% lżejszy od JPEG, Safari obsługuje od 2023 roku. Rada: WebP jako bezpieczna opcja domyślna, AVIF dla maksymalnej oszczędności transferu.

WordPress sam kompresuje JPEG podczas przesyłania, po co więc wtyczka?

Wbudowana kompresja WP działa z podstawowym algorytmem na stałym poziomie jakości. Wtyczki (Smush, ShortPixel, EWWW) używają zaawansowanych algorytmów i wyciskają dodatkową oszczędność przy tej samej jakości wizualnej. Do tego konwersja do WebP/AVIF, czego rdzeń nie robi.

Czy leniwe ładowanie jest potrzebne, jeśli strona jest na szybkim hostingu?

Leniwe ładowanie oszczędza nie czas serwera, a transfer odwiedzającego i szybkość renderowania pierwszego ekranu. Natywny loading="lazy" w WordPress 5.5+ jest już włączony i nie wymaga konfiguracji.

Jak sprawdzić, na ile obrazy spowalniają stronę?

GTmetrix pokazuje konkretne pliki z zaleceniami dotyczącymi kompresji. PageSpeed Insights od Google daje rozbicie: „Serve images in next-gen formats", „Properly size images", „Efficiently encode images". Oba są bezpłatne.

Podsumowanie: którą wtyczkę wybrać

Porządek w obrazach to nie jednorazowa akcja, a ustawienie, które działa latami. Proszę poświęcić wieczór na instalację, potem wtyczka robi wszystko sama.

  • Nowy blog, minimum zachodu: Smush Free. Kompresja podczas przesyłania, masowa optymalizacja, leniwe ładowanie w jednej wtyczce.
  • Sklep internetowy na WooCommerce: ShortPixel. AI generuje teksty alt dla setek produktów, tryb tła bez otwartej karty.
  • Własny serwer, pełna kontrola: EWWW. Lokalna kompresja bez zewnętrznych API, nieograniczony wolumen.
  • Paranoiczna oszczędność: TinyPNG + Imsanity. To połączenie rozwiązuje problem zarówno gigantycznych przesyłanych plików, jak i napompowanych JPEG-ów.
  • Fotograf/portfolio: EWWW lub ShortPixel w trybie bezstratnym. Jakość nie cierpi, metadane są czyszczone.

Proszę zacząć od darmowego Smush, pokaże on, ile miejsca już Pan traci. A którą wtyczkę Pan wybrał, proszę opowiedzieć w komentarzach.