Responsive Images (multiple assets + LCP optimization)

Image Component With Layout Responsive

Even when this demo preloads both images (desktop & mobile) it will load a small blurred image (16x16) for the one that doesn't match screen width specified in the sizes attribute.

Show Hidden Images

• Uses Nextjs <Image/>component.
• The smaller image is configured to render only screens smaller than 768px via the sizes attribute.
• The bigger image is configured to render only on screens bigger than 768px via the sizes attribute.
• Both images use the priority attribute to enable prefetching.
• Additional CSS code is added to hide the corresponding image beased on media queries.