refactor: use auto sizes with Directus

apps/website/src/components/atoms/Image.svelte

@@ -5,82 +5,51 @@
     export let id: string = undefined
     export let sizeKey: string = undefined
     export let sizes: Sizes = undefined
-    export let width: number = sizes && sizes.medium && sizes.medium.width
-    export let height: number = sizes && sizes.medium && sizes.medium.height
+    export let width: number = sizes?.medium?.width
+    export let height: number = sizes?.medium?.height
     export let ratio: number = undefined
     export let alt: string
     export let lazy = true
     export let decoding: 'auto' | 'sync' | 'async' = 'auto'
 
     interface Sizes {
-        small?: { width?: number, height?: number }
-        medium?: { width?: number, height?: number }
-        large?: { width?: number, height?: number }
+        small?: { width?: number; height?: number }
+        medium?: { width?: number; height?: number }
+        large?: { width?: number; height?: number }
     }
 
-    let srcSet = { webp: [], jpg: [] }
-
-
-    /**
-     * Define height from origin ratio if not defined
-     */
-    const setHeightFromRatio = (w: number, r: number = ratio) => {
-        return Math.round(w / r)
-    }
+    const setHeightFromRatio = (w: number, r: number = ratio) => Math.round(w / r)
 
     if (ratio && !height) {
-        // Set height from width using ratio
         height = setHeightFromRatio(width)
-
-        // Add height to all sizes
         if (sizes) {
-            Object.entries(sizes).forEach(size => {
-                const [key, value]: [string, { width?: number, height?: number }] = size
+            for (const [key, value] of Object.entries(sizes)) {
                 sizes[key].height = setHeightFromRatio(value.width)
-            })
+            }
         }
     }
 
-
-    /**
-     * Image attributes
-     */
-    $: imgWidth = sizes && sizes.small ? sizes.small.width : width
-    $: imgHeight = sizes && sizes.small ? sizes.small.height : height
-    $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
-    $: srcSet = {
-        // WebP
-        webp: sizes
-            ? [
-                `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
-                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
-                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
-            ]
-            : [getAssetUrlKey(id, `${sizeKey}-webp`)],
-        // JPG
-        jpg: sizes
-            ? [
-                `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
-                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
-                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
-            ]
-            : [getAssetUrlKey(id, `${sizeKey}-jpg`)]
-    }
+    $: imgWidth = sizes?.small?.width || width
+    $: imgHeight = sizes?.small?.height || height
+    $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small`) : src
+    $: srcSet = sizes
+        ? [
+            `${getAssetUrlKey(id, `${sizeKey}-small`)} 345w`,
+            sizes.medium && `${getAssetUrlKey(id, `${sizeKey}-medium`)} 768w`,
+            sizes.large && `${getAssetUrlKey(id, `${sizeKey}-large`)} 1280w`,
+        ]
+        : [getAssetUrlKey(id, sizeKey)]
 </script>
 
 <picture class={$$props.class}>
-    <source
-        type="image/webp"
-        srcset={srcSet.webp.join(', ').trim()}
-    >
     <img
         src={imgSrc}
-        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : null}
-        srcset={srcSet.jpg.join(', ').trim()}
+        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : undefined}
+        srcset={srcSet.join(', ')}
         width={imgWidth}
         height={imgHeight}
         {alt}
         loading={lazy ? 'lazy' : undefined}
         {decoding}
     />
-</picture>
+</picture>

apps/website/src/routes/(site)/about/+page.svelte

@@ -221,7 +221,7 @@
                     {about.intro_firstphoto_caption}<br>
                     in
                     <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
-                        <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
+                        <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
                         <span>Naarm Australia (Melbourne)</span>
                     </a>
                 </figcaption>

apps/website/src/routes/(site)/feed/products.xml/+server.ts

@@ -47,7 +47,7 @@ export const GET = async ({ url, setHeaders }) => {
                     slug: siteProduct.location.slug,
                     description: siteProduct.description,
                     price: product.price,
-                    images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large-jpg`)),
+                    images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large`)),
                     gCategory: category.value,
                     gType: category.type,
                 })