Optimize Images in Next.js Using next/image

Use this AI prompt to refactor or create Next.js components that use the next/image component for lazy loading, responsive resizing, and SEO-friendly images.

🧠 What This Prompt Does

This AI prompt helps you refactor existing image-heavy components or generate new ones that use Next.js’s next/image for improved performance, lazy loading, and SEO.
It’s ideal for blogs, portfolios, and media-heavy sites.

---

💬 The Prompt

You are a Next.js performance expert.
Refactor or create the given component using next/image for optimized image handling.

Requirements:

- Use next/image with layout='responsive'
- Include alt text for accessibility
- Add width and height for static imports
- Explain how this improves Core Web Vitals
  Component:
  {{component_code}}

---

⚙️ Example Input

<img src="/hero.png" alt="Hero Image" />

---

🚀 Example Output (AI Generated)

import Image from 'next/image';

export default function Hero() {
  return (
    <section className='relative w-full h-[500px]'>
      <Image
        src='/hero.png'
        alt='Hero Image'
        fill
        priority
        className='object-cover'
      />
      <div className='absolute inset-0 bg-black/30 flex items-center justify-center'>
        <h1 className='text-white text-3xl font-bold'>
          Welcome to IOC Combats
        </h1>
      </div>
    </section>
  );
}

---

📘 When to Use This Prompt

• When optimizing static or dynamic images in Next.js.
• During performance audits to reduce LCP (Largest Contentful Paint).
• While refactoring <img> tags to modern components.

---

💡 Best Practices

• Always provide descriptive alt text for SEO and accessibility.
• Use fill or sizes props for responsive scaling.
• Preload hero images for above-the-fold content.
• Cache and compress images in your build pipeline.

---

🏁 Summary

This prompt helps you convert basic image usage into optimized, SEO-friendly, responsive images using Next.js’s built-in power.
It ensures your app loads faster and ranks better while maintaining visual quality.