Image

Use Image instead of <img> for store images such as banners and product photos. It lazy-loads, asks the CDN for a suitable size and can reserve the image's space so the page does not jump while it loads.

ExampleCopy Anchor Link

import { Image } from '@salla.sa/twilight-theme-engine/common';

export function Banner({ url, alt, mobileUrl }: { url: string; alt: string; mobileUrl?: string }) {
  return (
    <Image
      src={url}
      mobileSrc={mobileUrl}
      alt={alt}
      aspectRatio="16/9"
      sizes="100vw"
      srcSetWidths={[480, 768, 1200]}
      priority
    />
  );
}

APICopy Anchor Link

ImageProps extends the standard <img> attributes (className, width, height, sizes, srcSet and the rest). Added or changed props:

GotchasCopy Anchor Link

• Mark only the main image above the fold as priority. Everything else should stay lazy.
• aspectRatio adds a wrapper <div>. The style prop goes on that wrapper. Without aspectRatio (or with noWrapper) it goes on the <img> itself.
• The src is rewritten to the CDN with the requested size, in server rendering and in the browser.
• To make objectFit visible, give the image a size with className, for example h-full w-full.

NextCopy Anchor Link

• ProductCard uses Image for its photo.
• Link for navigation.
• Styling