Adding image decoding (#642)

Shopify · Mar 13, 2023 · ead686e · ead686e
1 parent 1421108
commit ead686e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/lazy-books-attend.md b/.changeset/lazy-books-attend.md
@@ -0,0 +1,5 @@
+---
+'@shopify/create-hydrogen': patch
+---
+
+Adding decoding prop to the SpreadMedia component
diff --git a/templates/demo-store/app/components/Hero.tsx b/templates/demo-store/app/components/Hero.tsx
@@ -88,6 +88,7 @@ export function Hero({
 interface SpreadMediaProps {
   data: Media | MediaImage | MediaVideo;
   loading?: HTMLImageElement['loading'];
+  decoding?: HTMLImageElement['decoding'];
   scale?: 2 | 3;
   sizes: string;
   width: number;
@@ -97,6 +98,7 @@ interface SpreadMediaProps {
 function SpreadMedia({
   data,
   loading,
+  decoding,
   scale,
   sizes,
   width,
@@ -118,6 +120,7 @@ function SpreadMedia({
         },
         image: {
           loading,
+          decoding,
           loaderOptions: {scale, crop: 'center'},
           widths,
           sizes,

diff --git a/templates/demo-store/app/lib/placeholders.ts b/templates/demo-store/app/lib/placeholders.ts
@@ -44,6 +44,7 @@ const PLACEHOLDERS = {
       },
       height: 'full',
       top: true,
+      decoding: 'sync',
       loading: 'eager',
     },
     // secondaryHero