I make a Gatsby site with image fluid to have a responsive image on my site, that work fine in local development and when I build and use serve to deploy locally, all the images have a good size. But when it's deployed on Netlify the image choice is not the good one, and the result is little blur. The size choice to be display is just under the good one. I cannot figure what can I do to fix it... I try to way to deploy : First by hosting my site on github, and the other by drag-and-drop my site on netlify. So I'm little lost...
https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js
I would suggest removing the maxHeight attribute in the query (line 62) that's fixing the height intrinsically, constraining the image. You are setting a maximum height of 300px in a container that is far bigger (100vw or 100% of the viewport), creating an output like:
<picture><source srcset="/static/71cab95f897e5df896f6b7f6f158ce76/240b5/casey_reas_0.jpg 75w,
/static/71cab95f897e5df896f6b7f6f158ce76/ba5d5/casey_reas_0.jpg 150w,
/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg 300w,
/static/71cab95f897e5df896f6b7f6f158ce76/1e170/casey_reas_0.jpg 450w,
/static/71cab95f897e5df896f6b7f6f158ce76/0d31e/casey_reas_0.jpg 600w,
/static/71cab95f897e5df896f6b7f6f158ce76/ad7ed/casey_reas_0.jpg 914w" sizes="(max-width: 300px) 100vw, 300px"><img sizes="(max-width: 300px) 100vw, 300px" srcset="/static/71cab95f897e5df896f6b7f6f158ce76/240b5/casey_reas_0.jpg 75w,
/static/71cab95f897e5df896f6b7f6f158ce76/ba5d5/casey_reas_0.jpg 150w,
/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg 300w,
/static/71cab95f897e5df896f6b7f6f158ce76/1e170/casey_reas_0.jpg 450w,
/static/71cab95f897e5df896f6b7f6f158ce76/0d31e/casey_reas_0.jpg 600w,
/static/71cab95f897e5df896f6b7f6f158ce76/ad7ed/casey_reas_0.jpg 914w" src="/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"></picture>
Note the sizes="(max-width: 300px)" among the picture tag.
I find it strange that this approach works locally but, if you want to give it a try, you can force the Node version to the Netlify side creating a .nvmrc file in the root of your project with your local Node version. This will ensure that both environments (local and Netlify) work under the same Node umbrella. Just run:
node -v > .nvmrc
As I said, this will create a .nvmrc file in the root of your project that Netlify will catch during the deployment to set the Node version (key when installing dependencies).