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/svelte that exposes an <Image /> component and pairs perfectly with the responsiveImage query:

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

yarn add @datocms/svelte

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

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

13
        # not required, but strongly suggested!
14
        alt
15
        title
16

17
        # LQIP (base64-encoded)
18
        base64
19

20
        # you can omit 'sizes' if you explicitly pass the 'sizes' prop to the image component
21
        sizes
22
      }
23
    }
24
  }
25
`;
26

27
export const load = () => {
28
  return executeQuery(query);
29
};

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

<script>
import { Image } from '@datocms/svelte';

export let data;
</script>

<Image data={data.blogPost.cover.responsiveImage} />

The @datocms/svelte package also offer a <NakedImage /> component which generates minimum JS footprint, outputs a single <picture /> element and implements lazy-loading using the native loading="lazy" attribute. You can refer to the package README to learn more.