Images

ILSA provides image handling for you:

• ILSA hosts images on a CDN and provides you with direct links to those.
• ILSA resizes images so we can serve a smaller image if the image is rendered smaller.
• ILSA uses WebP by default, but falls back to JPEG if we detect the browser doesn’t support WebP.

The goal is to provide the fastest user experience, mainly by reducing the transferred image sizes.

In the Backoffice you can configure which image sizes you want us to create. You can configure the width (in pixels) and we’ll automatically calculate the matching height to maintain the aspect ratio.

Add the fields images[].srcset, images[].src and images[].aspect_ratio to your fieldset.

Render the images like this:

function renderImage(img, width) {
	const el = document.createElement('img');
	el.src = img.src; // Not used by modern browsers, but still required by the HTML5 spec.
	el.srcset = img.srcset;
	el.sizes = '20vw'; // Important! Set this to the percentage of the viewport this image will consume.
	el.width = width;
	el.height = width / img.aspect_ratio; // By precalculating the height there will be fewer jumps when rendering. Good for SEO (Largest Contentful Paint specifically), but not required.
}

If you’d like to have more control over the resized images rather than using on our srcset, request the fields images[].variants[].url, images[].variants[].width and images[].variants[].height.