Optymalizacja obrazków w WordPress
Obrazki to często 60-80% wagi strony. Źle zoptymalizowane spowalniają ładowanie i psują Core Web Vitals. Pokażę jak to naprawić.
Krótka odpowiedź
Kompresja obrazków
Wtyczki kompresji:
- Smush - darmowa, dobra
- ShortPixel - świetna jakość, API
- Imagify - od WP Rocket
- EWWW Image Optimizer
Kompresja lossy vs lossless:
- Lossy: mniejszy plik, minimalna utrata jakości
- Lossless: bez utraty, większy plik
- Dla web: lossy 80-90% jakości
Bulk optimization:
- Zoptymalizuj istniejące obrazki
- Automatycznie nowe uploady
- Backup oryginałów
WebP i nowoczesne formaty
WebP:
- 30-50% mniejsze niż JPEG
- Wspierane przez wszystkie przeglądarki
- Automatyczna konwersja wtyczkami
AVIF:
- Jeszcze mniejsze niż WebP
- Nie wszędzie wspierane
- Przyszłościowe
Konfiguracja:
- Wtyczka konwertuje do WebP
- Serwuje WebP jeśli przeglądarka wspiera
- Fallback do JPEG/PNG
CDN + WebP:
- Cloudflare Polish (auto WebP)
- BunnyCDN Bunny Optimizer
- Automatycznie, bez wtyczki
Lazy loading i responsive
Lazy loading:
- Ładuje obrazki gdy widoczne
- Wbudowane w WordPress 5.5+
- loading="lazy" automatycznie
- Wyłącz dla above-the-fold
Responsive images:
- srcset - różne rozmiary
- WordPress generuje automatycznie
- Przeglądarka wybiera optymalny
Rozmiary w WordPress:
- Thumbnail: 150×150
- Medium: 300×300
- Large: 1024×1024
- Full: oryginał
- Dostosuj w Ustawienia → Media