Image

// Width and height are recommended for reservation of space
<Image src="https://source.unsplash.com/random/400x400" width={400} height={400} />
Copy

// Width and height need to be provided manually, webp support is automatic
// Output with webp support: <img src="/images/dist/ipad.webp".../>
<Image src="ipad.png" width={2732} height={2048} />
Copy

// Width, height and webp support are handled automatically
<Image src={props.data.image} />
// Optionally provide a size (default m) for the width (height will be automatic)
// xs => 100
// s => 480
// m => 720
// l => 1280
// xl => 1920
<Image src={props.data.image} size="xl" />
Copy

//
<Image src="/images/example.svg" />
Copy