Image
Optimized image component for local and remote sources.
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Dunedin Cliff" source="/src/assets/images/component-library/dunedin-cliff.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/dunedin-cliff.jpg
alt: Dunedin Cliff
rounded: false
---Overview
An image component with built-in optimization for local, CDN, and remote sources. Automatically serves responsive sizes and modern formats like AVIF for smaller file sizes. Supports aspect ratios, object fit, positioning, rounded corners, and automatic cropping when aspect ratios are set.
Properties
source string
The URL or path to the image.
alt string
Alternative text for accessibility.
rounded boolean | default: false
Whether to apply rounded corners to the image.
aspectRatio enum | default: none
Set a fixed aspect ratio for the image.
Accepted values:
-
none -
square -
landscape -
portrait -
widescreen -
horizontal-strip
positionVertical enum | default: center
Vertical positioning of the image within the container (if aspect ratio is set).
Accepted values:
-
top -
center -
bottom
positionHorizontal enum | default: center
Horizontal positioning of the image within the container (if aspect ratio is set).
Accepted values:
-
left -
center -
right
priority boolean | default: false
Load the image with high priority (eager loading for above-the-fold images).
marginTop enum
Accepted values:
-
none -
xs -
sm -
md -
lg -
xl -
2xl -
3xl
maxHeight enum
Accepted values:
-
sm -
md -
lg -
xl
borderRadius enum
Accepted values:
-
none -
sm -
md -
lg -
xl -
2xl -
yep -
full
Examples
Source
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Forest" source="https://picsum.photos/id/28/1920/1080" />---
blocks:
_component: building-blocks/core-elements/image
source: https://picsum.photos/id/28/1920/1080
alt: Forest
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Bear" source="https://placebear.com/1024/768" />---
blocks:
_component: building-blocks/core-elements/image
source: https://placebear.com/1024/768
alt: Bear
---
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Pione" source="https://assets.imgix.net/examples/pione.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: https://assets.imgix.net/examples/pione.jpg
alt: Pione
---
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
---Ratio
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Castle" aspectRatio="square" source="/src/assets/images/component-library/castle.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/castle.jpg
alt: Castle
aspectRatio: square
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Castle" aspectRatio="landscape" source="/src/assets/images/component-library/castle.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/castle.jpg
alt: Castle
aspectRatio: landscape
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Castle" aspectRatio="portrait" source="/src/assets/images/component-library/castle.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/castle.jpg
alt: Castle
aspectRatio: portrait
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Castle" aspectRatio="widescreen" source="/src/assets/images/component-library/castle.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/castle.jpg
alt: Castle
aspectRatio: widescreen
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Random image from CDN" aspectRatio="square" source="https://assets.imgix.net/examples/pione.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: https://assets.imgix.net/examples/pione.jpg
alt: Random image from CDN
aspectRatio: square
---Position
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" aspectRatio="square" positionHorizontal="left" positionVertical="top" source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
aspectRatio: square
positionVertical: top
positionHorizontal: left
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" aspectRatio="square" positionHorizontal="center" positionVertical="center" source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
aspectRatio: square
positionVertical: center
positionHorizontal: center
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" aspectRatio="square" positionHorizontal="right" positionVertical="bottom" source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
aspectRatio: square
positionVertical: bottom
positionHorizontal: right
---Rounded
---
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" rounded source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
rounded: true
------
import Image from "@components/building-blocks/core-elements/image.astro";
---
<Image alt="Quiet Street" source="/src/assets/images/component-library/quiet-street.jpg" />---
blocks:
_component: building-blocks/core-elements/image
source: /src/assets/images/component-library/quiet-street.jpg
alt: Quiet Street
---