# Managing images

One of the major advantages of using DatoCMS instead of any other content management systems 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 setting up responsive images in your frontend without any additional manipulation**.

To make it even easier to offer responsive, progressive images on your projects, we offer a package called [`react-datocms`](https://github.com/datocms/react-datocms) that exposes an `<Image />` component and pairs perfectly with the `responsiveImage` query.

Our solution offers the same advantages of using Next [Image component](https://nextjs.org/docs/basic-features/image-optimization), with the added benefit of having beautiful low-quality image placeholders (LQIP) in base64 format embedded directly within the page, without any additional request to be made by the browser or server:

(Video content)

To take advantage of it, install the [`react-datocms`](https://github.com/datocms/react-datocms) package:

Terminal window

```bash
yarn add react-datocms
```

Then, inside your page, feed content coming from a [`responsiveImage` query](https://www.datocms.com/docs/content-delivery-api/images-and-videos.md#responsive-images) directly into the `<Image />` component:

```jsx
import { request } from "../lib/datocms";
import { Image as DatoImage } from "react-datocms";

const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    coverImage {
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
        sizes
        src
        width
        height
        alt
        title
        base64
      }
    }
  }
}`;

export async function getStaticProps() {
  const data = await request({
    query: HOMEPAGE_QUERY,
    variables: { limit: 10 }
  });

  return {
    props: {
      data
    }
  };
}

export default function Home({ data }) {
  return (
    <div>
      {data.allBlogPosts.map(blogPost => (
        <article key={blogPost.id}>
          <DatoImage data={blogPost.coverImage.responsiveImage} />
          <h6>{blogPost.title}</h6>
        </article>
      ))}
    </div>
  );
}
```

## Related content in "Legacy Next.js"

- [Legacy Next.js + DatoCMS Overview (for Page Router)](https://www.datocms.com/docs/legacy-next-js-documentation.md)
- [Managing images](https://www.datocms.com/docs/legacy-next-js-documentation/managing-images.md)
- [Structured Text fields](https://www.datocms.com/docs/legacy-next-js-documentation/rendering-structured-text-fields.md)
- [Adding SEO to pages](https://www.datocms.com/docs/legacy-next-js-documentation/seo-management.md)
- [Setting up Next.js Preview Mode](https://www.datocms.com/docs/legacy-next-js-documentation/setting-up-next-js-preview-mode.md)
- [Real-time updates](https://www.datocms.com/docs/legacy-next-js-documentation/real-time-updates.md)