feat(image-jsx): change the jsx output so that it uses <picture> inst…

…ead of <img>

packages/qwik-city/buildtime/vite/image-jsx.ts

@@ -1,4 +1,4 @@
-import type { OutputFormat } from 'vite-imagetools';
+import type { OutputFormat, ImageMetadata } from 'vite-imagetools';
 import type { PluginOption } from 'vite';
 import { optimize } from 'svgo';
 import fs from 'node:fs';
@@ -7,6 +7,14 @@ import { parseId } from '../../../qwik/src/optimizer/src/plugins/plugin';
 import type { QwikCityVitePluginOptions } from './types';
 import type { Config as SVGOConfig } from 'svgo';
 
+/** Normalizes the format for use in mime-type */
+const getFormat = (m: ImageMetadata) => {
+  if (!m.format) {
+    throw new Error(`Could not determine image format`);
+  }
+  return m.format.replace('jpg', 'jpeg');
+};
+
 /** @public */
 export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[] {
   const supportedExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.avif', '.tiff'];
@@ -17,22 +25,51 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
           exclude: [],
           extendOutputFormats(builtins) {
             const jsx: OutputFormat = () => (metadatas) => {
-              const srcSet = metadatas.map((meta) => `${meta.src} ${meta.width}w`).join(', ');
-              let largestImage: any;
-              let largestImageSize = 0;
+              const fallbackFormat = [...new Set(metadatas.map((m) => getFormat(m)))].pop();
+
+              let largestFallback;
+              let largestFallbackSize = 0;
+              let fallbackFormatCount = 0;
+              for (let i = 0; i < metadatas.length; i++) {
+                const m = metadatas[i];
+                if (getFormat(m) === fallbackFormat) {
+                  fallbackFormatCount++;
+                  if ((m.width as number) > largestFallbackSize) {
+                    largestFallback = m;
+                    largestFallbackSize = m.width as number;
+                  }
+                }
+              }
+
+              const sourceMetadatas: Record<string, ImageMetadata[]> = {};
               for (let i = 0; i < metadatas.length; i++) {
-                const m = metadatas[i] as any;
-                if (m.width > largestImageSize) {
-                  largestImage = m;
-                  largestImageSize = m.width;
+                const m = metadatas[i];
+                const f = getFormat(m);
+                // we don't need to create a source tag for the fallback format if there is
+                // only a single image in that format
+                if (f === fallbackFormat && fallbackFormatCount < 2) {
+                  continue;
                 }
+                if (sourceMetadatas[f]) {
+                  sourceMetadatas[f].push(m);
+                } else {
+                  sourceMetadatas[f] = [m];
+                }
+              }
+              const sources: Record<string, string>[] = [];
+              for (const [key, value] of Object.entries(sourceMetadatas)) {
+                sources.push({
+                  srcSet: value.map((meta) => `${meta.src} ${meta.width}w`).join(', '),
+                  type: `image/${key}`,
+                });
               }
               return {
-                srcSet,
-                width:
-                  largestImage === null || largestImage === void 0 ? void 0 : largestImage.width,
-                height:
-                  largestImage === null || largestImage === void 0 ? void 0 : largestImage.height,
+                sources,
+                img: {
+                  src: largestFallback?.src as string,
+                  width: largestFallback?.width as number,
+                  height: largestFallback?.height as number,
+                },
               };
             };
             return {
@@ -50,7 +87,7 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
                 withoutEnlargement: '',
                 ...userOpts?.imageOptimization?.jsxDirectives,
                 ...params,
-                as: 'jsx',
+                as: 'picture',
               });
             }
             return new URLSearchParams();
@@ -84,17 +121,20 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
           const extension = path.extname(pathId).toLowerCase();
 
           if (supportedExtensions.includes(extension)) {
-            if (!code.includes('srcSet')) {
+            if (!code.includes('sources')) {
               this.error(`Image '${id}' could not be optimized to JSX`);
             }
             const index = code.indexOf('export default');
             return (
               code.slice(0, index) +
               `
   import { _jsxQ } from '@builder.io/qwik';
-  const PROPS = {srcSet, width, height};
+  const PROPS = {...img};
   export default function (props, key, _, dev) {
-    return _jsxQ('img', {...{decoding: 'async', loading: 'lazy'}, ...props}, PROPS, undefined, 3, key, dev);
+    return _jsxQ('picture', null, null,
+      [...sources?.map((source) => _jsxQ('source', {...source}, null, undefined, 3, key, dev)),
+      _jsxQ('img', {...{decoding: 'async', loading: 'lazy'}, ...props}, PROPS, undefined, 3, key, dev)]
+    );
   }`
             );
           } else if (extension === '.svg') {