We can get 2 different sourcesets via Graphql. However there is no way to send both to a single image component. This would be ideal for hero images with feature priority set so that desktop and mobile can have different aspect ratios using the same image.
A thread was here - [feature request] ability to do art direction images · Issue #64 · datocms/react-datocms · GitHub
exampleImage {
mobileImage: responsiveImage(imgixParams: {auto: compress, q: 30, fit: crop, w: 390, h: 320, crop: entropy }) {
...responsiveImageFragment
}
desktopImage: responsiveImage(imgixParams: {auto: compress, q: 40, fit: crop, w: 1920, h: 640, crop: entropy }) {
...responsiveImageFragment
}
}
and instead of adding 2 images to the page and hiding with css, you could
<Image
sources = {[
{
data: exampleImage.mobileImage,
media: "(max-width: 420px)",
},
{
data: exampleImage.desktopImage,
}
]}
/>