Back to Glossary

Next.js Image Optimization

تحسين الصور في Next.js

Beginnernextjs1 min read
next/imageimage componentnext imageimage optimizationwebp conversion
Official DocsSign in to save & take notes

Definition

The built-in Next.js Image component that automatically resizes, compresses, and serves images in modern formats.

مكوّن الصورة المدمج في Next.js الذي يُغيّر الحجم تلقائيًا ويضغط الصور ويخدمها بتنسيقات حديثة.

Why It Matters

Project cover images and user avatars on 404Fault should use <Image> instead of <img> for automatic WebP conversion and lazy loading — directly improving LCP and CLS scores.

صور غلاف المشاريع وصور الملف الشخصي في 404Fault يجب استخدام <Image> بدلاً من <img> للتحويل التلقائي إلى WebP والتحميل الكسول — مما يُحسّن مباشرةً درجات LCP وCLS.

Full Definition

The `next/image` component (`<Image>` from 'next/image') automatically: converts images to WebP/AVIF, resizes to the displayed size, lazy-loads by default, prevents Cumulative Layout Shift (CLS) with size reservation, and serves from Vercel's image CDN. Requires `width` and `height` props or `fill` for responsive images. Much better for Core Web Vitals than a plain `<img>` tag.
مكوّن `next/image` يُحوّل الصور تلقائيًا إلى WebP/AVIF، ويُغيّر الحجم إلى الحجم المعروض، ويُحمّل بتكاسل افتراضيًا، ويمنع الإزاحة التراكمية للتخطيط (CLS) مع حجز الحجم.

Example Usage

“import Image from 'next/image'; <Image src={project.coverImageUrl} alt={project.title} width={800} height={450} className='rounded-xl object-cover' />”

“import Image from 'next/image'; <Image src={project.coverImageUrl} alt={project.title} width={800} height={450} className='rounded-xl object-cover' />”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Next.js Image Optimization:

1

Using `<img>` instead of `<Image>` — misses all the optimization

2

Forgetting to add external image domains to next.config.js `images.remotePatterns`

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Next.js Image Optimization.

Explain:
1. What is Next.js Image Optimization and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Using `<img>` instead of `<Image>` — misses all the optimization, Forgetting to add external image domains to next.config.js `images.remotePatterns`
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account