Gatsby build has blurry images

[Lylio]

Description

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.

Steps to reproduce

1. gatsby build
2. Copy everything from local 'public' folder to my hosting provider
3. Observer blurry images: www.flakyrecords.com

Expected result

Images should be clear/sharp

Actual result

Images are very blurry

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 10.19.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 3.8.5 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.75
Firefox: 81.0
npmPackages:
gatsby: ^2.23.7 => 2.23.11
gatsby-image: ^2.4.7 => 2.4.9
gatsby-plugin-manifest: ^2.4.12 => 2.4.14
gatsby-plugin-offline: ^3.2.11 => 3.2.13
gatsby-plugin-react-helmet: ^3.3.4 => 3.3.6
gatsby-plugin-sass: ^2.3.4 => 2.3.6
gatsby-plugin-sharp: ^2.6.12 => 2.6.14
gatsby-source-filesystem: ^2.3.12 => 2.3.14
gatsby-transformer-sharp: ^2.5.5 => 2.5.7
npmGlobalPackages:
gatsby-cli: 2.12.108

[validity-check]

Hi, I would like to see if I can do anything here. Are the images blurry in development?

[xaverfleer]

Stackoverflow response

Your image paths are wrong.

[Lylio]

Thanks for the advice. I don't understand where the long string in the url comes from, after the/static/. However, if I create the folder and subfolder (a4acc2fd3768aba6c88aea6e0ca345b2/26a97/) within my hosting provider instance, and upload the lyle-03.png, then the website www.flakyrecords.com returns a sharp, in focus image. But do you know why this extra long String is being created in the filename? I had hope to simply upload my images straight into the static folder on my hosting provider (i.e. static/lyle-03.png) as that's how it is locally and works fine.

[xaverfleer]

I agree, it's sometimes confusing how resources are loaded/ where you need to upload your assets.

Are you working in a public repository? I can take a look at its configuration.

[dominikkurbiel]

Hey, I have the same issue but it looks like images are not working only in / (home) path which is index.html in public directory. So on /contact or other everything works perfect.

Moreover, I'm getting strange error on home path: Uncaught (in promise) Error: page resources for / not found. Not rendering React.

Maybe this is connected somehow or do you have any idea how to fix it?

[xaverfleer]

@dominikkurbiel your issue sounds like the import path to the image is incorrect.

Hard to tell without looking at your code.

Are you working in a public repository? I can take a look.

[dominikkurbiel]

@xaverfleer that would be perfect.

This is my repo: https://github.com/dominikkurbiel/mali_streamerzy

I just put my /public folder content to the FTP server, and its live here: https://www.malistreamerzy.pl/

Like I said it's not working only on home directory. (logo in the footer) When you enter any other page like https://www.malistreamerzy.pl/kontakt its working perfectly. Also mobile menu is not working on home path probably because this React error. On other pages its working smooth.

[xaverfleer]

@dominikkurbiel Not sur what's wrong. I cannot reproduce the issue.

1. gatsby develop shows the image
2. gatsby build then gatsby serve shows the image
3. Build the site with Netlify shows the images.

Also, it feels like we're hijacking this issue. Let's rather open a new one if the issue persists.

[dominikkurbiel]

I was actually able to fix this. I turned out there was some problem with deployment to FTP (I use DeployHQ for that). Thanks for your input ;)

[Lylio]

My repo is https://github.com/Lylio/flaky-records-webapp if you wouldn't mind having a look.

I've managed to fix the blurred images on desktop browser anyway, on my mobile, one of the images is stubborn and remains blurred. But the directory hierarchy/file-path on my hosting isn't pretty:

flakyrecords.com
|
|___ static
|
|___ 25d4a183ea655f7d2f80fc31f51c9cdf
|
|___ 73c85
|
|___ lyle-03.png

There are a couple of dozen folders in the public > static folder that have enormous Strings like '25d4a183ea655f7d2f80fc31f51c9cdf' as their file-names.

[LekoArts]

This isn't an issue with Gatsby but with how you upload your files or import your files. You're missing files (as answered in the SO question) and thus only the low-res preview is shown.

You shouldn't create the folders on your own, when using gatsby-image Gatsby will create the folders with the hash (your "enormous string") and file itself.

[Lylio]

I apologise for my lack of understanding here, but could you explain where I went wrong. Developing locally, I had the images in src > images.

The images are referenced in a file called data.js which has an array of config data which is translated into what you see on the website, i.e.:

export const projectsData = [
{
id: nanoid(),
img: 'lyle-03.png',
title: 'Lyle Christine',
info: 'Glasgow-based musician. Patience of a toddler. Radioactive levels of cynicism.',
info2:
"Currently working on album number 10. Click below to listen to 'Funraiser', released" +
' earlier in 2020.',
url: 'https://www.lylechristine.com',
repo: 'https://lylechristine.com/albums/funraiser/',
},

I then used the gatsby build command, and uploaded everything from my local public folder to my hosting provider. As I say, I'm a total new-comer to Gatsby, and this is an open-source React template which I've amended slightly (basically replacing some text and images) to produce the final result. The template I based it on is here:

https://github.com/cobidev/gatsby-simplefolio

Thanks again for having a look at this, I do appreciate your help.

[xaverfleer]

@Lylio I just noticed, you added a commit update images. Does it work for you, now?

Also: I built the site with Netlify. Seems to work well.

[Lylio]

On desktop, the images now load fine - slightly blurry effect at first, then they come into sharp focus once fully loaded. Looks good. On mobile however, the top 'Flaky Records' logo remains blurred, but the bottom two photos come into focus. So that's odd.

I think this is all clearly due to my inexperience with Gatsby, and I need to implement/learn 'gatsby-image'. I know using templates when unfamiliar with the technology of that template is a bit 'corner-cutting', but this website really is supposed to be very basic, and not taken seriously. However, I would like to fix the image issue on mobiles.

As I'm new to Gatsby, would trialling these instructions on gatsby-image potentially be a good troubleshooting direction: https://www.gatsbyjs.com/plugins/gatsby-image/#install

Thanks again for the feedback.

[xaverfleer]

On mobile however, the top 'Flaky Records' logo remains blurred,

right, I can reproduce this on your build but not on mine.

I guess the problem is in building/hosting, not in the repository.

[Lylio]

So do you part of the problem was the way I tried to create a 'production' package in order to upload to my hosting provider (HostGator). As I mentioned, I simply ran the gatsby build command and literally copied everything in the local public folder into my hosting folder named flakyrecords.com using the file manager section of HostGator's cpanel. Something about that feels a bit bone-headed, like, I should have used a more sophisticated deployment method.