/optimize-images

Optimize all images in the project for web performance. Convert images to modern formats (WebP, AVIF) with fallbacks. Replace img tags with Next.js Image component for automatic optimization. Add proper width/height attributes to prevent layout shift. Implement lazy loading for below-fold images. Compress existing images using sharp or imagemin. Create responsive image sets with srcset. Add priority loading for hero images. Configure next.config.ts for image optimization. Measure performance improvements with Lighthouse. Reference frontend-development-agent for Next.js Image API expertise. Document image optimization guidelines.