Netlify Image CDN not working (Gatsby + Wordpress)

Netlify Image CDN not working for my website even if I did everything according to instructions. Any help is appreciated because my website has ±1k images and builds takes ages now.

My netlify site name: sprightly-gingersnap-e7d049
Website address: www.ramioda.lt
Wordpress grapql address: https://simple.tamulaitis.com/
Gatsby version: 4.25.8
gatsby-source-wordpress version: 6.25.5

Netlify toml file:

[[plugins]]
package = "@netlify/plugin-gatsby"

[build.environment]
NETLIFY_IMAGE_CDN = "true"

[images]
remote_images = [
  "https://simple.tamulaitis.com/.*"
]

NETLIFY_IMAGE_CDN = “true” also added to Site Configuration settings inside Netlify’s dashboard and .env file.

Anyway images are still served like this:

Thank you in advance for any help.

This doesn’t appear to be a case of Image CDN not working, but more a case of Image CDN never being used. Gatsby (when used and configured correctly), should procuce the Image CDN-backed URLs. But, in your case it looks like Gatsby it doing the processing itself. This is evident as per the log lines: Deploy details | Deploys | sprightly-gingersnap-e7d049 | Netlify

Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs

In case of Image CDN being used, Gatsby should have logged:

Running gatsby.IMAGE_CDN jobs

This would be either a case of misconfiguration in Gatsby or the Wordpress plugin. Unfortunately, I don’t have a Wordpress installation anywhere to check this myself.

Thank you for your response. I have other Netlify project, where urls already starts with /_gatsby/images and on local build it runs gatsby.IMAGE_CDN jobs, but when building in Netlify - these jobs are not running and deployed images stays with /_gatsby/images/... urls.

Information:
Netlfy site name: gorgeous-concha-c9db5b
Url: https://eramoderna.lt
Wordpress grapql url: https://eramoderna.tamulaitis.com/
Gatsby version: 5.8.1

Netlify toml file:

[build.environment]
NETLIFY_IMAGE_CDN = "true"

[images]
remote_images = [
  "https://simple.tamulaitis.com/.*"
]

NETLIFY_IMAGE_CDN = “true” added to Site Configuration settings inside Netlify’s dashboard.

Gatsby source wordpress config on gatsby.config file:

 {
      resolve: 'gatsby-source-wordpress',
      options: {
        url: 'https://eramoderna.tamulaitis.com/graphql',
        develop: {
          hardCacheMediaFiles: true,
        },
        schema: {
          timeout: 30000000,
          perPage: 10,
          requestConcurrency: 3,
          previewRequestConcurrency: 2,
        },
        type: {
          MediaItem: {
            createFileNodes: false,
          },
        },
      },
    },

What I am missing from this configuration?

Hey there! We’re still digging into this a bit more on our end, but there’s one bit in your setup I’d recommend adjusting as a next step. In your config above, you specify the remote image URL in your toml file as https://simple.tamulaitis.com/.*, when based on the Gatsby WP Image CDN docs you’d want:

the url option for the gatsby-source-wordpress plugin in your gatsby-config file.

Which based on the above should be https://eramoderna.tamulaitis.com/*. Can you adjust that when you have a chance and let us know whether it makes a difference?

Plz make sure that the Netlify configuration is correctly set up. And check that NETLIFY_IMAGE_CDN = "true" is added to your netlify.toml file under the [build.environment] section and that the remote image pattern is correctly specified under [images].

And ensure there are no syntax errors in the netlify.toml file. If the issue persists, try clearing your build cache and redeploying your site on Netlify.

Thank you for your work and response.

Anyway, my netlify.toml file was correct (I just pasted the wrong url in this forum as I had two projects opened (both projects has the same problem)):

[build.environment]
NETLIFY_IMAGE_CDN = "true"

[images]
remote_images = [
  "https://eramoderna.tamulaitis.com/.*"
]

Still in production, nothing changed (just cleaned the cache and redeployed): https://eramoderna.lt/

I really appreciate your help.

