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!