Images

images account for a huge portion of the typical website’s page weight and can have a sizable impact on your website's LCP performance. The Next.js Image component extends the HTML <img> element with features for automatic image optimization, including:

• Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
• Visual Stability: Prevent layout shift automatically when images are loading.
• Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
• Asset Flexibility: On-demand image resizing, even for images stored on remote servers