Optimize images for performance in Next.js applications
.cursorrules in your project rootOptimize images: 1. Use next/image for all images 2. Specify width and height props 3. Use appropriate loading strategy 4. Implement blur placeholders 5. Configure image domains properly 6. Use responsive sizes attribute 7. Optimize for Core Web Vitals 8. Lazy load below-fold images
Comprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.
Cursor
framework
AI coding rules customize how Cursor generates and refactors code for your project. Follow these steps to install Next.js Image Optimization.
.cursor/rules, for Windsurf use .windsurfrulesComprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Cursor rules for TypeScript with strict type checking, advanced patterns, and best practices.
Cursor rules for Tailwind CSS development with responsive design, custom components, and dark mode.