Hi, @emmanuelbouviere, first I want to explain a bit more about the blurred images. I took a look at this URL and chose two images from that page:
Here is a screenshot of the two images:
The “stand-alone” image is an image file referenced by this URL. It works correctly:
https://frosty-boyd-d6d0d5.netlify.com/static/e84bbbfc41c8a84dcb7952595fbb3475/74c1f/pharmatechs.jpg
The blurry image labeled “embedded image” is base64 encoded at text in the HTML. The HTML source for this image follows:
<span class="gatsby-resp-image-background-image" style="padding-bottom:26.31578947368421%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzsOh0//9oADAMBAAIAAwAAABCED//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwcui0fVD/9k=');background-size:cover;display:block"></span>
It is possible to convert that text back into the JPEG format like so:
$ echo "/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzsOh0//9oADAMBAAIAAwAAABCED//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwcui0fVD/9k=" | base64 -D >> out.jpg
I am then able to examine that image and see details about it:
$ magick identify out.jpg
out.jpg JPEG 20x5 20x5+0+0 8-bit sRGB 557B 0.000u 0:00.001
The image in question is 20 pixels wide and 5 pixels high. On the displayed page, the image is about 190 by 28 pixels (a rough estimate at best). This “zooming in” on a small image to make it large is the source of the blurring.
The next question becomes: “Why is there a difference?”
There appears to be a difference is how this image is processed during the build at Netlify which differs from the local build for you. (Spoiler alert, my local build also has this issue however.)
The repo for this site is public so I cloned it, ran yarn install
and yarn run build
and I get the same result at the Netlify build. This is the embedded image for my local build:
<span class="gatsby-resp-image-background-image" style="padding-bottom:26.31578947368421%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAZbKTmD/xAAaEAACAgMAAAAAAAAAAAAAAAAAAgEUAwQR/9oACAEBAAEFAo237bcuZD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGq/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BiP/EABYQAAMAAAAAAAAAAAAAAAAAAAACMf/aAAgBAQAGPwKKRSKf/8QAGRAAAwADAAAAAAAAAAAAAAAAAAHREbHw/9oACAEBAAE/IW6qNKzuOh0//9oADAMBAAIAAwAAABCEL//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EKU//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QhD//xAAaEAACAgMAAAAAAAAAAAAAAAABEQDRITFB/9oACAEBAAE/EEo49IQMwYui0fVD/9k=');background-size:cover;display:block"></span>
Simply put, my fresh clone and build of this repo generates the same small image and zooms it to be larger. I’m able to reproduce this locally so this issue isn’t specific to Netlify.
As a next troubleshooting step, would you please test cloning and building this site in a new directory locally to see if you can reproduce the issue there also? If you can reproduce it locally, the issue should be resolved with that local build first. Once that is done, the Netlify build issue should also be resolved as well.
If there are other questions about this, please let us know.