Optymalizacja zdjęć za pomocą dostawcy IPX w Magento 2 oraz Alokai

W tym artykule przedstawimy proces dodania optymalizacji zdjęć na jednej z naszych stron internetowych za pomocą dostawcy IPX. Przeanalizujemy konfigurację, sposób użytkowania oraz istotne kwestie, które należy wziąć pod uwagę podczas wdrażania.

Posłuchaj artykułu w wersji audio.

Konfiguracja dostawcy

Po dokonaniu wyboru dostawcy usług optymalizacji obrazów, kluczowym krokiem jest odpowiednia konfiguracja środowiska. W przypadku integracji z IPX konieczne jest ustawienie kilku zmiennych globalnych, które pozwolą na sprawną komunikację między Magento 2 a dostawcą usług obrazów.

Ustawienie zmiennych globalnych

Aby rozpocząć, należy wprowadzić odpowiednie zmienne środowiskowe, które będą wykorzystywane do integracji. Można to zrobić w pliku konfiguracyjnym aplikacji lub w środowisku serwera.

    NUXT_IMAGE_PROVIDER=ipx
NUXT_IMAGE_PROVIDER_DOMAIN=domain_provider_images
NUXT_IMAGE_PROVIDER_BASE_URL=basic_address_URL_provider_images

NUXT_IMAGE_PROVIDER — wskazuje na dostawcę obrazów, w tym przypadku ipx.
NUXT_IMAGE_PROVIDER_DOMAIN — określa domenę, na której dostawca obsługuje obrazy.
NUXT_IMAGE_PROVIDER_BASE_URL — ustawia podstawowy URL, z którego obrazy będą pobierane.

Twój e-commerce hamuje wzrost?

Sprawdź, jak nasze rozwiązanią klasy Enterprise eliminują dług technologiczny i odblokowują konwersję!

Porozmawiajmy

Konfiguracja IPX

Kolejnym krokiem po ustawieniu zmiennych globalnych jest skonfigurowanie parametrów przetwarzania zdjęć. Dzięki IPX możemy precyzyjnie określić sposób, w jaki obrazy będą optymalizowane i dostosowywane do wymagań naszej strony.

Parametry konfiguracji zdjęć

Podczas optymalizacji zdjęć za pomocą IPX wykorzystaliśmy zestaw parametrów, które są dodawane do ścieżki URL obrazów. Dzięki temu dostawca może przetwarzać obrazy zgodnie z naszymi wymaganiami. Oto pełna konfiguracja parametrów:

    f_webp,b_white,quality_100,s_{width}x0

gdzie:

f_webp – konwersja obrazów do formatu WebP, co zmniejsza rozmiar plików i przyspiesza ładowanie strony.
b_white – ustawienie białego tła dla obrazów (przydatne w przypadku przezroczystości).
quality_100 – maksymalna jakość obrazu (100%).
s_{width}x0 – ustalenie szerokości na wartość {width}, przy czym wysokość jest dopasowywana proporcjonalnie (możliwe jest również użycie fit_contain w celu zmiany rozmiaru z zachowaniem proporcji).

Przykład ścieżki URL

Na podstawie powyższej konfiguracji pełna ścieżka URL dla obrazu wygląda następująco:

    // Konfiguracja URL
imageDomain + /_ipx/f_webp,b_white,quality_100,s_{width}x0/ + imagePath

// Przykład URL
https://imageDomain/_ipx/f_webp,b_white,quality_100,s_300x0/imagePath

Gdzie:

imageDomain – domena dostawcy obrazów (określona w konfiguracji globalnej).
imagePath – ścieżka do konkretnego obrazu w zasobach.

Integracja z metodą getMagentoImage i aktualizacja konfiguracji imageSizes

W celu efektywnego wykorzystania obrazów zewnętrznych dostawców w Magento 2, konieczne jest zastosowanie metody getMagentoImage dostarczanej przez Vue Storefront (VSF). Metoda ta umożliwia uzyskanie adresu URL do obrazu, pomijając podstawowy adres URL Magento oraz część pamięci podręcznej.

Zastosowanie getMagentoImage

Metoda getMagentoImage pozwala na uproszczone zarządzanie obrazami w połączeniu z usługami dostawców takich jak IPX. Dzięki niej możliwe jest generowanie adresów URL obrazów w dynamiczny sposób, co zapewnia większą elastyczność.

Aktualizacja konfiguracji imageSizes

Ważnym krokiem w procesie integracji jest także aktualizacja obiektu imageSizes. Obiekt ten eksportuje konfigurację dla różnych typów obrazów, takich jak obrazy produktów czy grafiki wykorzystywane w mediach społecznościowych. Oto przykład:

    const imageSizes = {
  ogImage: {
    width: 1200,
    height: 630,
  },
  productCard: {
    desktop: {
      width: 250,
      height: 250,
    },
  },
};

ogImage – rozmiar obrazu zoptymalizowany pod kątem Open Graph (np. dla udostępniania w mediach społecznościowych).

productCard – konfiguracja dla obrazów kart produktów na różnych urządzeniach. W powyższym przykładzie zdefiniowano rozmiar 250×250 pikseli dla wyświetlaczy desktopowych.

Zastosowanie w praktyce

Po odpowiednim skonfigurowaniu metoda getMagentoImage może być używana do pobierania obrazów w kombinacji z dostawcą zewnętrznym. Na przykład:

    const imageUrl = getMagentoImage(productImagePath);

Następnie można zastosować ten adres URL w połączeniu z regułami dostawcy IPX do optymalizacji obrazu w locie.

Korzyści

