[feature request] ability to do art direction images

[kelenakamura]

ability to set a specific to have separate images or aspect ratios for say mobile vs desktop.

specific use case - a hero image (landscape orientation) say 1400x400 or something. and for mobile ie <source media="(max-width: 767px)" ...> can specify via focal points and aspect ratio to Imgix to crop the photo to portrait ie 300x400.

right now in the graphql query we can also only specify a single set of imgix params, so there's no way to does this unless we just have 2 separate images for the model.

[timvandevelde]

@kelenakamura you can do multiple requests to your image by naming the queries. I've created a responsiveImage components which loads two Image variants based on breakpoints. This is an example graphql query

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
  }
}

<Image data={exampleImage.mobileImage} />
<Image data={exampleImage.desktopImage} />

[kelenakamura]

@timvandevelde yes sorry, i guess more of the issue is the dato image component doesn't have a way for us to specify break points to output an art directed tag.

so you have to put 2 images on the page and show / hide. it definitely works, just not as elegant?

[kelenakamura]

ideally you could pass in an array of srcsets with media query. typically these are really mainly only necessary for hero images (since diff aspect ratios), and you usually want to add a fetch priority and disable lazy loading. which works best with a single image vs 2 images and hiding one.

<Image
    sources = {[
        {
            data: exampleImage.mobileImage,
            media: "(max-width: 420px)",
        },
        {
            data: exampleImage.desktopImage,
        }
    ]}
/>

[sistrall]

Hi @kelenakamura,

I second @timvandevelde proposal: <Image> component supports className prop, so you can easily show different <Image>s on different viewports with some simple CSS and media queries.

Though, feel free to open a feature request among our community.