Generate gif as lowest priority source

[GHF]

Because I think I'm facing the same issue as #164, I updated @iamschulz's PR with tests and I'll respond to #164#issuecomment-1409449689 here:

My options are:

            {
                widths: [640, 1280, "auto"],
                formats: ["webp", "auto"],
                sharpOptions: {
                    animated: true
                },
                svgShortCircuit: true,
                outputDir: path.join(eleventyConfig.dir.output, "img"),
            }

The markup I got was this for a gif (line breaks added for readability):

<picture>
<source type="image/gif" srcset="/img/k5UePY7Ry5-500.gif 500w" sizes="100vw">
<img loading="lazy" decoding="async" alt="Alt" title="Title" src="/img/k5UePY7Ry5-500.webp" width="500" height="205">
</picture>

The problem is that this puts the gif <source> ahead of the webp <img> fallback, which causes the user agent to prefer the gif version. This image was not downsampled, so no webp <source> was produced, but when it is produced, the order looks like this:

1. gif <source>
2. webp <source>
3. webp <img>

I would prefer:

1. webp <source>
2. gif <source>
3. gif <img>

As this would allow browsers that don't support <picture> and browsers that don't support webp to both fall back on gif while preferring webp in all other cases.

I noticed that the test that this change break is really testing for the Could not find the lowest <img> source for responsive markup for undefined branch so I re-added a specific test for that to replace the gif-specific behavior test.

[GHF]

I renamed the branch for this from main to lowsrc. GitHub apparently tracks that as a PR closure and no longer allows changing the base branch of a PR, so I'll start a new PR.