Optimize <ImageAsset /> component (#415)

* adds `decoding="async"` attribute to images
* adds default `loading="lazy"` attribute to images

Author: sanjaiyan-dev

src/components/ImageAsset.vue

@@ -13,6 +13,7 @@
     v-if="fallbackImageSrcSet"
     class="fallback"
     title="Image failed to load"
+    decoding="async"
     :alt="alt"
     :srcset="fallbackImageSrcSet"
   />
@@ -31,6 +32,8 @@
       v-if="prefersDark && darkVariantAttributes"
       v-bind="darkVariantAttributes"
       ref="img"
+      decoding="async"
+      :loading="loading"
       :alt="alt"
       :width="darkVariantAttributes.width || optimalWidth"
       :height="(darkVariantAttributes.width || optimalWidth) ? 'auto' : null"
@@ -43,6 +46,8 @@
       v-else
       v-bind="defaultAttributes"
       ref="img"
+      decoding="async"
+      :loading="loading"
       :alt="alt"
       :width="defaultAttributes.width || optimalWidth"
       :height="(defaultAttributes.width || optimalWidth) ? 'auto' : null"
@@ -129,6 +134,10 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: String,
+      default: 'lazy',
+    },
   },
   methods: {
     handleImageLoadError() {

tests/unit/components/Asset.spec.js

@@ -185,6 +185,7 @@ describe('Asset', () => {
       expect(asset.exists()).toBe(true);
       expect(asset.props()).toEqual({
         alt: image.alt,
+        loading: "lazy",
         variants: image.variants,
       });
     });
@@ -194,6 +195,7 @@ describe('Asset', () => {
       const asset = wrapper.find(ImageAsset);
       expect(asset.props()).toEqual({
         alt: image.alt,
+        loading: "lazy",
         variants: image.variants,
       });
     });

tests/unit/components/ImageAsset.spec.js

@@ -54,6 +54,7 @@ describe('ImageAsset', () => {
     expect(image.attributes('width')).toBe('1202');
     expect(image.attributes('height')).toBe('auto');
     expect(image.attributes('alt')).toBe(alt);
+    expect(image.attributes('decoding')).toBe('async');
   });
 
   it('renders an image that has one variant with no appearance trait', () => {
@@ -85,6 +86,7 @@ describe('ImageAsset', () => {
     expect(image.attributes('width')).toBe('300');
     expect(image.attributes('height')).toBe('auto');
     expect(image.attributes('alt')).toBe('');
+    expect(image.attributes('decoding')).toBe('async');
   });
 
   it('renders an image that has two light variants', () => {
@@ -128,6 +130,7 @@ describe('ImageAsset', () => {
     expect(image.attributes('srcset')).toBe(`${url2x} 2x, ${url3x} 3x`);
     expect(image.attributes('width')).toBe('1202');
     expect(image.attributes('height')).toBe('auto');
+    expect(image.attributes('decoding')).toBe('async');
   });
 
   it('renders an image that has two dark variants', () => {