# Released React DatoCMS Image component v4

[date: 2022-11-11T15:13:52.628+01:00]

Basically, with [react-datocms v4.0.0](https://github.com/datocms/react-datocms/releases/tag/v4.0.0) your `responsiveImage()` GraphQL queries can be reduced down to:

```plaintext
responsiveImage(imgixParams: { auto: format }) {
  src width height alt base64
}
```

-   You can avoid requesting `srcSet` in the `responsiveImage` GraphQL query, as if it's missing, the React `<Image />` component knows how to build it from `src`.
-   You can avoid requesting `webpSrcSet` as well, because the `{ auto: format }` Imgix transformation parameter offers even more performant optimizations (AVIF), without increasing the GraphQL response size.
    
-   You can avoid requesting `sizes`, and just use the `sizes` prop on the Image component itself.
    

Overall, these changes can reduce the overall GraphQL response size significantly, especially when dealing with many images at once.

#### New props for Image component:

-   `priority`: When true, the image will be considered high priority. Lazy loading is automatically disabled, and `fetchpriority="high"` is added to the image.
    
    You should use the `priority` property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes. Should only be used when the image is visible above the fold.
    
-   `sizes`: If you're using this prop, you can avoid requesting `sizes` in the `responsiveImage` query.
-   `srcSetCandidates`: If you're not requesting `srcSet` in the `responsiveImage` query, `srcSetCandidates` will be used to generate the different `srcset` candidate strings at various widths. Default candidates are: `[0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]`.