---
title: "Image Block Demo"
description: "Base setup on top of headless services to help you get started quickly"
language: "English"
url: "https://head-start.pages.dev/en/demos/image-block-demo/"
---

Copy page

* [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fimage-block-demo%2F+and+explain+it+to+me.)
* [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fimage-block-demo%2F+and+explain+it+to+me.)

# Image Block Demo

!Note: this piece of documentation is auto-generated from [blocks/ImageBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/blocks/ImageBlock/README.md).

**Renders **[**DatoCMS image**](https://www.datocms.com/docs/general-concepts/images)** with optional caption.**

## Features

* Supports both bitmap and vector images.

* Supports optional caption using image title.

* Lazy loads image for better performance.

* Reserves space for image to prevent page reflow.

* Uses blurup image as bitmap image placeholder.

* Uses modern formats (avif/webp) for bitmap images automatically.

* Has styling for broken image, in case image doesn't exist or can't be loaded.

![Head Start](https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?auto=format%2Ccompress\&q=80\&w=1280)