Closed
Description
Summary
I started to use gatsby-image to optimize images.
- on page before optimization https://2m2.dragonflypl.now.sh/portfolio/ original image of size 1200x848 https://2m2.dragonflypl.now.sh/images/folio/thumbs/biblioteka-uek-1.jpg is 107kB in size
- on page after optimization https://2m2-optimized.dragonflypl.now.sh/portfolio/ served image is of size 400x283 https://2m2-optimized.dragonflypl.now.sh/static/27105dc2b375f80284a4aa9f890478ef/3ff6e/biblioteka-uek-1.jpg and is ... larger 113kB and its quality (even though I set quality: 100) is much worse (weirdly smoothed or sth like that).
It happens for all my images. My configuration is :
- plugins with no params:
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`
- this is the query (version with hardcoded image name):
const query = graphql`
query {
allFile(filter: { absolutePath: { regex: "/images/folio/thumbs/biblioteka-uek-1/i" } }) {
edges {
node {
name
childImageSharp {
fluid(maxWidth: 400, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;
export default () => useStaticQuery(query).allFile.edges.map(x => x.node);Sample output is:
{
"data": {
"allFile": {
"edges": [
{
"node": {
"name": "biblioteka-uek-1",
"childImageSharp": {
"fluid": {
"aspectRatio": 1.4150943396226414,
"src": "/static/27105dc2b375f80284a4aa9f890478ef/3ff6e/biblioteka-uek-1.jpg",
"srcSet": "/static/27105dc2b375f80284a4aa9f890478ef/1cf29/biblioteka-uek-1.jpg 100w,\n/static/27105dc2b375f80284a4aa9f890478ef/b5b92/biblioteka-uek-1.jpg 200w,\n/static/27105dc2b375f80284a4aa9f890478ef/3ff6e/biblioteka-uek-1.jpg 400w,\n/static/27105dc2b375f80284a4aa9f890478ef/5e4f2/biblioteka-uek-1.jpg 600w,\n/static/27105dc2b375f80284a4aa9f890478ef/d47f1/biblioteka-uek-1.jpg 800w,\n/static/27105dc2b375f80284a4aa9f890478ef/86173/biblioteka-uek-1.jpg 1200w",
"sizes": "(max-width: 400px) 100vw, 400px",
"originalImg": "/static/27105dc2b375f80284a4aa9f890478ef/86173/biblioteka-uek-1.jpg",
"originalName": "biblioteka-uek-1.jpg",
"presentationWidth": 400,
"presentationHeight": 283
}
}
}
}
]
}
}
}
and usage <Img fluid={thumb.childImageSharp.fluid} />
Why is that?
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
[-]Issue with gatsby-image : generated images are larger than original[/-][+]Issue with gatsby-image : generated images are larger than original and worse in quality[/+]KyleAMathews commentedon May 23, 2019
We don't recommend using quality 100 as that (as you found out) generates very large images.
50-75 is generally a good range (we default to 50).
How wide is the container you're showing the images? Perhaps
maxWidthshould be larger?dragonflypl commentedon May 23, 2019
Indeed, max width should be slightly larger as in 2 col layout image was stretched.
I don't quite get it with quality param... I would like to preserve an image's quality and only have it resized. What config should I use?
DSchau commentedon May 23, 2019
@dragonflypl the idea is that because you're already dealing with a lossy image (
.jpg) that we can optimize even further, resulting in a smaller (by file-size) image that is generally visually indistinguishable to the end user.Think of it as analogous to a compiler optimizing code. The code will still run the same way (as far as the end user is concerned) but it will be optimized, smaller, and perhaps even more efficient; so to are gatsby's image transformations and optimizations.
dragonflypl commentedon May 23, 2019
I've used 500 width + quality 75. Looks better in terms of size and image quality, Thanks. Still, images are really not sharp and smoothed too much: https://2m2-optimized.dragonflypl.now.sh/portfolio/ .
Is there anything I can do to make it better?
DSchau commentedon May 23, 2019
@dragonflypl looks fine to my eyes. Image quality is never going to be 1:1 (thus, a lossy image) but you want the optimization.
Original
Optimized, Smaller Image
Of course it won't look quite the same because it's a) compressed, and b) smaller, but I think the intent is clear here. Ship less bytes with optimized images that are visually mostly indistinguishable to the end user.
dragonflypl commentedon May 23, 2019
Thanks for the explanation . Closing the issue.