I have a simple webpage that I originally created using Vuetifyjs and I decided not to use that framework anymore. I have managed to strip all vuetify code and replace it with vanilla html/css, with the exception of v-img.
I am using the image as a banner image at the top of the page.
original code
<v-img
class="ban"
src="bg1-2560w.webp"
alt="some img"
lazy-src="pre.webp"
srcset="bg1-2560w.webp 2560w,
bg1-1440w.webp 1440w,
bg1-1024w.webp 1024w,
bg1-768w.webp 768w,
bg1-425w.webp 425w,
bg1-375w.webp 375w,
bg1-320w.webp 320w"
sizes="(min-width: 320px) 320w,
(min-width: 375px) 375w,
(min-width: 425px) 425w,
(min-width: 768px) 768w,
(min-width: 1024px) 1024w,
(min-width: 1440px) 1440w,
(min-width: 2560px) 2560w"
/>
I have tried replacing it with
<picture>
<source srcset="bg1-2560w.webp" type="image/webp" media="(min-width: 2560px)">
<source srcset="bg1-1440w.webp" type="image/webp" media="(min-width: 1440px)">
<source srcset="bg1-1024w.webp" type="image/webp" media="(min-width: 1024px)">
<source srcset="bg1-768w.webp" type="image/webp" media="(min-width: 768px)">
<source srcset="bg1-425w.webp" type="image/webp" media="(min-width: 425px)">
<source srcset="bg1-375w.webp" type="image/webp" media="(min-width: 375px)">
<source srcset="bg1-320w.webp" type="image/webp" media="(min-width: 320px)">
<img src="bg1-2560w.webp"
alt="some image"
height="769"
width="2560"
loading="lazy"
decoding="async"
class="ban"
/>
</picture>
The v-img version does what I want. However, it seems wasteful to import vuetify into my project solely for this one tag.
When I use the picture version and I run lighthouse on chrome. I get he following issues
Displays images with incorrect aspect ratio
Serves images with low resolution
Who do I fix this to perform similarly to the vuetify version for this limited case?