3 min
13 września 2024
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
1. Ustawienie zmiennych globalnych
bash
NUXT_IMAGE_PROVIDER=ipx
NUXT_IMAGE_PROVIDER_DOMAIN=domain_provider_images
NUXT_IMAGE_PROVIDER_BASE_URL=basic_address_URL_provider_images
2. Konfiguracja IPX
Dodaliśmy następującą konfigurację zdjęć:
bash
f_webp,b_white,quality_100,s_{width}x0
gdzie:
f_webp - konwertuj do formatu WebP
b_white - ustaw kolor tła na biały
quality_100 - jakość obrazu 100 (maksymalna)
s_{width}x{height} - ustaw szerokość i wysokość na podaną wartość. Możemy również zastosować fit_contain - zmiana rozmiaru z zachowaniem proporcji.
Pełna ścieżka URL wygląda następująco:
bash
imageDomain + /_ipx/f_webp,b_white,quality_100,s_{width}x0/ + imagePath
Dodatkowo, będzie nam potrzebna metoda getMagentoImage od VSF. Ta metoda zwraca adres URL do obrazu bez podstawowego adresu URL Magento i części pamięci podręcznej. Możemy ją użyć, aby uzyskać obrazy od zewnętrznych dostawców.
Należy również zaktualizować obiekt pomocniczy imageSizes, który eksportuje konfigurację dla różnych typów obrazów, np.:
javascript
Copy code
const imageSizes = {
ogImage: {
width: 1200,
height: 630,
},
productCard: {
desktop: {
width: 250,
height: 250,
},
},
};
Tak wygląda nasza metoda do wygenerowania docelowej ścieżki:
javascript
/**
* 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}`;
};
Przykłady Użycia
1. Aktualizacja istniejącego kodu
Przykład zmiany ścieżki do obrazu:
html
<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)"
>
<component
:is="imageComponentTag"
:loading="loading"
v-bind="attributes"
:src="getMagentoImageWithConfig(src)"
:class="classes"
:style="styles"
:alt="alt"
:fetchpriority="fetchpriority"
@load="onLoad"
v-on="$listeners"
/>
</picture>
Tutaj można również zauważyć inne konfiguracje, takie jak imageComponentTag i fetchpriority, które pomagają w optymalizacji wydajności, jednak nie są one głównym tematem tego artykułu.
2. Przykłady użycia w kodzie aplikacji
Jeśli chcemy to użyć w kodzie naszej aplikacji, musimy po prostu wywołać naszą metodę:
javascript
const optimizedImage = getMagentoImageWithConfig(src);
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.
