Wygląda na to, że JavaScript jest wyłączony w twojej przeglądarce. By w pełni cieszyć się naszą stroną, upewnij się, że włączyłeś JavaScript w swojej przeglądarce.

Optymalizacja obrazków w Magento 2 do WebP

200,00 zł

W magazynie

SKU

optymalizacja-web

Krótki przewodnik na temat optymalizacji obrazków w Magento 2 do WebP

Przejdź na koniec galerii

Przejdź na początek galerii

Jak zoptymalizować obrazki w Magento 2 do formatu WebP

WebP to nowoczesny format obrazów, który zapewnia znacznie mniejsze rozmiary plików niż tradycyjne JPG i PNG przy porównywalnej jakości. Magento 2 domyślnie nie konwertuje obrazów do WebP, ale można łatwo wdrożyć obsługę WebP ręcznie lub za pomocą modułów. Poniżej znajdziesz kompletną instrukcję.

1. Konwersja obrazów do formatu WebP

Najpierw przekonwertuj istniejące obrazy do formatu WebP. Możesz użyć narzędzi lokalnych lub online:

Narzędzie CLI (Linux/macOS/Windows): cwebp
Konwertery online: squoosh.app, cloudconvert.com
Photoshop lub GIMP: eksportuj do WebP (czasem wymaga wtyczki)

Przykład użycia cwebp w terminalu:

cwebp obraz.jpg -q 80 -o obraz.webp

2. Umieść obrazy WebP w katalogach Magento

Wgraj obrazy WebP do katalogu /pub/media lub innego folderu dostępnego publicznie w Magento. Upewnij się, że mają te same nazwy, co oryginalne obrazy JPG/PNG, ale z rozszerzeniem .webp.

3. Użycie znacznika <picture> w treściach CMS

Aby zapewnić kompatybilność ze starszymi przeglądarkami, użyj znacznika <picture> z fallbackiem:

<picture>
  <source srcset="/media/baner.webp" type="image/webp">
  <img src="/media/baner.jpg" alt="Opis baneru">
</picture>

Przeglądarka, która obsługuje WebP, załaduje wersję WebP. Inne wczytają JPG.

4. Konfiguracja serwera WWW (Apache lub Nginx)

Serwer musi poprawnie obsługiwać WebP. W zależności od używanego serwera, zastosuj odpowiednie reguły.

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

AddType image/webp .webp

Nginx (konfiguracja vhost lub nginx.conf)

location ~* ^/media/.+\.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

location ~* \.webp$ {
  add_header Content-Type image/webp;
}

Po zmianie konfiguracji zrestartuj serwer, np. sudo systemctl restart nginx lub apache2.

5. Automatyczna konwersja obrazów – moduły Magento

Istnieją moduły, które automatyzują konwersję i serwowanie WebP:

WebP Optimized Images by Magefan
Image Optimizer by Mageplaza
TinyPNG Extension – wymaga API

Moduły te generują WebP dla obrazów produktów, kategorii i CMS oraz mogą automatycznie nadpisywać adresy URL.

6. Sprawdzenie działania

Sprawdź w DevTools → Network czy ładowane są pliki .webp
Upewnij się, że nie ma błędów 404
Testuj w różnych przeglądarkach (Chrome, Firefox, Safari)

Podsumowanie

Wdrożenie WebP w Magento 2 może znacząco przyspieszyć ładowanie sklepu. Wymaga to konwersji obrazów, aktualizacji treści CMS lub szablonów oraz ewentualnej konfiguracji serwera WWW. Aby zautomatyzować proces, warto rozważyć instalację dedykowanego modułu Magento.