Open pawelngei opened 3 years ago
just noticed this as I wanted to upgrade quality of images on my sites, is there a workaround? default compression quality of 75 is really no good for modern web
@RitaDias , @kmelve
Any chance of getting this fixed?
This issue has been open since almost 2 years and makes full screen images look horrible with gatsby-source-sanity
.
Corey's gatsby-plugin-sanity-image
is only a possible workaround if you don't need withArtDirection
.
There is a lot of open issues that have this a their topic.
I assume this by design according to https://github.com/sanity-io/gatsby-source-sanity/issues/134#issuecomment-951876221 .
Still, the srcSet
quality set is simply too low and likely the lack of flexibility with the parameters as described in https://github.com/sanity-io/gatsby-source-sanity/issues/89 is the actual issue.
A temporary brute-force workaround for people in a hurry:
You could modify the srcSet
before passing it to Gatsby Image.
An example for withArtDirection
:
const breakPointImagesArray = image.breakpointImages && [
...image.breakpointImages.map(artDirectionImage => {
if (
artDirectionImage.breakpoint === "undefined" ||
artDirectionImage.image === "undefined"
) {
throw new Error("Error: ArtDirectionImage incomplete!")
}
return {
media: `(min-width: ${artDirectionImage.minWidth}px)`,
image: getImage(artDirectionImage.image?.asset.gatsbyImageData)
}
})
]
let artDirectionImages = withArtDirection(
getImage(image.defaultImage.asset?.gatsbyImageData),
breakPointImagesArray
)
// Map over the sources and update the srcSet values to improve quality by lowering the breakpoints where images are used
const improvedSources = artDirectionImages.images.sources.map(source => {
const adaptedSrcSet = source.srcSet.replace(/(\d+w)/g, (match, p1) => {
// Divide the width by 2 to improve the quality
const newValue = parseInt(p1) / 2
return `${newValue}w`
})
// Return the updated source object with the new srcSet value
return {
...source,
srcSet: adaptedSrcSet
}
})
// Update the artDirectionImages object with the improved quality sources
let artDirectionImagesImprovedQuality = {
...artDirectionImages,
images: {
...artDirectionImages.images,
sources: improvedSources
}
}
(just an example, another one would be of course to double the width and height parameter values)
Hi all, Thanks for bringing this to our attention, we've added this to the list on going things and it will be prioritised accordingly.
Once more thanks!
We are using Gatsby 3.0 (with
gatsby-plugin-image > 1.5.0
andgatsby-source-sanity > 7.0.4
) on Sanity2.12.2
. Due to our architecture, we need to stick withgatsby-plugin-image
and cannot usegatsby-plugin-sanity-image
.While the images are displayed correctly, we cannot control them using
gatsbyImageData
props listed in gatsby-plugin-image's documentation: they're ignored by Sanity. Only afallbacks
object is returned with ansrc
andsrcSet
, which has all the pixel densities and resolutions already hardcoded. The options likequality
,breakpoints
oroutputPixelDensities
don't work whether they're passed through a GraphQL query or adefaults
object.To quote the docs:
Using the GraphiQL
gatsbyImageData
on aSanityImageAsset
allows to make a basic query, but again, the props listed above do not change what is being returned from Sanity. Some of them, likequality
, are not even listed as possible.I double-checked, the graphql for a given dataset was deployed correctly. It's also not a matter of the plugin versions, as upgrades to the latest don't help.
To Reproduce
Steps to reproduce the behavior:
gatsby-plugin-image
andgatsby-source-sanity
.gatsby develop
http://localhost:8000/___graphiql
gatsbyImageAsset
therebreakpoints
orquality
Expected behavior
gatsbyImageData
has access to all the https://www.sanity.io/docs/image-urls props on Sanity Image.Using them changes the output of the query.
Query Example
Results in:
Which versions of Sanity are you using?
What operating system are you using?
Ubuntu 20.04.2 LTS
Which versions of Node.js / npm are you running?
6.14.4 v12.18.0