What Netlify configuration you have in mind? I added Environment variable and adjusted netlify.toml file according to: netlify-plugin-gatsby/docs/image-cdn.md at main · netlify/netlify-plugin-gatsby · GitHub

I also have installed gastby-plugin-netlify this should be enought as per documentation, because Gatsby Essential plugin is installed automatically.

If it helps, I also add my dependencies:

"dependencies": {
    "@browniebroke/gatsby-image-gallery": "^8.2.0",
    "@stylelint/postcss-css-in-js": "^0.38.0",
    "babel-plugin-styled-components": "^2.0.7",
    "gatsby": "^5.8.1",
    "gatsby-plugin-google-fonts-v2": "^1.0.1",
    "gatsby-plugin-google-tagmanager": "^5.13.1",
    "gatsby-plugin-image": "^3.8.0",
    "gatsby-plugin-manifest": "^5.10.0",
    "gatsby-plugin-netlify": "^5.1.1",
    "gatsby-plugin-react-i18next": "^3.0.1",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-root-import": "^2.0.9",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-plugin-styled-components": "^6.8.0",
    "gatsby-plugin-yoast-sitemap": "^0.0.2",
    "gatsby-source-filesystem": "^5.10.0",
    "gatsby-source-wordpress": "^7.8.0",
    "gatsby-transformer-sharp": "^5.13.1",
    "i18next": "^22.5.0",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.3.1",
    "sharp": "^0.32.0",
    "styled-components": "^5.3.9",
    "stylelint": "^15.3.0",
    "swiper": "^9.3.2"
  },

Maybe some of them conflicts?

Ah, thanks for following up and confirming! Apart from that change your configuration looks to be correct. If I could ask for one last bit of info, would you be able to provide your current WPGatsby and WPGraphQL versions? We’re still working on replicating this issue and that will ensure our test environment matches as closely as possible. Thanks again!

All plugins are here:

Also adding my gatsby.config file:

const path = require('path');

const gatsbyRequiredRules = path.join(
  process.cwd(),
  'node_modules',
  'gatsby',
  'dist',
  'utils',
  'eslint-rules'
);

