Gatsby.js has blurry images

Question

I'm fairly new to React/Gatsby and have just tweaked a template to create the site www.flakyrecords.com.

I packaged the site using the Gatsby command gatsby build which creates the website in the public folder. I then copied all of the files and folders from this public directory to my hosting provider.

For the most part, it worked - however, as you can see, the images are extremely blurry. Is there something obvious I need to do here in order to publish the images as sharp/in focus?

Many thanks.

Answer 1

Your image paths are wrong.

gatsby-image creates a blur effect by adding a data-image while loads the image itself. In your case, it keeps the blur because it doesn't find the asset.

This is your output code:

<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 116.959%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAIAAACEf/j0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADdElEQVQ4y52TWSivaxTGXzMlKcc8plDChQyhyDyHK1FEpkxlvECUKZJ5TkQUhVLKVC7IlKmMuaFIUorITDg//+/fPvvUOZ29z7p4e7/1rWetZz1rvcLFxaWxsfHk5OTy8vLp6enl5eXt7e3z8/Pr64vz/v7+9vb24uLi4OBgcXFxfHy8s7OzrKwsLi7Oy8tLmJqaOjg41NTUDA4Ozs/Pr6ysrK2tLS8vb2xscAFzdHTEfWFhYXZ2dnR0tKenp6CgwM/Pz9raWpiZmZFmbGzs8PDw7u6O4lTe3d2lQl9fX3JycmxsbFNTU3FxcVJSUmhoqLu7u76+voqKiqqqqnBycqqqqtrZ2Xl+fv6S2cPDQ3R0tBBCXV1dyCwlJWVkZIQw8AEBATo6OjgVFBSEo6Nje3v76enpx8fH+/s7YFhpa2t3dXX19/cXFhYaGRkpKiomJCS0traWlJTAxcLCQg728PCora0F/Pr6CpImjY2N6Zw7/DnBSPXz8vLa2tpyc3NdXV29vb0NDAwEJCsrKzc3NyXOkZGRUVFRXGCB8lz29va+44QICwsbGBigOJ2TwsTERPB7aWkpPT19f39/e3uboKKiIi7X19fStFAxNTUVv5qaGh01Nze7ubnxSS8CtpB0dnaenJyEP960tLSIiAi6ZUipMgsODpaY+/r6MgI0k4NXV1eHhobi4+Npu6OjA4bkBomf8WZkZFRUVPj7+7MOAKjR3d0dGBgoFywrK6uuro58kGxoaAgJCbm6ukL58/PziYmJ7OxsRMGTk5MDQFdXF4H+qsyEh4eH5+bmAJeXl5P17OwMMJ7e3l57e3vW8/HxMTw8HICVlVV+fj5E5GAwx8fHNzc3XGDLhJGXOxsWFBTk6ekJBbJoaGjAU0tLi4FLEsjBW1tb1KEsu85WIf709DQ6+fj4MM/6+noAktrKyspwxi8HswmlpaWkBEZ6lralpYV3RpCtrS1Nssl2dnZEg+TvHzKTxBc8HT09PbIS9y2gEDY2NjMzM+vr65mZmWw1b05JSUkKJoCCUti3TU1N8bBwaWpqysmI79dCcWkqqCAfjMwUZSYHw5ayUkqJGyfa8mINDQ0tLS3F301BZuIfja44Y2Ji2BCmyD7+oPOv9iOfdJqbmycmJlZXV39v/0+c/9sIpREkYAS/AfsZLyn8f8C/aH8CTv/RsiNYjf4AAAAASUVORK5CYII=" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;"><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px"><img sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px" /><img loading="lazy" sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>

If you try to look for https://www.flakyrecords.com/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png it will throw a 404 error.