add css image loading improvements

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -172,7 +172,6 @@ body.sf-body {
 
 img {
     max-width: 100%;
-    height: auto;
 }
 
 a {
@@ -866,10 +865,14 @@ a:hover {
 
 .sf-product-card__media-link {
     display: block;
+    aspect-ratio: 1;
+    background: var(--sf-surface-muted);
+    border-radius: var(--sf-radius-sm);
 }
 
 .sf-product-card__image {
     width: 100%;
+    height: 100%;
     aspect-ratio: 1;
     object-fit: cover;
     border-radius: var(--sf-radius-sm);
@@ -961,6 +964,7 @@ a:hover {
     width: 100%;
     height: auto;
     aspect-ratio: 1;
+    background: var(--sf-surface-muted);
 }
 
 .sf-variant-link--sm {
@@ -1054,6 +1058,7 @@ a:hover {
     object-fit: cover;
     border-radius: var(--sf-radius);
     border: 1px solid var(--sf-border);
+    background: var(--sf-surface-muted);
 }
 
 .sf-product-gallery__thumbs {
@@ -1069,6 +1074,7 @@ a:hover {
 }
 
 .sf-prose img {
+    height: auto;
     border-radius: var(--sf-radius-sm);
 }
 

backend/src/modules/storefrontCore/views/partials/cart-line-item.hbs

@@ -3,7 +3,13 @@
         <div class='sf-thumb'>
             <a href='/shop/products/{{productId}}/variants/{{id}}'>
                 {{#if thumbnailUrl}}
-                    <img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{title}}' />
+                    {{> storefront-image
+                        src=thumbnailUrl
+                        alt=''
+                        width='1'
+                        height='1'
+                        loading='lazy'
+                    }}
                 {{else}}
                     <span class='sf-thumb__placeholder'>no image</span>
                 {{/if}}

backend/src/modules/storefrontCore/views/partials/checkout-line-item.hbs

@@ -4,14 +4,26 @@
             {{#if linkHref}}
                 <a href='{{linkHref}}'>
                     {{#if thumbnailUrl}}
-                        <img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
+                        {{> storefront-image
+                            src=thumbnailUrl
+                            alt=''
+                            width='1'
+                            height='1'
+                            loading='lazy'
+                        }}
                     {{else}}
                         <span class='sf-thumb__placeholder'>no image</span>
                     {{/if}}
                 </a>
             {{else}}
                 {{#if thumbnailUrl}}
-                    <img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
+                    {{> storefront-image
+                        src=thumbnailUrl
+                        alt=''
+                        width='1'
+                        height='1'
+                        loading='lazy'
+                    }}
                 {{else}}
                     <span class='sf-thumb__placeholder'>no image</span>
                 {{/if}}

backend/src/modules/storefrontCore/views/partials/order-line-item.hbs

@@ -4,14 +4,26 @@
             {{#if linkHref}}
                 <a href='{{linkHref}}'>
                     {{#if thumbnailUrl}}
-                        <img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
+                        {{> storefront-image
+                            src=thumbnailUrl
+                            alt=''
+                            width='1'
+                            height='1'
+                            loading='lazy'
+                        }}
                     {{else}}
                         <span class='sf-thumb__placeholder'>no image</span>
                     {{/if}}
                 </a>
             {{else}}
                 {{#if thumbnailUrl}}
-                    <img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
+                    {{> storefront-image
+                        src=thumbnailUrl
+                        alt=''
+                        width='1'
+                        height='1'
+                        loading='lazy'
+                    }}
                 {{else}}
                     <span class='sf-thumb__placeholder'>no image</span>
                 {{/if}}

backend/src/modules/storefrontCore/views/partials/product-card.hbs

@@ -2,11 +2,14 @@
     {{#with selectedVariant}}
         {{#if thumbnailUrl}}
             <a class='sf-product-card__media-link' href='{{detailHref}}'>
-                <img
+                {{> storefront-image
                     class='sf-product-card__image'
-                    src='{{thumbnailUrl}}'
+                    src=thumbnailUrl
-                    alt='{{productTitle}} - {{title}}'
+                    alt=''
-                />
+                    width='1'
+                    height='1'
+                    loading='lazy'
+                }}
             </a>
         {{/if}}
     {{/with}}

backend/src/modules/storefrontCore/views/partials/shop-nav.hbs

@@ -3,7 +3,13 @@
         <div class='sf-header__brand-group'>
             {{#if logoUrl}}
                 <a class='sf-logo-link' href='/'>
-                    <img class='sf-logo' src='{{logoUrl}}' alt='{{shopName}}' />
+                    {{> storefront-image
+                        class='sf-logo'
+                        src=logoUrl
+                        alt=shopName
+                        width='200'
+                        height='50'
+                    }}
                 </a>
             {{else}}
                 <a class='sf-logo-link' href='/'>{{shopName}}</a>

backend/src/modules/storefrontCore/views/partials/storefront-image.hbs

@@ -0,0 +1,10 @@
+<img
+    class='{{class}}'
+    src='{{src}}'
+    alt='{{alt}}'
+    width='{{width}}'
+    height='{{height}}'
+    decoding='async'
+    {{#if loading}}loading='{{loading}}'{{/if}}
+    {{#if fetchPriority}}fetchpriority='{{fetchPriority}}'{{/if}}
+/>

backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs

@@ -1,10 +1,13 @@
 {{#if selectedImageUrl}}
     <div class='sf-product-gallery'>
-        <img
+        {{> storefront-image
             class='sf-product-gallery__main'
-            src='{{selectedImageUrl}}'
+            src=selectedImageUrl
-            alt='{{productTitle}}'
+            alt=productTitle
-        />
+            width='1'
+            height='1'
+            fetchPriority='high'
+        }}
 
         {{#if galleryImages}}
             {{#if (gt galleryImages.length 1)}}
@@ -15,7 +18,13 @@
                             class='sf-variant-link sf-variant-link--sm{{#if isSelected}} sf-variant-link--selected{{/if}}'
                             {{#if isSelected}}aria-current='page'{{/if}}
                         >
-                            <img src='{{url}}' alt='' />
+                            {{> storefront-image
+                                src=url
+                                alt=''
+                                width='1'
+                                height='1'
+                                loading='lazy'
+                            }}
                         </a>
                     {{/each}}
                 </div>

backend/src/modules/storefrontCore/views/partials/variant-picker-link.hbs

@@ -6,7 +6,13 @@
     {{#if size}}style='width:{{size}}px;height:{{size}}px;aspect-ratio:auto;'{{/if}}
 >
     {{#if thumbnailUrl}}
-        <img src='{{thumbnailUrl}}' alt='{{#if title}}{{title}}{{else}}Variant{{/if}}' />
+        {{> storefront-image
+            src=thumbnailUrl
+            alt=''
+            width='1'
+            height='1'
+            loading='lazy'
+        }}
     {{else}}
         <span class='sf-thumb__placeholder'>no image</span>
     {{/if}}