module.exports = {
  siteMetadata: {
    title: 'x',
    description: 'x',
    image: `/logo.png`,
    siteUrl: `https://eramoderna.lt`,
  },
  plugins: [
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        url: 'https://eramoderna.tamulaitis.com/graphql',
        develop: {
          hardCacheMediaFiles: true,
        },
        schema: {
          timeout: 30000000,
          perPage: 10,
          requestConcurrency: 3,
          previewRequestConcurrency: 2,
        },
        type: {
          MediaItem: {
            createFileNodes: false,
          },
        },
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-typescript',
    'gatsby-plugin-netlify',
    {
      resolve: 'gatsby-plugin-eslint',
      options: {
        rulePaths: [gatsbyRequiredRules],
      },
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /icons/,
        },
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
      },
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: `src/assets/images/favicon.png`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts-v2`,
      options: {
        fonts: [
          {
            family: 'Poppins',
            weights: ['400', '600', '700'],
          },
          {
            family: 'Rubik',
            weights: ['400', '600'],
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `src/locales`,
        name: `locale`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        localeJsonSourceName: `locale`,
        languages: [`lt`, `en`],
        defaultLanguage: `lt`,
        i18nextOptions: {
          keySeparator: false,
          nsSeparator: false,
        },
        redirect: false,
        // generateDefaultLanguagePage: true,
      },
    },
    {
      resolve: `gatsby-plugin-yoast-sitemap`,
      options: {
        baseUrl: 'https://eramoderna.tamulaitis.com/',
        gatsbyUrl: 'https://eramoderna.lt',
      },
    },
    {
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: 'XXX',
      },
    },
  ],
};

Thank you, guys for the effort!

thanks again for providing this info! I’ve escalated this internally so our Frameworks team can take a closer look at why these Image CDN URLs might not be getting generated.

We’ll be sure to follow up again here as soon as we have the next steps; in the meantime, can you let me know if this issue is replicable when using an adapter version of Gatsby?

Thank you for your efforts. Unfotunately problem still exists.

I just updated the project to the newest gatsby and installed gatsby-adapter-netlify, but problem persists:

Project’s Netlify name: sprightly-gingersnap-e7d049
Url: https://ramioda.lt

package.json file dependencies:

"scripts": {
    "develop": "GATSBY_CONCURRENT_DOWNLOAD=5 gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "lint": "eslint . --ext .ts,.tsx",
    "lint-fix": "eslint . --ext .ts,.tsx --fix",
    "lint:style": "stylelint ./src/**/*.{ts,tsx,js,jsx}",
    "lint:style-fix": "stylelint ./src/**/*.{ts,tsx,js,jsx} --fix",
    "lint:all": "eslint . --ext .ts,.tsx && stylelint ./src/**/*.{ts,tsx,js,jsx}",
    "start": "npm run develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "prepare": "husky install"
  },
  "dependencies": {
    "@apollo/client": "^3.10.4",
    "@stripe/react-stripe-js": "^2.7.1",
    "@stripe/stripe-js": "^2.4.0",
    "@wordpress/block-library": "^8.35.0",
    "algoliasearch": "^4.23.3",
    "cross-fetch": "^4.0.0",
    "dotenv": "^16.4.5",
    "gatsby": "^5.13.6",
    "gatsby-adapter-netlify": "^1.1.6",
    "gatsby-plugin-algolia": "^1.0.3",
    "gatsby-plugin-facebook-pixel": "^1.0.8",
    "gatsby-plugin-google-tagmanager": "^5.13.1",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-mailchimp": "^5.2.2",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-plugin-sitemap": "^6.13.1",
    "gatsby-plugin-styled-components": "^6.13.1",
    "gatsby-plugin-tawk.to": "^1.0.8",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-source-instagram-all": "^5.2.4",
    "gatsby-source-wordpress": "^7.13.4",
    "gatsby-transformer-sharp": "^5.13.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-instantsearch": "^7.10.0",
    "sanitize.css": "^13.0.0",
    "sharp": "^0.33.4",
    "stripe": "^14.25.0",
    "styled-components": "^5.3.11",
    "stylelint": "^14.16.1",
    "swiper": "^9.4.1"
  },
  "devDependencies": {
    "@stylelint/postcss-css-in-js": "^0.38.0",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.34.2",
    "gatsby-plugin-eslint": "^4.0.4",
    "gatsby-plugin-root-import": "^2.0.9",
    "husky": "^7.0.4",
    "prettier": "^2.8.8",
    "stylelint-config-prettier": "^9.0.4",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-order": "^5.0.0",
    "typescript": "^4.9.5"
  }

netlify.toml file:

[build.environment]
NETLIFY_IMAGE_CDN = "true"

[images]
remote_images = [
  "https://simple.tamulaitis.com/.*"
]

[dev]
  command = "npm run start"
  targetPort = 8000
  port = 8888

gatsby-config:

const path = require('path');
const adapter = require("gatsby-adapter-netlify").default

require('dotenv').config();

const gatsbyRequiredRules = path.join(
  process.cwd(),
  'node_modules',
  'gatsby',
  'dist',
  'utils',
  'eslint-rules'
);

module.exports = {
  adapter: adapter({
      excludeDatastoreFromEngineFunction: false,
      imageCDN: true,
    }),
  siteMetadata: {
    title: `x`,
    description: `x`,
    author: `x`,
    siteUrl: `https://ramioda.lt`,
    image: '/logo-og.jpg'
  },
  plugins: [
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        url: 'https://simple.tamulaitis.com/graphql',
        develop: {
          hardCacheMediaFiles: true,
          hardCacheData: true,
        },
        html: {
          createStaticFiles: false,
        },
        schema: {
          requestConcurrency: 3,
          perPage: 10,
          timeout: 30000000,
        },
        type: {
          MediaItem: {
            excludeFieldNames: [
              'contentNodes',
              'seo',
              'ancestors',
              'author',
              'template',
              'lastEditedBy',
              'authorDatabaseId',
              'authorId',
              'contentTypeName',
              'dateGmt',
              'desiredSlug',
              'enclosure',
              'isContentNode',
              'isTermNode',
              'modified',
              'modifiedGmt',
              'parentDatabaseId',
              'parentId',
              'srcSet',
              'parent',
              'children',
            ],
            createFileNodes: false,
          },
        },
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-typescript',
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        query: `
        {
          allSitePage {
            nodes {
              path
            }
          }
          site {
            siteMetadata {
              siteUrl
            }
          }
          allWpContentNode(filter: {nodeType: {in: ["Post", "Page", "SimpleProduct"]}}) {
            nodes {
              ... on WpPost {
                uri
                modifiedGmt
              }
              ... on WpPage {
                uri
                modifiedGmt
              }
              ... on WpSimpleProduct {
                uri
                modifiedGmt
              }
            }
          }
        }
      `,
        resolvePages: ({
          allSitePage: { nodes: allPages },
          allWpContentNode: { nodes: allWpNodes },
        }) => {
          const wpNodeMap = allWpNodes.reduce((acc, node) => {
            const { uri } = node;
            acc[uri] = node;

            return acc;
          }, {});

          return allPages.map(page => {
            return { ...page, ...wpNodeMap[page.path] };
          });
        },
        serialize: ({ path, modifiedGmt }) => {
          return {
            url: path,
            lastmod: modifiedGmt,
            priority: 1,
          };
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: 'gatsby-plugin-eslint',
      options: {
        rulePaths: [gatsbyRequiredRules],
      },
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /icons/,
        },
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: path.join(__dirname, 'src'),
      },
    },
    {
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: 'x',
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Rami oda`,
        short_name: `Rami oda`,
        start_url: `/`,
        background_color: `#F8F6F3`,
        theme_color: `#F8F6F3`,
        display: `minimal-ui`,
        icon: `src/assets/images/favicon.png`,
      },
    },
    {
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint:
          'x',
        timeout: 3500,
      },
    },
    {
      resolve: `gatsby-source-instagram-all`,
      options: {
        access_token: process.env.INSTAGRAM_ACCESS_TOKEN,
      },
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: 'x',
      },
    },
    {
      resolve: `gatsby-plugin-algolia`,
      options: {
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
        apiKey: process.env.ALGOLIA_ADMIN_KEY,
        queries: require('./src/utils/algolia/queries'),
      },
    },
    {
      resolve: `gatsby-plugin-tawk.to`,
      options: {
        tawkId: 'x',
        tawkKey: 'x',
      },
    },
  ],
};