Lepsza kontrola nad obrazami – możliwość zarządzania rozmiarami i formatami obrazów dla różnych kontekstów użytkowych.
Integracja z zewnętrznymi dostawcami – łatwiejsze wdrożenie rozwiązań optymalizacyjnych z usługami takimi jak IPX.
Uniwersalność – dostosowanie rozmiarów obrazów do specyficznych wymagań różnych elementów strony (np. kart produktów, grafik Open Graph).

Metoda getMagentoImageWithConfig – Generowanie docelowych ścieżek URL

W celu ułatwienia integracji z zewnętrznymi dostawcami, stworzyliśmy metodę getMagentoImageWithConfig. Metoda ta pozwala na generowanie końcowych ścieżek URL obrazów, uwzględniając konfigurację CDN oraz określone rozmiary obrazów. Dzięki temu proces optymalizacji i wyświetlania obrazów staje się bardziej elastyczny.

Definicja metody

Oto pełna implementacja metody:

    /**
 * Extracts image path from Magento URL with CDN config.
 *
 * @param fullImageUrl {string | null} - Magento image URL
 * @param sizes { { width: number, height: number } } - Image sizes, default is 0x0 (original)
 *
 * @return {string}
 */
const getMagentoImageWithConfig = (fullImageUrl: string | null, sizes: { width: number, height: number } = { width: 0, height: 0 }) => {
  const magentoImage = getMagentoImage(fullImageUrl);
  return `${baseImageConfigQuery}${sizes.width}x${sizes.height}/${magentoImage}`;
};

Wyjaśnienie parametrów

fullImageUrl – Pełny URL obrazu w Magento. Może być pusty, jeśli obraz jest opcjonalny.
sizes – Obiekt określający szerokość i wysokość obrazu. Domyślna wartość { width: 0, height: 0 } oznacza użycie oryginalnych wymiarów obrazu.

Jak działa metoda?

Ekstrakcja ścieżki obrazu
Metoda korzysta z funkcji getMagentoImage, aby usunąć z adresu URL niepotrzebne części, takie jak podstawowy adres Magento czy pamięć podręczna.
Dodanie parametrów konfiguracji CDN
Po przetworzeniu ścieżki metoda łączy ją z podstawową konfiguracją obrazu (baseImageConfigQuery) oraz określonymi rozmiarami (szerokość i wysokość).
Generowanie finalnego URL
Wynikiem jest końcowy adres URL, który może być bezpośrednio użyty w połączeniu z zewnętrznym dostawcą, takim jak IPX.

Przykłady Użycia

Oto przykład praktycznego zastosowania metody getMagentoImageWithConfig w komponencie Vue. Ten kod demonstruje, jak dynamicznie generować odpowiednie wersje obrazów w zależności od rozmiaru urządzenia użytkownika

    <picture v-if="desktopSize || tabletSize || mobileSize">
  <source
    v-if="desktopSize"
    media="(min-width: 1024px)"
    :srcset="getMagentoImageWithConfig(src, desktopSize)"
  >
  <source
    v-if="tabletSize"
    media="(min-width: 768px)"
    :srcset="getMagentoImageWithConfig(src, tabletSize)"
  >
  <source
    v-if="mobileSize"
    media="(min-width: 1px)"
    :srcset="getMagentoImageWithConfig(src, mobileSize)"
  >
  <img
    :loading="loading"
    v-bind="attributes"
    :src="getMagentoImageWithConfig(src)"
    :class="classes"
    :style="styles"
    :alt="alt"
    @load="onLoad"
    v-on="$listeners"
  />
</picture>

Jak to działa?

Dostosowanie obrazów do urządzeńKomponent <picture> umożliwia definiowanie różnych źródeł obrazów (<source>), które będą ładowane w zależności od rozdzielczości ekranu użytkownika:
- Obrazy o większej rozdzielczości dla desktopów (od 1024px).
- Obrazy o średniej rozdzielczości dla tabletów (od 768px).
- Obrazy zoptymalizowane pod kątem urządzeń mobilnych (od 1px).
W każdym przypadku metoda getMagentoImageWithConfig generuje odpowiedni URL obrazu z uwzględnieniem podanych wymiarów.

Zakończenie

Zdjęcia pobierane przez CDN przy użyciu IPX były o 100-150% mniejsze, co znacznie poprawiło wydajność strony. Korzyści wynikające z wykorzystania IPX do optymalizacji obrazów:

Zmniejszenie rozmiaru zdjęć: Znaczne zmniejszenie rozmiaru zdjęć bez utraty jakości, co przyspiesza czas ładowania strony.
Automatyczna konwersja do WebP: Nowoczesny format obrazu, który oferuje lepszą kompresję.
Zachowanie proporcji: Automatyczne dostosowanie rozmiaru obrazów przy zachowaniu ich proporcji.
Łatwość konfiguracji: Prosta konfiguracja i integracja z istniejącymi rozwiązaniami.

Podziel się:

Porozmawiajmy o obszarach potencjalnej współpracy!

Cześć!

Podczas pierwszej konsultacji przeanalizujemy Twoje cele przez pryzmat ROI i ryzyk operacyjnych. Niezależnie od tego, czy budujemy system klasy Enterprise, aplikację czy automatyzację AI – wspólnie zaplanujemy architekturę, która wyeliminuje dług technologiczny i odblokuje skalowalność.

Jarosław Trybuchowicz CEO, Founder Beecommerce jarek@beecommerce.pl

Więcej artykułów na ten temat znajdziesz na naszym blogu

October 1, 2024

Optymalizacja INP w Web Vitals: Przykłady i Rozwiązania

Poznaj kluczowe fazy interakcji: Input delay, Processing time, Presentation delay, najczęstsze przyczyny opóźnień i praktyczne rozwiązania. Naucz się analizować i debugować INP za pomocą Chrome DevTools, stosując techniki takie jak code splitting i upraszczanie DOM.

5 min

Czytaj więcej