Consuming in a storefront
How to use variants + LQIP in React / Next.js.
Updated
On this page
From the API
Every image response now includes:
{
"url": "https://.../original.jpg",
"version": 3,
"lqip": "data:image/webp;base64,AA...",
"variants_ready": true,
"variants": {
"webp": [
{ "width": 320, "url": "https://.../v3/img-320.webp" },
{ "width": 640, "url": "https://.../v3/img-640.webp" },
{ "width": 1024, "url": "https://.../v3/img-1024.webp" },
{ "width": 1920, "url": "https://.../v3/img-1920.webp" }
],
"avif": [ /* same shape */ ]
}
}