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.

import { load } from "~/lib/datocms";
import { Image } from "react-datocms";
import { useLoaderData } from "remix";
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  posts: allBlogPosts(first: $limit) {
    id
    title
    coverImage {
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
        srcSet
        webpSrcSet
        sizes
        src
        width
        height
        aspectRatio
        alt
        title
        base64
      }
    }
  }
}`;
export async function loader() {
  return load({
    query: HOMEPAGE_QUERY,
    variables: { limit: 10 }
  });
}
export default function Home() {
  const { posts } = useLoaderData();
  return (
    <div>
      {posts.map(blogPost => (
        <article key={blogPost.id}>
          <Image data={blogPost.coverImage.responsiveImage} />
          <h6>{blogPost.title}</h6>
        </article>
      ))}
    </div>
  );
}

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;