Image

The image is loaded in very low resolution and blurred with CSS. This low-res image will be rendered at the same size as the original image to avoid content shift when the high-res image is rendered. Once the low-res images are loaded, images in the viewport will be immediately updated by fading-in their high-res version. All images outside the viewport remain low-res and will be lazy-loaded/faded-in once scrolling into the viewport.

This component will ensure that the image is always properly sized, regardless of screen size or device pixel ratio and that the best image format that the browsers supports is loaded.

This component uses cloudinary.com to fetch properly sized images and the optimal image format.

  image:
    src: "v1649349741/metalsmith-components/corporate_jwbmek.jpg"
    alt: "cloudinary"
    aspectRatio: "56.25"
    caption: "Optional image caption"

• src - the Cloudinary image id. The image ID will be combined with the Cloudinary baseURL in the template. The Cloudinary baseURL is available from the site object in Metalsmith metadata. By combining the BaseURL and the image id we get the high-res image src.
• alt - the alt text
• aspectRatio - the aspect ratio of the image. Used to prevent any content movement when the high-res image in inserted into the DOM.
• caption - used it to give credit or whatever makes sense.

For an usage example see the media section.