Problem Statement
What are the key props of the Next.js Image component and when should you use each?
Explanation
The Image component requires src for the image path, alt for accessibility, and either width and height for static images or fill for responsive containers.
Use priority prop for images to prevent lazy loading, quality to control compression (default 75), placeholder with blur for loading states that requires blurDataURL or automatic blur for static imports, sizes to specify how wide the image will be at different breakpoints for responsive images, and loading='eager' for images that must load immediately.
Use fill when the image should fill its parent container (requires parent to have position relative), and use the loader prop to customize image optimization URLs when using external image hosts like Cloudinary or Imgix.
