Kompresja Obrazków w WordPress – Jak Zrobić To Bez Wtyczki?

W dawnych czasach WordPressa “optymalizacja” oznaczała instalację wtyczki typu Smush czy EWWW i nadzieję na najlepsze.

W 2026 roku krajobraz się zmienił. Rdzeń WordPressa natywnie wspiera WebP i AVIF. Przeglądarki postandaryzowały lazy loading. Środowiska hostingowe często oferują kompresję na poziomie serwera.

Ten przewodnik jest dla programistów, którzy chcą zrozumieć natywną mechanikę obsługi mediów w WordPressie i zoptymalizować ją bez zaśmiecania swojego stacku ciężkimi wtyczkami.

1. Natywne Wsparcie Obrazów: WebP i AVIF

Minęły czasy, gdy potrzebowałeś wtyczki, by przepisywać HTML w celu serwowania .webp.

WebP (Wspierane od WP 5.8)

WordPress domyślnie tworzy pod-rozmiary WebP, jeśli biblioteka ImageMagick na twoim serwerze to obsługuje.

AVIF (Wspierane od WP 6.5)

AVIF oferuje jeszcze lepszą kompresję niż WebP. Aby priorytetyzować AVIF, musisz po prostu upewnić się, że twoje środowisko serwerowe wspiera jego generowanie.

[!TIP] Sprawdź Stan Witryny: Wejdź w Narzędzia > Stan witryny (Site Health), aby potwierdzić, czy twoja instalacja PHP wspiera generowanie AVIF.

Kontrola Jakości (Quality)

Domyślna jakość kompresji w WordPressie to 82. Często to zbyt wysoka wartość dla miniatur. Możesz to zmienić prostym filtrem w functions.php:

// Dostosuj jakość JPEG
add_filter('jpeg_quality', function($arg) { return 80; });

// Dostosuj jakość WebP
add_filter('wp_editor_set_quality', function($quality, $mime_type) {
    if ('image/webp' === $mime_type) return 75;
    return $quality;
}, 10, 2);

2. Zapobieganie “Puchnięciu Miniatur” (Thumbnail Bloat)

Domyślnie nowa instalacja WordPressa rejestruje kilka rozmiarów obrazów:

• Thumbnail (Miniatura)
• Medium (Średni)
• Medium Large
• Large (Duży)
• 1536x1536
• 2048x2048

Jeśli dodasz motyw, który rejestruje 5 dodatkowych rozmiarów (portfolio-grid, slider-large, itp.), każde pojedyncze wgranie zdjęcia generuje 10+ plików. To marnuje limity inodów i przestrzeń dyskową.

Rozwiązanie: Wyrejestruj Nieużywane Rozmiary

function wppoland_disable_image_sizes($sizes) {
    unset($sizes['medium_large']); // 768px
    unset($sizes['1536x1536']);    // 2x Medium Large
    unset($sizes['2048x2048']);    // 2x Large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wppoland_disable_image_sizes');

Pro Tip: Wejdź w Ustawienia > Media i ustaw wymiary na 0 dla każdego domyślnego rozmiaru (jak Średni), którego nie używasz.

3. Obrazy Responsywne (srcset)

WordPress automatycznie obsługuje srcset, serwując odpowiedni rozmiar w oparciu o viewport użytkownika. Możesz jednak pomóc przeglądarce, definiując atrybut sizes ręcznie podczas renderowania obrazów we własnych pętlach.

echo wp_get_attachment_image(
    $image_id,
    'large',
    false,
    ['sizes' => '(max-width: 600px) 100vw, 800px']
);

To mówi przeglądarce: “Jeśli ekran ma mniej niż 600px, obraz zajmie pełną szerokość. W przeciwnym razie będzie miał 800px szerokości.”

4. Nowoczesny Lazy Loading

Od WP 5.5, atrybut loading="lazy" jest dodawany automatycznie. Pułapka Wydajności: NIE włączaj lazy loadingu dla obrazu LCP (Largest Contentful Paint) - zazwyczaj twojego obrazu głównego (Hero) lub wyróżnionego obrazka posta. To opóźnia renderowanie.

Wyłącz Lazy Load dla Pierwszego Obrazka

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    // Logika wykrywania, czy to pierwszy obrazek w pętli lub Hero
    // W przypadku ręcznej kontroli, możemy sprawdzić klasę CSS
    if (isset($attr['class']) && strpos($attr['class'], 'hero-image') !== false) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 2);

5. Skalowanie: Object Storage (S3/GCS)

Jeśli twoja biblioteka mediów przekroczy 10GB, przestań przechowywać pliki na serwerze WWW. Użyj Object Storage (AWS S3, Google Cloud Storage, DigitalOcean Spaces).

Wtyczki takie jak WP Offload Media lub Media Cloud są tutaj standardem.

• Korzyść: Bezstanowe serwery (łatwe skalowanie).
• CDN: Serwowanie plików bezpośrednio z globalnego CDN, z pominięciem twojego serwera.

Podsumowanie

1. Używaj filtrów jpeg_quality i WebP do natywnej kontroli kompresji.
2. Usuwaj nieużywane rozmiary obrazów, aby oszczędzać dysk.
3. Zarządzaj loading="lazy" ostrożnie - nigdy na obrazku Hero.
4. Wynoś pliki do S3, gdy osiągniesz dużą skalę.

Optymalizacja nie polega na dodawaniu wtyczek; polega na konfiguracji rdzenia, by był wydajny.