Remix > Managing images

One of the major advantages of using DatoCMS instead of any other CMS is its responsiveImage query, which will return pre-computed image attributes that will help you to set up responsive, lazy loaded images in your frontend without any effort.

Our solution allows you to show beautiful image placeholders (LQIP) in base64 format, without any additional request to be made by the browser or server:

Inside your project, install the react-datocms package. It offers many functionality that will help us build our Remix website:

npm i react-datocms --save

Inside any of your pages, you can now feed the data coming from a responsiveImage query directly into the <Image /> component that this package offers.

1
import { load } from "~/lib/datocms";
2
import { Image } from "react-datocms";
3
import { useLoaderData } from "remix";
4

5
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
6
  posts: allBlogPosts(first: $limit) {
7
    id
8
    title
9
    coverImage {
10
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
11
        srcSet
12
        webpSrcSet
13
        sizes
14
        src
15
        width
16
        height
17
        aspectRatio
18
        alt
19
        title
20
        base64
21
      }
22
    }
23
  }
24
}`;
25

26
export async function loader() {
27
  return load(HOMEPAGE_QUERY, {
28
    variables: { limit: 10 }
29
  });
30
}
31

32
export default function Home() {
33
  const { posts } = useLoaderData();
34

35
  return (
36
    <div>
37
      {posts.map(blogPost => (
38
        <article key={blogPost.id}>
39
          <Image data={blogPost.coverImage.responsiveImage} />
40
          <h6>{blogPost.title}</h6>
41
        </article>
42
      ))}
43
    </div>
44
  );
45
}

With so little code, the image component:

• Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images;

• Efficiently lazy-loads images to speed initial page load and save precious bandwidth;

• Holds the image position so your page doesn’t jump while images load;

• Uses blur-up techniques to show a preview of the image while it's still loading;