Better ResponsiveGraphic utility.

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import type { ContainerWidth } from '../@types/global';
+  import { getResponsiveSizes } from '../../utils/propValidators';
 
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
@@ -115,7 +116,7 @@
     aria-label="media"
     class="w-full flex flex-col relative"
   >
-    <img class="w-full my-0" {src} {srcset} alt={altText} loading={lazy ? 'lazy' : 'eager'} />
+    <img class="w-full my-0" {src} {srcset} sizes={getResponsiveSizes(width)} alt={altText} loading={lazy ? 'lazy' : 'eager'} />
     {#if caption}
       <PaddingReset containerIsFluid={width === 'fluid'}>
         <Block width={textWidth} class="notes w-full fmy-0">

src/pages/stories/one/index.astro

@@ -14,12 +14,11 @@ import AiMap1 from './ai-scroller-1.svelte';
 import AiMap2 from './ai-scroller-2.svelte';
 import AiMap3 from './ai-scroller-3.svelte';
 
-//photos
+// Import graphics.
 import photoOne from './Photo-4439.jpg';
 
-// Await the optimized response. (You may need to cast it or update getResponsiveGraphic's type to accept ImageMetadata)
+// Await the optimized graphics.
 const optimizedPhotoOne = await getResponsiveGraphic(photoOne as any);
-
 const photos = { 
   'Photo-4439.jpg': {
     src: optimizedPhotoOne.src,

src/pages/stories/one/story.aml

@@ -2,7 +2,7 @@
 [blocks]
 
 type: photo
-width: normal
+width: wide
 src: Photo-4439.jpg
 altText: Boom
 caption: Peerless

src/utils/graphics/ResponsiveGraphic.ts

@@ -4,6 +4,6 @@ export async function getResponsiveGraphic(src: ImageMetadata, format = 'jpeg')
   return await getImage({
     src,
     format,
-    widths: [330, 510, 660, 930, 1200, 1600], 
+    widths: [330, 510, 660, 930, 1200, 1600, 2000], 
   });
 }

src/utils/propValidators/index.ts

@@ -1,3 +1,5 @@
+import type { ContainerWidth } from '../../components/@types/global';
+
 /**
  * Coeerce a string to a valid container width.
  *
@@ -15,12 +17,36 @@ export const containerWidth = (width: string) => {
     case 'wider':
     case 'widest':
     case 'fluid':
-      return width;
+      return width as ContainerWidth;
     default:
-      return 'normal'; // Default value if invalid
+      return 'normal' as ContainerWidth; // Default value if invalid
   }
 };
 
+/**
+ * Container widths converted to pixels for `sizes` attributes
+ */
+export const containerWidths: Record<ContainerWidth, number> = {
+  narrower: 330,
+  narrow: 510,
+  normal: 660,
+  wide: 930,
+  wider: 1200,
+  widest: 100, // Used to trigger 100vw
+  fluid: 100 // Used to trigger 100vw
+};
+
+/**
+ * Helper to generate an HTML sizes attribute string based on a ContainerWidth
+ * @param width The container width
+ * @returns An HTML sizes attribute string
+ */
+export const getResponsiveSizes = (width: ContainerWidth): string => {
+  return width === 'widest' || width === 'fluid'
+    ? '100vw'
+    : `(max-width: ${containerWidths[width]}px) 100vw, ${containerWidths[width]}px`;
+};
+
 /**
  * Validate inline ad number prop
  * @param n string