MENU
Image
According to the Web Almanac, images make up a significant portion of a typical website's page weight, greatly impacting Largest Contentful Paint (LCP) performance.
The Next.js <Image> component enhances the standard HTML <img> element with advanced features for automatic image optimization, including:
- Size Optimization: Automatically delivers appropriately sized images for each device, utilizing modern formats like WebP.
- Visual Stability: Prevents layout shifts during image loading, maintaining a smooth user experience.
- Faster Page Loads: Uses native browser lazy loading to load images only when they appear in the viewport, with optional blur-up placeholders for a smoother transition.
- Asset Flexibility: Supports on-demand image resizing, even for images hosted on remote servers.
The default generated srcset contains 1x and 2x images in order to support different device pixel ratios. However, you may wish to render a responsive image that stretches with the viewport. In that case, you'll need to set sizes as well as style (or className).
If you don't know the aspect ratio, you will need to set the fill prop and set position: relative on the parent. Optionally, you can set object-fit style depending on the desired stretch vs crop behavior.
The default loader will automatically bypass Image Optimization for animated images and serve the image as-is.
Auto-detection for animated files is best-effort and supports GIF, APNG, and WebP. If you want to explicitly bypass Image Optimization for a given animated image, use the unoptimized prop.