# Managing images

One of the major advantages of using DatoCMS instead of any other CMS is its [`responsiveImage` query](https://www.datocms.com/docs/content-delivery-api/images-and-videos.md#responsive-images), 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:

(Video content)

Inside your project, install the [`react-datocms`](https://github.com/datocms/react-datocms) package. It offers many functionality that will help us build our React Router website:

Terminal window

```bash
npm i react-datocms --save
```

Inside any of your pages, you can now feed the data coming from a [`responsiveImage` query](https://www.datocms.com/docs/content-delivery-api/images-and-videos.md#responsive-images) directly into the `<Image />` component that this package offers.

```tsx
import type { Route } from './+types/home';
import { load } from '~/lib/datocms';
import { Image } from 'react-datocms';

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(HOMEPAGE_QUERY, {
    variables: { limit: 10 },
  });
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const { posts } = loaderData;

  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;

## Related content in "React Router"

- [React Router + DatoCMS Overview](https://www.datocms.com/docs/react-router.md)
- [Managing images](https://www.datocms.com/docs/react-router/managing-images.md)
- [Displaying videos](https://www.datocms.com/docs/react-router/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/react-router/structured-text-fields.md)
- [Adding SEO to pages](https://www.datocms.com/docs/react-router/seo-management.md)
- [Setting up a preview mode](https://www.datocms.com/docs/react-router/setting-up-a-preview-mode.md)
- [Real-time updates](https://www.datocms.com/docs/react-router/real-time-updates.md)