Setting DPR for mobile screens

jdozierezell commented 5 years ago

I'm not able to set the dpr via the imgixParams for images loaded through gatsby-image using the datocms source plugin. Regardless of whether I set dpr or remove it from the parameters, dpr always comes back capped at 1 (0.25 and 0.5 are also served). This is causing an issue on high res devices. I'm able to circumvent that by increasing the width and height request, but I'm just curious if this is the expected behavior. Query and returned image are below. Thanks!

            mobileImage: coverImage {
                fluid(
                    maxWidth: 1080
                    imgixParams: {
                        dpr: 3
                        w: "1080"
                        h: "500"
                        fit: "crop"
                        crop: "faces"
                    }
                ) {
                    ...GatsbyDatoCmsFluid_tracedSVG
                }
            }

https://www.datocms-assets.com/13233/1561761281-nsfdthebalcony-0348.jpg?auto=format&crop=faces&dpr=1&fit=crop&h=500&w=1080 1080w

matjack1 commented 5 years ago

@jdozierezell unfortunately you are right, we are overriding the DPR as it's the only way we have found to deal with fluid images with Imgix.

As we need to preserve all other parameters and find one that allowed us to have different sizes of the same picture. The best example I think is with cropping. As you need to specify the pixels of the crop and then have different sizes of the image.

The details are here: https://github.com/datocms/gatsby-source-datocms/blob/898885d0ed128d7f007b6367c0565d3bcfb38a82/src/hooks/setFieldsOnGraphQLNodeType/nodes/upload/utils/resizeUrl.js

And if you have further suggestions we are very open to them, as we know it's a hack and would be able to find a better solution.

jdozierezell commented 5 years ago

Thanks @matjack1 that makes sense. I can just compensate by increasing the cropped values.

datocms / gatsby-source-datocms

Setting DPR for mobile screens #69