Troubleshooting high bandwidth usage on a marketing site

<template>
  <SanityImage v-if="assetId" :asset-id="assetId" auto="format">
    <template #default="{ src }">
      <img
        :data-src="src"
        :data-srcset="generateSrcset(src)"
        :src="src"
        :srcset="lqip || transparentPixel"
        data-sizes="auto"
        :alt="alt"
        :height="height"
        :width="width"
        :class="['lazyload', { 'fade-up': !lqip }]"
      />
    </template>
  </SanityImage>
</template>

<script>
export default {
  props: {
    image: {
      type: Object,
      required: true
    },
    jpeg: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    alt() {
      return this.image?.alt || ''
    },
    asset() {
      return this.image?.asset
    },
    assetId() {
      return this.asset?._id
    },
    dimensions() {
      return this.metadata?.dimensions
    },
    height() {
      return this.dimensions?.height
    },
    lqip() {
      return this.metadata?.lqip
    },
    metadata() {
      return this.asset?.metadata
    },
    transparentPixel() {
      return 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    },
    width() {
      return this.dimensions?.width
    }
  },
  methods: {
    generateSrcset(src) {
      const widths = [640, 768, 1024, 1366, 1600, 1960]
      return this.jpeg
        ? widths.map(width => `${src}&w=${width}&fm=jpg ${width}w`).join()
        : widths.map(width => `${src}&w=${width} ${width}w`).join()
    }
  }
}
</script>