# 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 returns **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 two components pairing perfectly with the `responsiveImage` query: `<Image/>` and `<SRCImage/>.`

Our solution offers the same advantages as using the Next.js [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
npm install 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 { Image as DatoImage, SRCImage as DatoSRCImage } from "react-datocms";
import { performRequest } from '../lib/datocms';

const PAGE_CONTENT_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 default async function Home() {
  const pageContent = await performRequest(PAGE_CONTENT_QUERY, {
    variables: { limit: 10 },
  });

  return (
    <div>
      {data.allBlogPosts.map(blogPost => (
        <article key={blogPost.id}>
          {/* client component with custom lazy-loading via IntersectionObserver */}
          <DatoImage data={blogPost.coverImage.responsiveImage} />
          {/* server component, uses native loading="lazy" */}
          <DatoSRCImage data={blogPost.coverImage.responsiveImage} />
          <h2>{blogPost.title}</h2>
        </article>
      ))}
    </div>
  );
}
```

### `<SRCImage />` vs `<Image />`

Even though their purpose is the same, there are some significant differences between these two components. Depending on your specific needs, you can choose to use one or the other:

-   `<SRCImage />` is a [React Server Component](https://nextjs.org/docs/app/building-your-application/rendering/server-components), so it can be rendered and optionally cached on the server. It doesn't create any JS footprint. It generates a single `<picture />` element and implements lazy-loading using the native [`loading="lazy"` attribute](https://web.dev/articles/browser-level-image-lazy-loading). The placeholder is set as the background to the image itself. Be careful: the placeholder is not removed when the image loads, so it's not recommended to use this component if you anticipate that the image may have an alpha channel with transparencies.
    
-   `<Image />` is a [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components). Since it runs on the browser, it has the ability to set a cross-fade effect between the placeholder and the original image, but at the cost of generating more complex HTML output composed of multiple elements around the main `<picture />` element. It also implements lazy-loading through `IntersectionObserver`, which allows customization of the thresholds at which lazy loading occurs.
    

We recommend that you delve deeper into the topic in the [documentation of the components themselves](https://github.com/datocms/react-datocms/blob/master/docs/image.md).

## Related content in "Next.js"

- [Next.js + DatoCMS Overview](https://www.datocms.com/docs/next-js.md)

- [Optimizing calls to DatoCMS](https://www.datocms.com/docs/next-js/optimizing-calls-with-react-cache-function.md)
- [Managing images](https://www.datocms.com/docs/next-js/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/next-js/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/next-js/rendering-structured-text-fields.md)

- [Adding SEO to pages](https://www.datocms.com/docs/next-js/seo-management.md)
- [Setting up Next.js Draft Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode.md)

- [Real-time updates](https://www.datocms.com/docs/next-js/real-time-updates.md)
- [DatoCMS Cache Tags and Next.js](https://www.datocms.com/docs/next-js/using-cache-tags.md)

- [Visual Editing](https://www.datocms.com/docs/next-js/visual-editing.md)
- [Next.js Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Next 16](https://www.datocms.com/marketplace/starters/next-js-starter-kit.md)