Image

View on GitHub

import { Image } from '@sky-uk/ui-core';

Select background colour

<Image
    src="https://placehold.co/320x240"
    alt="Example Image with placeholder asset"
    $borderRadius={2}
    $margin={6}
    $maxWidth="320px"
    $width="100%"
/>

<Image
    src="https://placehold.co/320x240"
    alt="Example Image with placeholder asset"
    $borderRadius={2}
    $margin={6}
    $maxWidth="320px"
    $width="100%"
/>

The Image is just a styled HTML image and supports any natively supported attributes such as src, srcSet and sizes.

Props

Focal Point

You can specify a focal point for the image by passing x and y coordinates to the focalPoint prop. This will apply the object-fit:cover styles automatically.

$focalPoint supports values 0 - 24 and any values outside of that range will be capped.

Select background colour

<Image
  src="https://placehold.co/640x320"
  alt="Example Image to show focal point behaviour on a cropped image"
  $borderRadius={2}
  $focalPoint={[22, 5]}
  $height="240px"
  $margin={1}
  $maxWidth="240px"
  $width="100%"
/>

<Image
  src="https://placehold.co/640x320"
  alt="Example Image to show focal point behaviour on a cropped image"
  $borderRadius={2}
  $focalPoint={[22, 5]}
  $height="240px"
  $margin={1}
  $maxWidth="240px"
  $width="100%"
/>

System Modifiers

The Image component supports the props applied using the following system modifiers:

Responsive Images

There are a few methods of creating responsive images depending on the desired outcome.

srcSet

We can use srcSet to provide the browser with multiple scaled versions of an asset, this gives the browser autonomy on which image to use based on screensize and bandwidth etc.

Visit MDN srcSet docs for more information.

The browser will always use the largest cached image rather than explicity requesting version for smaller sizes so this should not be used when you wish to show specific images at different sizes.

picture

The picture element allows you to specify multiple source elements. Each source can have it's own srcSet along with media queries to specific when to show each.

Visit MDN picture docs for more information.

The browser will always load the source with matching media query, if you don't need to show different tailored images at different breakpoints then consider srcSet as it's unlikely to result in as many requests if the browser is resized.

Select background colour

<Flex $flexDirection="column" $gap={5}>
  <Text $fontSize="body-lg" $fontWeight="bold">srcSet:</Text>

  <Image
    alt=""
    src="https://placehold.co/640x320/"
    srcSet="https://placehold.co/1248x320/red/white 1248w, https://placehold.co/960x320/orange/white 960w, https://placehold.co/640x320/green/white 640w"
  />

  <Text $fontSize="body-lg" $fontWeight="bold">picture:</Text>

  <picture>
    <source srcSet="https://placehold.co/1248x320/indigo/white" media={`(min-width: ${breakpoint('xl')})`} />
    <source srcSet="https://placehold.co/960x320/navy/white" media={`(min-width: ${breakpoint('lg')})`} />
    <source srcSet="https://placehold.co/640x320/slateblue/white" />
    <Image src="https://placehold.co/640x320/" $width="100%" />
  </picture>
</Flex>

<Flex $flexDirection="column" $gap={5}>
  <Text $fontSize="body-lg" $fontWeight="bold">srcSet:</Text>

  <Image
    alt=""
    src="https://placehold.co/640x320/"
    srcSet="https://placehold.co/1248x320/red/white 1248w, https://placehold.co/960x320/orange/white 960w, https://placehold.co/640x320/green/white 640w"
  />

  <Text $fontSize="body-lg" $fontWeight="bold">picture:</Text>

  <picture>
    <source srcSet="https://placehold.co/1248x320/indigo/white" media={`(min-width: ${breakpoint('xl')})`} />
    <source srcSet="https://placehold.co/960x320/navy/white" media={`(min-width: ${breakpoint('lg')})`} />
    <source srcSet="https://placehold.co/640x320/slateblue/white" />
    <Image src="https://placehold.co/640x320/" $width="100%" />
  </picture>
</Flex>

Accessibility

It's vital that we ensure our images have the correct markup to make them accessible to all users. See our guide for creating inclusive images for more information.