Nicepage uses one large image (e.g., 1920x1080) and resizes it via CSS (width, height) or img attributes for all viewports.
Mobile users (e.g., 375px viewport) download a massive file (say, 500 KB) when they only need ~50 KB, killing load times.
We know exact pixel dimensions per viewport (e.g., XS: 340px, SM: 540px, etc.), so we can serve right-sized images.
Nicepage should pay attention to the image size required at each viewport and generate correctly sized webp or avif images.
I propose something like this example below. (I've removed < symbols) picture>
source media="(max-width: 575px)" srcset="images/image-xs.webp" type="image/webp">
source media="(max-width: 767px)" srcset="images/image-sm.webp" type="image/webp">
source media="(max-width: 991px)" srcset="images/image-md.webp" type="image/webp">
source media="(max-width: 1199px)" srcset="images/image-lg.webp" type="image/webp">
source media="(max-width: 1399px)" srcset="images/image-xl.webp" type="image/webp">
source srcset="images/image-xxl.webp" type="image/webp">
img src="images/image-xxl.jpg" alt="Description" class="u-image" style="width: 100%; height: auto;">
/picture>
