Add avif format support to gatsby remark images package

[AlexRAV]

Description

Improvement of gatsby remark images package to support AVIF image format.

Documentation

Feature description added to Readme.md

Related Issues

#28894

[KyleAMathews]

shouldn't there be an avif image here?

[AlexRAV]

No, it's okay, because jest mocked fluid function here.

gatsby/packages/gatsby-remark-images/src/__tests__/index.js

Lines 7 to 17 in 46606d3

	fluid({ file, args }) {
	return Promise.resolve({
	aspectRatio: 0.75,
	presentationWidth: 300,
	originalImg: file.absolutePath,
	src: file.absolutePath,
	srcSet: `${file.absolutePath}, ${file.absolutePath}`,
	sizes: `(max-width: ${args.maxWidth}px) 100vw, ${args.maxWidth}px`,
	base64: `data:image/png;base64,iVBORw`,
	})
	},

This function just returns the string with absolute paths in it as srcSet, without format transform.

[KyleAMathews]

Tested locally & works great. Thanks!

[gupta-ji6]

Hi @AlexRAV @LekoArts, gatsby develop still shows this warning with withAvif option enabled.

Config

{
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 900,
              showCaptions: true,
              markdownCaptions: true,
              linkImagesToOriginal: false,
              quality: 90,
              // tracedSVG: { color: config.greenColor },
              wrapperStyle: `border-radius: 3px; margin: 10px 0; text-align: center;`,
              backgroundColor: 'transparent',
              withWebp: true,
              withAvif: true,
            },
}

Version

    "gatsby": "2.30.3",
    "gatsby-plugin-sharp": "2.13.2",
    "gatsby-remark-images": "3.10.0",
    "gatsby-transformer-remark": "2.3.8",
    "gatsby-transformer-sharp": "2.1.18",

[abarisain]

I think that the schema hasn't been updated https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/gatsby-node.js#L51

[gupta-ji6]

I think that the schema hasn't been updated https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/gatsby-node.js#L51

I see 👀.

Happy to make a PR for the official docs if this is the case.