Add ResponsiveGraphic utility function to better interface with Astro.

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -11,6 +11,10 @@
      * Photo source
      */
     src: string;
+    /**
+     * Photo srcset for responsive images
+     */
+    srcset?: string;
     /**
      * Photo altText
      */
@@ -63,6 +67,7 @@
 
   let {
     src,
+    srcset,
     altText,
     id = '',
     class: cls = '',
@@ -107,15 +112,10 @@
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
-    bind:this={container}
     aria-label="media"
     class="w-full flex flex-col relative"
   >
-    {#if !lazy || (intersectable && intersecting)}
+    <img class="w-full my-0" {src} {srcset} alt={altText} loading={lazy ? 'lazy' : 'eager'} />
-      <img class="w-full my-0" {src} alt={altText} />
-    {:else}
-      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
-    {/if}
     {#if caption}
       <PaddingReset containerIsFluid={width === 'fluid'}>
         <Block width={textWidth} class="notes w-full fmy-0">

src/lib/Parse.svelte

@@ -103,7 +103,8 @@
     {:else if block.type === 'photo'}
       <FeaturePhoto
         width={block.width}
-        src={photos[block.src] ?? block.src}
+        src={typeof photos[block.src] === 'object' ? photos[block.src].src : (photos[block.src] ?? block.src)}
+        srcset={typeof photos[block.src] === 'object' ? photos[block.src].srcset : undefined}
         altText={block.altText}
         caption={block.caption}
       />

src/pages/stories/one/index.astro

@@ -4,6 +4,7 @@ import Layout from '../../../layouts/Layout.astro';
 import Parse from '@lib/Parse.svelte';
 import { parse } from '@rferl/veronica';
 import ArchieML from './story.aml?raw';
+import { getResponsiveGraphic} from '@utils/graphics/ResponsiveGraphic'
 
 
 const content = parse(ArchieML);
@@ -14,9 +15,17 @@ import AiMap2 from './ai-scroller-2.svelte';
 import AiMap3 from './ai-scroller-3.svelte';
 
 //photos
-import { getImage } from "astro:assets";
 import photoOne from './Photo-4439.jpg';
-const photos = { 'Photo-4439.jpg': photoOne.src };
+
+// Await the optimized response. (You may need to cast it or update getResponsiveGraphic's type to accept ImageMetadata)
+const optimizedPhotoOne = await getResponsiveGraphic(photoOne as any);
+
+const photos = { 
+  'Photo-4439.jpg': {
+    src: optimizedPhotoOne.src,
+    srcset: optimizedPhotoOne.srcSet?.attribute
+  }
+};
 
 // ai2svelte foreground
 import AiForeground from './ai-foreground.svelte';

src/utils/graphics/ResponsiveGraphic.astro

@@ -1,30 +0,0 @@
----
-import type { ImageMetadata } from "astro";
-import { getImage } from "astro:assets";
-
-interface Props {
-    width: string | ImageMetadata;
-}
-
-const { width } = Astro.props;
-
-const mobileImg = await getImage({
-    src: mobileImgUrl,
-    format: "webp",
-    width: 200,
-    height: 200,
-});
-
-const desktopImg = await getImage({
-    src: desktopImgUrl,
-    format: "webp",
-    width: 800,
-    height: 200,
-});
----
-
-<picture>
-    <source media="(max-width: 799px)" srcset={mobileImg.src} />
-    <source media="(min-width: 800px)" srcset={desktopImg.src} />
-    <img src={desktopImg.src} alt={alt} />
-</picture>

src/utils/graphics/ResponsiveGraphic.ts

@@ -0,0 +1,9 @@
+import { getImage } from "astro:assets";
+
+export async function getResponsiveGraphic(src: ImageMetadata, format = 'jpeg') {
+  return await getImage({
+    src,
+    format,
+    widths: [330, 510, 660, 930, 1200, 1600], 
+  });
+}