3 min
September 13, 2024
Optimizing Images Using IPX Provider in Magento 2 and Alokai
In this article, we will cover the process of adding image optimization to one of our websites using the IPX provider We will go over the configuration, how to use it, and important things to consider when implementing it
Listen to the audio version of this article.
Vendor configuration
1. Setting up global variables
bash
NUXT_IMAGE_PROVIDER=ipx
NUXT_IMAGE_PROVIDER_DOMAIN=domain_provider_images
NUXT_IMAGE_PROVIDER_BASE_URL=basic_address_URL_provider_images
2. IPX configuration
We have added the following image configuration
f_webp,b_white,quality_100,s_{width}x0
where:
f_webp - convert to WebP format
b_white - set the background color to white
quality_100 - image quality 100 (maximum)
s_{width}x{height} - set width and height to the specified value. We can also use fit_contain - resize with aspect ratio.
The full URL path looks as follows:
bash
imageDomain + /_ipx/f_webp,b_white,quality_100,s_{width}x0/ + imagePath
In addition, we will need the getMagentoImage method from VSF. This method returns the URL to the image without the Magento base URL and cache part. We can use it to get images from external providers.
You also need to update the imageSizes helper object, which exports the configuration for different image types, such as:
javascript
Copy code
const imageSizes = {
ogImage: {
width: 1200,
height: 630,
},
productCard: {
desktop: {
width: 250,
height: 250,
},
},
};
This is how our method to generate the target path looks like:
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}`;
};
Usage Examples
1. Updating existing code
Example of changing the path to an image:
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>
Here you can also see other configurations such as imageComponentTag and fetchpriority that help optimize performance, but they are not the focus of this article.
2.Examples of use in application code
If we want to use this in the code of our application, we simply need to call our method:
javascript
const optimizedImage = getMagentoImageWithConfig(src);
Finishing
Images downloaded by the CDN using IPX were 100-150% smaller, significantly improving site performance. Benefits of using IPX to optimize images:
Reducing image size: Significantly reduce the size of images without sacrificing quality, speeding up page load times.
Automatic conversion to WebP: A modern image format that offers better compression.
Aspect ratio preservation: Automatically adjust the size of images while preserving their aspect ratio.
Ease of configuration: Simple configuration and integration with existing solutions.
