Managing images

One of the major advantages of using DatoCMS instead of any other content management systems is its responsiveImage query, which will return pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

To make it even easier to offer responsive, progressive, lazy-loaded images on your projects, we offer a package called @datocms/astro that exposes an <Image /> component and pairs perfectly with the responsiveImage query:

To take advantage of it, install the @datocms/astro package:

yarn add @datocms/astro

Before using the image component, it is necessary to obtain the necessary data by running a GraphQL query using responsiveImage.

Then, inside your Astro component or page, feed content coming from a responsiveImage query directly into the <Image /> component:

1
---
2
import { Image } from '@datocms/astro';
3

4
const query = `
5
  query HomeQuery {
6
    blogPost {
7
    title
8
    cover {
9
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
10
        # always required
11
        src
12
        srcSet
13
        width
14
        height
15

16
        # not required, but strongly suggested!
17
        alt
18
        title
19

20
        # LQIP (base64-encoded)
21
        base64
22

23
        # you can omit 'sizes' if you explicitly pass the 'sizes' prop to the image component
24
        sizes
25
      }
26
    }
27
  }
28
`;
29
const data = await executeQuery(query);
30
---
31

32
<article>
33
  <h1>{data.blogPost.title}</h1>
34
  <Image data={data.blogPost.cover.responsiveImage} />
35
</article>

The image component creates zero JS footprint, produces a single <picture /> element, and implements lazy-loading using the native loading="lazy" attribute. You can refer to the package README to learn more.