---
title: "Components — Image"
canonical: https://sky-ui.cf.sky.com/components/image
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Image

Image component used for displaying and setting properties to images.

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

---

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

**Note:** 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.

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

```tsx
<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:

- [aspect-ratio](/core/system/aspect-ratio/)
- [border-radius](/core/system/border-radius/)
- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [object-fit](/core/system/object-fit/)
- [width](/core/system/width/)

---

## 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) for more information.

**Important:** 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLPictureElement) for more information.

**Important:** 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.

```tsx
<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](/guides/media#inclusive-images) for more information.