UPDATE!!

With the configuration above it works. I had to update gatsby and netlify-adapters plugins to newest versions. Build time decreased from 70 minutes to 22. Thank you!

1 Like

Unfortunately there was only one lucky build on Netlify (local builds works fine) and now I keep getting error gatsby-source-wordpress Error: socket hang up :exploding_head:

Even if I configured gatsby-source-wordpress like this:

{
      resolve: 'gatsby-source-wordpress',
      options: {
        url: 'https://simple.tamulaitis.com/graphql',
        develop: {
          hardCacheMediaFiles: true,
        },
        production: {
          hardCacheMediaFiles: true,
        },
        html: {
          createStaticFiles: false,
        },
        schema: {
          requestConcurrency: 1,
          perPage: 1,
          timeout: 30000000,
        },
        type: {
          Coupon: {
            exclude: true,
          },
          Customer: {
            exclude: true,
          },
          Menu: {
            exclude: true,
          },
          MenuItem: {
            exclude: true,
          },
          Order: {
            exclude: true,
          },
          PostFormat: {
            exclude: true,
          },
          ProductTag: {
            exclude: true,
          },
          Refund: {
            exclude: true,
          },
          ShippingClass: {
            exclude: true,
          },
          TaxRate: {
            exclude: true,
          },
          UserRole: {
            exclude: true,
          },
          MediaItem: {
            localFile: {
              requestConcurrency: 1,
            },
            excludeFieldNames: [
              'contentNodes',
              'seo',
              'ancestors',
              'author',
              'template',
              'lastEditedBy',
              'authorDatabaseId',
              'authorId',
              'contentTypeName',
              'dateGmt',
              'desiredSlug',
              'enclosure',
              'isContentNode',
              'isTermNode',
              'modified',
              'modifiedGmt',
              'parentDatabaseId',
              'parentId',
              'srcSet',
              'parent',
              'children',
            ],
            createFileNodes: false,
          },
        },
      },

I’m so sick of gatsby and it’s random errors…

Also, what I noticed in build logs, that @netlify/plugin-gatsby is still loaded even if I deleted it from my project and now using adapters:

1:16:07 PM: ❯ Loading plugins
1:16:07 PM:    - @netlify/plugin-gatsby@3.8.1 from Netlify app

This is deploy log:

2:23:58 PM: success Execute page configs - 0.073s
2:23:58 PM: success Caching Webpack compilations - 0.000s
2:24:02 PM: error Unable to fetch:
2:24:02 PM: https://simple.tamulaitis.com/wp-content/uploads/2024/01/ALGOTHERM-ALGOSILHOUETTE-STANGRINANTIS-KREMAS-150-ML-187x300.jpg
2:24:02 PM: ---
2:24:02 PM: Reason: read ECONNRESET
2:24:02 PM: ---
2:24:02 PM: Fetch details:
2:24:02 PM: {
2:24:02 PM:   "attempt": 3,
2:24:02 PM:   "method": "GET",
2:24:02 PM:   "errorCode": "ECONNRESET",
2:24:02 PM:   "requestHeaders": {
2:24:02 PM:     "user-agent": "got (https://github.com/sindresorhus/got)",
2:24:02 PM:     "accept-encoding": "gzip, deflate, br"
2:24:02 PM:   }
2:24:02 PM: }
2:24:02 PM: ---
2:24:03 PM: 
2:24:03 PM: 
2:24:03 PM:   RequestError: read ECONNRESET
2:24:03 PM:   
2:24:03 PM:   - index.js:970 ClientRequest.<anonymous>
2:24:03 PM:     [repo]/[got]/dist/source/core/index.js:970:111
2:24:03 PM:   
2:24:03 PM:   - node:events:633 Object.onceWrapper
2:24:03 PM:     node:events:633:26
2:24:03 PM:   
2:24:03 PM:   - node:events:530 ClientRequest.emit
2:24:03 PM:     node:events:530:35
2:24:03 PM:   
2:24:03 PM:   - index.js:43 ClientRequest.origin.emit
2:24:03 PM:     [repo]/[@szmarczak]/http-timer/dist/source/index.js:43:20
2:24:03 PM:   
2:24:03 PM:   - node:_http_client:500 TLSSocket.socketErrorListener
2:24:03 PM:     node:_http_client:500:9
2:24:03 PM:   
2:24:03 PM:   - node:events:518 TLSSocket.emit
2:24:03 PM:     node:events:518:28
2:24:03 PM:   
2:24:03 PM:   - destroy:169 emitErrorNT
2:24:03 PM:     node:internal/streams/destroy:169:8
2:24:03 PM:   
2:24:03 PM:   - destroy:128 emitErrorCloseNT
2:24:03 PM:     node:internal/streams/destroy:128:3
2:24:03 PM:   
2:24:03 PM:   - task_queues:82 processTicksAndRejections
2:24:03 PM:     node:internal/process/task_queues:82:21
2:24:03 PM:   
2:24:03 PM:   - stream_base_commons:217 TLSWrap.onStreamRead
2:24:03 PM:     node:internal/stream_base_commons:217:20
2:24:03 PM:   
2:24:03 PM:   - async_hooks:130 TLSWrap.callbackTrampoline
2:24:03 PM:     node:internal/async_hooks:130:17
2:24:03 PM:   
2:24:03 PM: 
2:24:03 PM: error Unable to fetch:
2:24:03 PM: https://simple.tamulaitis.com/wp-content/uploads/2024/01/HubisLab-A.C-valomoji-veido-kauke-230-ml-187x300.jpg

Any ideas…?

The last post is a duplicate of: Builds stopped working on Netlify (gatsby-source-wordpress)