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...