Generate gif as lowest priority source

[GHF]

I think I'm facing the same issue as #164, so 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"),
            }

When I run a gif through eleventy-img, I get this markup (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 particular image was not downsampled because it's pretty small, 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. Otherwise, the webp version is loaded.

I noticed that the test that this change breaks really tested for the Could not find the lowest <img> source for responsive markup for undefined logic. So I re-added a specific test for that to replace the gif-specific behavior test.

[zachleat]

Shipping with v3.1.9!

[zachleat]

Changed to v3.2.0