---
name: Image
menu: Components
route: /components/image
---

import { Image } from './';
import { Playground } from 'docz';

# Image

This `<Image/>` component provides an [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer). This enables better page score, by only loading the asset when the image (nearly) scrolls into the viewport. This enables the page to load faster 

The `<Image/>` component does pretty much what it says, it accepts all standard `<img/>` props.

## Import

```js
import { Image } from '@firstclasspostcodes/sw13';
// or
import { Image } from '@firstclasspostcodes/sw13/lib/components/Image';
```

## Example

<Playground>
  <Image src="https://via.placeholder.com/350x150" />
</Playground>