GIFs failed to load

Developing with Prismic
1

Hello. I am having problems with running Gatsby locally because the build keeps failing with the following message:

Error: Failed to download https://images.prismic.io/float-com/c0c10492-9692-468b-abac-e0577a8337a6_gif-create-project-phase.gif after 3 attempts

I had a look into this, but I need to keep downloading the images at build time.

Can someone help me understanding what's happening and how we can solve this?

Thanks.

2

Hi @fabio, I'm to happy to explain what's happening in the background and why this might be happening.

This appears when gatsby-source-filesystem reaches its download time limit. The time limit is being reached most likely because Imgix is applying transformations to your GIF, which can take a long time. Other images like JPEGs and PNGs are much easier and quicker to transform.

How can this be avoided

There isn't an easy way to automatically avoid this, but you can try something on a per-image basis. First, disable image downloading with the following plugin option:

{
  resolve: 'gatsby-source-prismic',
  options: {
    shouldDownloadImage: () => false
  }
}

Then start your development server. Once it's started, open GraphiQL at http://localhost:8000/__graphql. Run the same query you have in your page that asks for the localFile.childImageSharp field, but replace localFile.childImageSharp with url. This will give you the URL being downloaded by gatsby-source-filesystem.

For example, your query may look like the following:

  query {
    prismicPage {
      data {
        my_image_field {
-         localFile {
-           childImageSharp {
-             fluid {
-               ...GatsbyImageFluid
-             }
-           }
-         }
+         url
        }
      }
    }
  }

Open the URL in your browser. It may take a 10-15 seconds for it to load.

Once it loads, re-enable image downloading and start your development server again.

{
  resolve: 'gatsby-source-prismic',
  options: {
    shouldDownloadImage: () => true
  }
}

Because you requested the GIF in your browser, it is now cached in Imgix's servers and shouldn't require the lengthy re-transforming again.

Alternate solution

You can use a video (e.g. MP4) rather than a GIF. MP4s can be compressed much more than a GIF and will not be subject to the same Imgix optimizations.

If this does not resolve your issue, please let me know and we can try to figure out a different solution. Ultimately, I would recommend using an MP4 over a GIF for the file you posted.

Thanks!

1 Like