Overriding the gatsby-plugin-image defaults

To create a consistent look and feel, you may have included the same props with many instances of the two image components. Keeping these image components updated can be a monotonous task if your site is image-heavy. Instead, you could configure the defaults within the options of gatsby-plugin-sharp:

{
      resolve: 'gatsby-plugin-sharp',
      options: {
        defaults: {
          formats: ['auto', 'webp'],
          placeholder: 'blurred'
          quality: 70
          breakpoints: [300…]
          backgroundColor: 'transparent'
          tracedSVGOptions: {}
          blurredOptions: {}
          jpgOptions: {}
          pngOptions: {}
          webpOptions: {}
          avifOptions: {}
        }
      }
    },

Let's look at each of these options in detail:

• formats: The file formats generated by the plugin.
• placeholder: Overrides the style of the temporary...