[gatsby-remark-copy-linked-files] Adding support for <source>

[HarshilShah]

The way to set up dark mode images using pure HTML is using a combination of the <picture> and <source> tags, like so (via CSS Tricks):

<picture>
   <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)">
   <img src="photo-light.png">
</picture>

As far as I can tell, this is the only pure HTML (and thus compatible with RSS, reader mode, etc.) way to deliver dark mode images, as well as other responsive images generic over any other media queries. Currently (as of v2.6.0), gatsby-remark-copy-linked-files ignores the source tag, copying over only the img src, and the resulting HTML looks like this:

<picture>
   <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)">
   <img src=“/<hash>/photo-light.png">
</picture>

It would be nice to have support for <source> tags added to the package to enable this use case.

[HarshilShah]

Not sure if this deserves a separate issue, but I also just noticed that while the pixel density srcset works with Gatsby by default, it isn’t handled by this plugin.

The following JSX is correctly processed:

<img
   srcSet={`${image} 1x, ${image2x} 2x, ${image3x} 3x`}
   src={image}
/>

but the HTML/markdown variant isn’t handled by gatsby-remark-copy-linked-files:

<img
   srcset="image.png 1x, image2x.png 2x, image3x.png 3x"
   src=“image.png"
/>

Interestingly, the image.png 1x reference is correctly parsed, because it is present as part of the src too I’d guess.

[KyleAMathews]

These would be great to fix! Would you be interested in adding a PR?

[HarshilShah]

I’m gonna try to give it a shot! That said, I’m not really, uh, good, at JS, so I wouldn’t rate my odds high