Next.js Image Usage

Elevate Web uses Next.js which recommended the usage of the Image Component and it's prop.

Considerations

We need to consider the application breakpoint and that in some cases, the application should render a different image or the same image with a custom modification (crop, filling, …)

We need to consider that the current OVP implementation includes its own image proxy that handles quality and includes a low quality image as default and a template model to add custom width, height, quality and any other available usage params

Definition

So we have defined a way of working with such component following:

• Img proxy using

  • quality for now 75 always but should be configurable per env so we can have better quality based on env

  • width based on per breakpoint map into the biggest possible size for such breakpoint

  • height based on a created ratio map applied to the breakpoint and the calculated width

  • rs:fill with the calculated visual width and height

• placeholderwith bluras value

• blurDataURL as the default Image src from the OVP

We may end up having a different placeholder implementation based on designs, but it still worth to check the options for any extra case where its not considered

Usage sample

[...]

const ratioMap = {
  'xl': 2.5,
  'lg': 1.85,
  'md': 1.85,
  'sm': 1.2,
  'xs': 0.9,
};
const widthMap = {
  'xl': 1200,
  'lg': 800,
  'md': 600,
  'sm': 768,
  'xs': 500,
};

[...]

const imageSrc = useMemo(() => {
  const width = widthMap[mediaQuery];
  const height = Math.round(width/heightRatio);
  const calculatedTemplateReplacement = `q:75/w:${width.toString()}/h:${height.toString()}/rs:fill:${width.toString()}:${height.toString()}/g:no`;
  const src = templateSrc.replace('{template}', calculatedTemplateReplacement);
  return src;
}, [heightRatio, mediaQuery, templateSrc]);

[...]

  <Image
    src={imageSrc}
    alt={alt}
    width={windowWidth}
    height={Math.round(windowWidth/heightRatio)}
    placeholder="blur"
    blurDataURL={blurSrc}
    style={{
      position: 'relative',
      height: '100%',
      width: '100%',
      objectFit: 'cover',

    }}
  />
[...]

Extra discarded props evaluated

We also review sizes as an alternative of explained for the responsive model but we discard it as it will not work on our model.

We also discarded the usage of the loader for now for the case analyzed as it doesn’t fit with the responsive+ breakpoint model that we have in mind.